diff --git a/src/App.vue b/src/App.vue
index 8413ea35..f991459d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,7 @@
     // uni.hideTabBar({
     //   fail: () => {},
     // });
+
     // 加载Shopro底层依赖
     ShoproInit();
   });
diff --git a/src/main.scss b/src/main.scss
index 82fb7f98..b87c5fcb 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -14,5 +14,8 @@ page {
   background-color: #222222;
   color: #ffffff;
   font-size: 14px;
+  height: 100%;
   --wot-color-theme: #ffcd32;
+  --wot-backtop-bg: #ffcd32;
+  --wot-dark-background: #222;
 }
diff --git a/src/main.ts b/src/main.ts
index a2400157..e00b21aa 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,5 @@
 import App from './App.vue';
-import { createSSRApp, defineComponent, h } from 'vue';
+import { createSSRApp } from 'vue';
 // @ts-ignore
 import { setupPinia } from './sheep/store';
 import './main.scss';
@@ -7,7 +7,9 @@ import 'virtual:uno.css';
 
 export function createApp() {
   const app = createSSRApp(App);
+
   setupPinia(app);
+
   return {
     app,
   };
diff --git a/src/pages.json b/src/pages.json
index ca03f7ea..e1498f87 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -4,10 +4,89 @@
     "custom": {
       "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
       "^su-(.*)": "@/sheep/ui/su-$1/su-$1.vue",
+      "^s-(.*)": "@/sheep/components/s-$1/s-$1.vue",
       "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
     }
   },
   "pages": [
+    // {
+    //   "path": "pages/index/index",
+    //   "aliasPath": "/",
+    //   "style": {
+    //     "navigationBarTitleText": "首页",
+    //     "enablePullDownRefresh": true
+    //   },
+    //   "meta": {
+    //     "auth": false,
+    //     "sync": true,
+    //     "title": "首页",
+    //     "group": "商城"
+    //   }
+    // },
+    // {
+    //   "path": "pages/index/user",
+    //   "style": {
+    //     "navigationBarTitleText": "个人中心",
+    //     "enablePullDownRefresh": true
+    //   },
+    //   "meta": {
+    //     "sync": true,
+    //     "title": "个人中心",
+    //     "group": "商城"
+    //   }
+    // },
+    // {
+    //   "path": "pages/index/category",
+    //   "style": {
+    //     "navigationBarTitleText": "商品分类"
+    //   },
+    //   "meta": {
+    //     "sync": true,
+    //     "title": "商品分类",
+    //     "group": "商城"
+    //   }
+    // },
+    // {
+    //   "path": "pages/index/cart",
+    //   "style": {
+    //     "navigationBarTitleText": "购物车"
+    //   },
+    //   "meta": {
+    //     "sync": true,
+    //     "title": "购物车",
+    //     "group": "商城"
+    //   }
+    // },
+    // {
+    //   "path": "pages/index/login",
+    //   "style": {
+    //     "navigationBarTitleText": "登录"
+    //   }
+    // },
+    // {
+    //   "path": "pages/index/search",
+    //   "style": {
+    //     "navigationBarTitleText": "搜索"
+    //   },
+    //   "meta": {
+    //     "sync": true,
+    //     "title": "搜索",
+    //     "group": "商城"
+    //   }
+    // },
+    // {
+    //   "path": "pages/index/page",
+    //   "style": {
+    //     "navigationBarTitleText": ""
+    //   },
+    //   "meta": {
+    //     "auth": false,
+    //     "sync": true,
+    //     "title": "自定义页面",
+    //     "group": "商城"
+    //   }
+    // },
+
     {
       "path": "pages/home/home",
       "style": {
@@ -100,12 +179,614 @@
         }
       ]
     }
+
+    // {
+    //   "root": "pages/goods",
+    //   "pages": [
+    //     {
+    //       "path": "index",
+    //       "style": {
+    //         "navigationBarTitleText": "商品详情"
+    //       },
+    //       "meta": {
+    //         "sync": true,
+    //         "title": "普通商品",
+    //         "group": "商品"
+    //       }
+    //     },
+    //     {
+    //       "path": "groupon",
+    //       "style": {
+    //         "navigationBarTitleText": "拼团商品"
+    //       },
+    //       "meta": {
+    //         "sync": true,
+    //         "title": "拼团商品",
+    //         "group": "商品"
+    //       }
+    //     },
+
+    //     {
+    //       "path": "seckill",
+    //       "style": {
+    //         "navigationBarTitleText": "秒杀商品"
+    //       },
+    //       "meta": {
+    //         "sync": true,
+    //         "title": "秒杀商品",
+    //         "group": "商品"
+    //       }
+    //     },
+    //     {
+    //       "path": "point",
+    //       "style": {
+    //         "navigationBarTitleText": "积分商品"
+    //       },
+    //       "meta": {
+    //         "sync": true,
+    //         "title": "积分商品",
+    //         "group": "商品"
+    //       }
+    //     },
+    //     {
+    //       "path": "list",
+    //       "style": {
+    //         "navigationBarTitleText": "商品列表"
+    //       },
+    //       "meta": {
+    //         "sync": true,
+    //         "title": "商品列表",
+    //         "group": "商品"
+    //       }
+    //     },
+    //     {
+    //       "path": "comment/add",
+    //       "style": {
+    //         "navigationBarTitleText": "评价商品"
+    //       },
+    //       "meta": {
+    //         "auth": true
+    //       }
+    //     },
+    //     {
+    //       "path": "comment/list",
+    //       "style": {
+    //         "navigationBarTitleText": "商品评价"
+    //       }
+    //     }
+    //   ]
+    // },
+    // {
+    //   "root": "pages/order",
+    //   "pages": [
+    //     {
+    //       "path": "detail",
+    //       "style": {
+    //         "navigationBarTitleText": "订单详情"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "title": "订单详情"
+    //       }
+    //     },
+    //     {
+    //       "path": "confirm",
+    //       "style": {
+    //         "navigationBarTitleText": "确认订单"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "title": "确认订单"
+    //       }
+    //     },
+    //     {
+    //       "path": "list",
+    //       "style": {
+    //         "navigationBarTitleText": "我的订单",
+    //         "enablePullDownRefresh": true
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "用户订单",
+    //         "group": "订单中心"
+    //       }
+    //     },
+    //     {
+    //       "path": "aftersale/apply",
+    //       "style": {
+    //         "navigationBarTitleText": "申请售后"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "title": "申请售后"
+    //       }
+    //     },
+    //     {
+    //       "path": "aftersale/return-delivery",
+    //       "style": {
+    //         "navigationBarTitleText": "退货物流"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "title": "退货物流"
+    //       }
+    //     },
+    //     {
+    //       "path": "aftersale/list",
+    //       "style": {
+    //         "navigationBarTitleText": "售后列表"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "售后订单",
+    //         "group": "订单中心"
+    //       }
+    //     },
+    //     {
+    //       "path": "aftersale/detail",
+    //       "style": {
+    //         "navigationBarTitleText": "售后详情"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "title": "售后详情"
+    //       }
+    //     },
+    //     {
+    //       "path": "aftersale/log",
+    //       "style": {
+    //         "navigationBarTitleText": "售后进度"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "title": "售后进度"
+    //       }
+    //     },
+    //     {
+    //       "path": "express/log",
+    //       "style": {
+    //         "navigationBarTitleText": "物流轨迹"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "title": "物流轨迹"
+    //       }
+    //     }
+    //   ]
+    // },
+    // {
+    //   "root": "pages/user",
+    //   "pages": [
+    //     {
+    //       "path": "info",
+    //       "style": {
+    //         "navigationBarTitleText": "我的信息"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "用户信息",
+    //         "group": "用户中心"
+    //       }
+    //     },
+    //     {
+    //       "path": "goods-collect",
+    //       "style": {
+    //         "navigationBarTitleText": "我的收藏"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "商品收藏",
+    //         "group": "用户中心"
+    //       }
+    //     },
+    //     {
+    //       "path": "goods-log",
+    //       "style": {
+    //         "navigationBarTitleText": "我的足迹"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "浏览记录",
+    //         "group": "用户中心"
+    //       }
+    //     },
+    //     {
+    //       "path": "address/list",
+    //       "style": {
+    //         "navigationBarTitleText": "收货地址"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "地址管理",
+    //         "group": "用户中心"
+    //       }
+    //     },
+    //     {
+    //       "path": "address/edit",
+    //       "style": {
+    //         "navigationBarTitleText": "编辑地址"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "title": "编辑地址"
+    //       }
+    //     },
+    //     {
+    //       "path": "goods_details_store/index",
+    //       "style": {
+    //         "navigationBarTitleText": "自提门店"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "地址管理",
+    //         "group": "用户中心"
+    //       }
+    //     },
+    //     {
+    //       "path": "wallet/money",
+    //       "style": {
+    //         "navigationBarTitleText": "我的余额"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "用户余额",
+    //         "group": "用户中心"
+    //       }
+    //     },
+    //     {
+    //       "path": "wallet/score",
+    //       "style": {
+    //         "navigationBarTitleText": "我的积分"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "用户积分",
+    //         "group": "用户中心"
+    //       }
+    //     }
+    //   ]
+    // },
+    // {
+    //   "root": "pages/commission",
+    //   "pages": [
+    //     {
+    //       "path": "index",
+    //       "style": {
+    //         "navigationBarTitleText": "分销"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "分销中心",
+    //         "group": "分销商城"
+    //       }
+    //     },
+    //     {
+    //       "path": "wallet",
+    //       "style": {
+    //         "navigationBarTitleText": "我的佣金"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "用户佣金",
+    //         "group": "分销中心"
+    //       }
+    //     },
+    //     {
+    //       "path": "goods",
+    //       "style": {
+    //         "navigationBarTitleText": "推广商品"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "推广商品",
+    //         "group": "分销商城"
+    //       }
+    //     },
+    //     {
+    //       "path": "order",
+    //       "style": {
+    //         "navigationBarTitleText": "分销订单"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "分销订单",
+    //         "group": "分销商城"
+    //       }
+    //     },
+    //     {
+    //       "path": "team",
+    //       "style": {
+    //         "navigationBarTitleText": "我的团队"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "我的团队",
+    //         "group": "分销商城"
+    //       }
+    //     },
+    //     {
+    //       "path": "promoter",
+    //       "style": {
+    //         "navigationBarTitleText": "推广人排行榜"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "推广人排行榜",
+    //         "group": "分销商城"
+    //       }
+    //     },
+    //     {
+    //       "path": "commission-ranking",
+    //       "style": {
+    //         "navigationBarTitleText": "佣金排行榜"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "佣金排行榜",
+    //         "group": "分销商城"
+    //       }
+    //     },
+    //     {
+    //       "path": "withdraw",
+    //       "style": {
+    //         "navigationBarTitleText": "申请提现"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "申请提现",
+    //         "group": "分销商城"
+    //       }
+    //     }
+    //   ]
+    // },
+    // {
+    //   "root": "pages/app",
+    //   "pages": [
+    //     {
+    //       "path": "sign",
+    //       "style": {
+    //         "navigationBarTitleText": "签到中心"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "签到中心",
+    //         "group": "应用"
+    //       }
+    //     }
+    //   ]
+    // },
+    // {
+    //   "root": "pages/public",
+    //   "pages": [
+    //     {
+    //       "path": "setting",
+    //       "style": {
+    //         "navigationBarTitleText": "系统设置"
+    //       },
+    //       "meta": {
+    //         "sync": true,
+    //         "title": "系统设置",
+    //         "group": "通用"
+    //       }
+    //     },
+    //     {
+    //       "path": "richtext",
+    //       "style": {
+    //         "navigationBarTitleText": "富文本"
+    //       },
+    //       "meta": {
+    //         "sync": true,
+    //         "title": "富文本",
+    //         "group": "通用"
+    //       }
+    //     },
+    //     {
+    //       "path": "faq",
+    //       "style": {
+    //         "navigationBarTitleText": "常见问题"
+    //       },
+    //       "meta": {
+    //         "sync": true,
+    //         "title": "常见问题",
+    //         "group": "通用"
+    //       }
+    //     },
+    //     {
+    //       "path": "error",
+    //       "style": {
+    //         "navigationBarTitleText": "错误页面"
+    //       }
+    //     },
+    //     {
+    //       "path": "webview",
+    //       "style": {
+    //         "navigationBarTitleText": ""
+    //       }
+    //     }
+    //   ]
+    // },
+    // {
+    //   "root": "pages/coupon",
+    //   "pages": [
+    //     {
+    //       "path": "list",
+    //       "style": {
+    //         "navigationBarTitleText": "领券中心"
+    //       },
+    //       "meta": {
+    //         "sync": true,
+    //         "title": "领券中心",
+    //         "group": "优惠券"
+    //       }
+    //     },
+    //     {
+    //       "path": "detail",
+    //       "style": {
+    //         "navigationBarTitleText": "优惠券"
+    //       },
+    //       "meta": {
+    //         "auth": false,
+    //         "sync": true,
+    //         "title": "优惠券详情",
+    //         "group": "优惠券"
+    //       }
+    //     }
+    //   ]
+    // },
+    // {
+    //   "root": "pages/chat",
+    //   "pages": [
+    //     {
+    //       "path": "index",
+    //       "style": {
+    //         "navigationBarTitleText": "客服",
+    //         "app-plus": {
+    //           "softinputMode": "adjustResize"
+    //         }
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "客服",
+    //         "group": "客服"
+    //       }
+    //     }
+    //   ]
+    // },
+    // {
+    //   "root": "pages/pay",
+    //   "pages": [
+    //     {
+    //       "path": "index",
+    //       "style": {
+    //         "navigationBarTitleText": "收银台"
+    //       }
+    //     },
+    //     {
+    //       "path": "result",
+    //       "style": {
+    //         "navigationBarTitleText": "支付结果"
+    //       }
+    //     },
+    //     {
+    //       "path": "recharge",
+    //       "style": {
+    //         "navigationBarTitleText": "充值余额"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "充值余额",
+    //         "group": "支付"
+    //       }
+    //     },
+    //     {
+    //       "path": "recharge-log",
+    //       "style": {
+    //         "navigationBarTitleText": "充值记录"
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "充值记录",
+    //         "group": "支付"
+    //       }
+    //     }
+    //   ]
+    // },
+    // {
+    //   "root": "pages/activity",
+    //   "pages": [
+    //     {
+    //       "path": "groupon/detail",
+    //       "style": {
+    //         "navigationBarTitleText": "拼团详情"
+    //       }
+    //     },
+    //     {
+    //       "path": "groupon/order",
+    //       "style": {
+    //         "navigationBarTitleText": "我的拼团",
+    //         "enablePullDownRefresh": true
+    //       },
+    //       "meta": {
+    //         "auth": true,
+    //         "sync": true,
+    //         "title": "拼团订单",
+    //         "group": "营销活动"
+    //       }
+    //     },
+    //     {
+    //       "path": "index",
+    //       "style": {
+    //         "navigationBarTitleText": "营销商品"
+    //       },
+    //       "meta": {
+    //         "sync": true,
+    //         "title": "营销商品",
+    //         "group": "营销活动"
+    //       }
+    //     },
+    //     {
+    //       "path": "groupon/list",
+    //       "style": {
+    //         "navigationBarTitleText": "拼团活动"
+    //       },
+    //       "meta": {
+    //         "sync": true,
+    //         "title": "拼团活动",
+    //         "group": "营销活动"
+    //       }
+    //     },
+    //     {
+    //       "path": "seckill/list",
+    //       "style": {
+    //         "navigationBarTitleText": "秒杀活动"
+    //       },
+    //       "meta": {
+    //         "sync": true,
+    //         "title": "秒杀活动",
+    //         "group": "营销活动"
+    //       }
+    //     },
+    //     {
+    //       "path": "point/list",
+    //       "style": {
+    //         "navigationBarTitleText": "积分商城"
+    //       },
+    //       "meta": {
+    //         "sync": true,
+    //         "title": "积分商城",
+    //         "group": "营销活动"
+    //       }
+    //     }
+    // ]
+    // }
   ],
   "globalStyle": {
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "交友聊天",
     "navigationBarBackgroundColor": "#F8F8F8",
-    "backgroundColor": "#F8F8F8"
+    "backgroundColor": "#F8F8F8",
+    "navigationStyle": "custom"
   },
   "tabBar": {
     "color": "#fff",
diff --git a/src/pages/activity/groupon/detail.vue b/src/pages/activity/groupon/detail.vue
new file mode 100644
index 00000000..f9ef7816
--- /dev/null
+++ b/src/pages/activity/groupon/detail.vue
@@ -0,0 +1,539 @@
+<!-- 拼团订单的详情 -->
+<template>
+  <s-layout
+    title="拼团详情"
+    class="detail-wrap"
+    :navbar="state.data && !state.loading ? 'inner' : 'normal'"
+    :onShareAppMessage="shareInfo"
+  >
+    <view v-if="state.loading"></view>
+    <view v-if="state.data && !state.loading">
+      <!-- 团长信息 + 活动信息 -->
+      <view
+        class="recharge-box"
+        v-if="state.data.headRecord"
+        :style="[
+          {
+            marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+            paddingTop: Number(statusBarHeight + 108) + 'rpx',
+          },
+        ]"
+      >
+        <s-goods-item
+          class="goods-box"
+          :img="state.data.headRecord.picUrl"
+          :title="state.data.headRecord.spuName"
+          :price="state.data.headRecord.combinationPrice"
+          priceColor="#E1212B"
+          @tap="
+            sheep.$router.go('/pages/goods/groupon', {
+              id: state.data.headRecord.activityId,
+            })
+          "
+          :style="[{ top: Number(statusBarHeight + 108) + 'rpx' }]"
+        >
+          <template #groupon>
+            <view class="ss-flex">
+              <view class="sales-title">{{ state.data.headRecord.userSize }}人团</view>
+              <view class="num-title ss-m-l-20">已拼{{ state.data.headRecord.userCount }}件</view>
+            </view>
+          </template>
+        </s-goods-item>
+      </view>
+
+      <view class="countdown-box detail-card ss-p-t-44 ss-flex-col ss-col-center">
+        <!-- 情况一：拼团成功 -->
+        <view v-if="state.data.headRecord.status === 1">
+          <view v-if="state.data.orderId">
+            <view class="countdown-title ss-flex">
+              <text class="cicon-check-round" />
+              恭喜您~拼团成功
+            </view>
+          </view>
+          <view v-else>
+            <view class="countdown-title ss-flex">
+              <text class="cicon-info" />
+              抱歉~该团已满员
+            </view>
+          </view>
+        </view>
+
+        <!-- 情况二：拼团失败 -->
+        <view v-if="state.data.headRecord.status === 2">
+          <view class="countdown-title ss-flex">
+            <text class="cicon-info"></text>
+            {{ state.data.orderId ? '拼团超时,已自动退款' : '该团已解散' }}
+          </view>
+        </view>
+
+        <!-- 情况三：拼团进行中 -->
+        <view v-if="state.data.headRecord.status === 0">
+          <view v-if="state.data.headRecord.expireTime <= new Date().getTime()">
+            <view class="countdown-title ss-flex">
+              <text class="cicon-info"></text>
+              拼团已结束,请关注下次活动
+            </view>
+          </view>
+          <view class="countdown-title ss-flex" v-else>
+            还差
+            <view class="num"
+              >{{ state.data.headRecord.userSize - state.data.headRecord.userCount }}人</view
+            >
+            拼团成功
+            <view class="ss-flex countdown-time">
+              <view class="countdown-h ss-flex ss-row-center">{{ endTime.h }}</view>
+              <view class="ss-m-x-4">:</view>
+              <view class="countdown-num ss-flex ss-row-center">
+                {{ endTime.m }}
+              </view>
+              <view class="ss-m-x-4">:</view>
+              <view class="countdown-num ss-flex ss-row-center">
+                {{ endTime.s }}
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <!-- 拼团的记录列表，展示每个参团人 -->
+        <view class="ss-m-t-60 ss-flex ss-flex-wrap ss-row-center">
+          <!-- 团长 -->
+          <view class="header-avatar ss-m-r-24 ss-m-b-20">
+            <image :src="sheep.$url.cdn(state.data.headRecord.avatar) || sheep.$url.static('/static/img/shop/default_avatar.png')" class="avatar-img"></image>
+            <view class="header-tag ss-flex ss-col-center ss-row-center">团长</view>
+          </view>
+          <!-- 团员 -->
+          <view
+            class="header-avatar ss-m-r-24 ss-m-b-20"
+            v-for="item in state.data.memberRecords"
+            :key="item.id"
+          >
+            <image :src="sheep.$url.cdn(item.avatar) || sheep.$url.static('/static/img/shop/default_avatar.png')" class="avatar-img"></image>
+            <view
+              class="header-tag ss-flex ss-col-center ss-row-center"
+              v-if="item.is_leader == '1'"
+            >
+              团长
+            </view>
+          </view>
+          <!-- 还有几个坑位 -->
+          <view
+            class="default-avatar ss-m-r-24 ss-m-b-20"
+            v-for="item in state.remainNumber"
+            :key="item"
+          >
+            <image
+              :src="sheep.$url.static('/static/img/shop/avatar/unknown.png')"
+              class="avatar-img"
+            ></image>
+          </view>
+        </view>
+      </view>
+
+      <!-- 情况一：拼团成功；情况二：拼团失败 -->
+      <view
+        v-if="state.data.headRecord.status === 1 || state.data.headRecord.status === 2"
+        class="ss-m-t-40 ss-flex ss-row-center"
+      >
+        <button
+          class="ss-reset-button order-btn"
+          v-if="state.data.orderId"
+          @tap="onDetail(state.data.orderId)"
+        >
+          查看订单
+        </button>
+        <button class="ss-reset-button join-btn" v-else @tap="onCreateGroupon"> 我要开团 </button>
+      </view>
+
+      <!-- 情况三：拼团进行中，查看订单或参加或邀请好友或参加 -->
+      <view v-if="state.data.headRecord.status === 0" class="ss-m-t-40 ss-flex ss-row-center">
+        <view v-if="state.data.headRecord.expireTime <= new Date().getTime()">
+          <button
+            class="ss-reset-button join-btn"
+            v-if="state.data.orderId"
+            @tap="onDetail(state.data.orderId)"
+          >
+            查看订单
+          </button>
+          <button
+            class="ss-reset-button disabled-btn"
+            v-else
+            disabled
+            @tap="onDetail(state.data.orderId)"
+          >
+            去参团
+          </button>
+        </view>
+        <view v-else class="ss-flex ss-row-center">
+          <view v-if="state.data.orderId">
+            <button class="ss-reset-button join-btn" :disabled="endTime.ms <= 0" @tap="onShare">
+              邀请好友来拼团
+            </button>
+          </view>
+          <view v-else>
+            <button
+              class="ss-reset-button join-btn"
+              :disabled="endTime.ms <= 0"
+              @tap="onJoinGroupon()"
+            >
+              立即参团
+            </button>
+          </view>
+        </view>
+      </view>
+
+      <view v-if="!isEmpty(state.goodsInfo)">
+        <!-- 规格与数量弹框 -->
+        <s-select-groupon-sku
+          :show="state.showSelectSku"
+          :goodsInfo="state.goodsInfo"
+          :grouponAction="state.grouponAction"
+          :grouponNum="state.grouponNum"
+          @buy="onBuy"
+          @change="onSkuChange"
+          @close="state.showSelectSku = false"
+        />
+      </view>
+    </view>
+
+    <s-empty v-if="!state.data && !state.loading" icon="/static/goods-empty.png" />
+  </s-layout>
+</template>
+
+<script setup>
+  import { computed, reactive } from 'vue';
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { fen2yuan, useDurationTime } from '@/sheep/hooks/useGoods';
+  import { showShareModal } from '@/sheep/hooks/useModal';
+  import { isEmpty } from 'lodash-es';
+  import CombinationApi from '@/sheep/api/promotion/combination';
+  import SpuApi from '@/sheep/api/product/spu';
+  import { SharePageEnum } from '@/sheep/helper/const';
+
+  const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const state = reactive({
+    data: {}, // 拼团详情
+    goodsId: 0, // 商品ID
+    goodsInfo: {}, // 商品信息
+    showSelectSku: false, // 显示规格弹框
+    selectedSkuPrice: {}, // 选中的规格价格
+    activity: {}, // 团购活动
+    grouponId: 0, // 团购ID
+    grouponNum: 0, // 团购人数
+    grouponAction: 'create', // 团购操作
+    combinationHeadId: null, // 拼团团长编号
+    loading: true,
+  });
+
+  const shareInfo = computed(() => {
+    if (isEmpty(state.data)) return {};
+    return sheep.$platform.share.getShareInfo(
+      {
+        title: state.data.headRecord.spuName,
+        image: sheep.$url.cdn(state.data.headRecord.picUrl),
+        desc: state.data.goods?.subtitle,
+        params: {
+          page: SharePageEnum.GROUPON_DETAIL.value,
+          query: state.data.headRecord.id,
+        },
+      },
+      {
+        type: 'groupon', // 邀请拼团海报
+        title: state.data.headRecord.spuName, // 商品标题
+        image: sheep.$url.cdn(state.data.headRecord.picUrl), // 商品主图
+        price: fen2yuan(state.data.headRecord.combinationPrice), // 商品价格
+        grouponNum: state.data.headRecord.userSize, // 拼团人数
+      },
+    );
+  });
+
+  // 订单详情
+  function onDetail(orderId) {
+    sheep.$router.go('/pages/order/detail', {
+      id: orderId,
+    });
+  }
+
+  // 去开团
+  function onCreateGroupon() {
+    state.grouponAction = 'create';
+    state.grouponId = 0;
+    state.showSelectSku = true;
+  }
+
+  // 规格变更
+  function onSkuChange(e) {
+    state.selectedSkuPrice = e;
+  }
+
+  // 立即参团
+  function onJoinGroupon() {
+    state.grouponAction = 'join';
+    state.grouponId = state.data.headRecord.activityId;
+    state.combinationHeadId = state.data.headRecord.id;
+    state.grouponNum = state.data.headRecord.userSize;
+    state.showSelectSku = true;
+  }
+
+  // 立即购买
+  function onBuy(sku) {
+    sheep.$router.go('/pages/order/confirm', {
+      data: JSON.stringify({
+        order_type: 'goods',
+        combinationActivityId: state.activity.id,
+        combinationHeadId: state.combinationHeadId,
+        items: [
+          {
+            skuId: sku.id,
+            count: sku.count,
+          },
+        ],
+      }),
+    });
+  }
+
+  const endTime = computed(() => {
+    return useDurationTime(state.data.headRecord.expireTime);
+  });
+
+  // 获取拼团团队详情
+  async function getGrouponDetail(id) {
+    const { code, data } = await CombinationApi.getCombinationRecordDetail(id);
+    if (code === 0) {
+      state.data = data;
+      const remainNumber = Number(state.data.headRecord.userSize - state.data.headRecord.userCount);
+      state.remainNumber = remainNumber > 0 ? remainNumber : 0;
+
+      // 获取活动信息
+      const { data: activity } = await CombinationApi.getCombinationActivity(
+        data.headRecord.activityId,
+      );
+      state.activity = activity;
+      state.grouponNum = activity.userSize;
+      // 加载商品信息
+      const { data: spu } = await SpuApi.getSpuDetail(activity.spuId);
+      state.goodsId = spu.id;
+      // 默认显示最低价
+      activity.products.forEach((product) => {
+        spu.price = Math.min(spu.price, product.combinationPrice); // 设置 SPU 的最低价格
+      });
+      state.goodsInfo = spu;
+      // 价格、库存使用活动的
+      spu.skus.forEach((sku) => {
+        const product = activity.products.find((product) => product.skuId === sku.id);
+        if (product) {
+          sku.price = product.combinationPrice;
+        } else {
+          // 找不到可能是没配置，则不能发起秒杀
+          sku.stock = 0;
+        }
+      });
+    } else {
+      state.data = null;
+    }
+    state.loading = false;
+  }
+
+  function onShare() {
+    showShareModal();
+  }
+
+  onLoad((options) => {
+    getGrouponDetail(options.id);
+  });
+</script>
+
+<style lang="scss" scoped>
+  .recharge-box {
+    position: relative;
+    margin-bottom: 120rpx;
+    background: v-bind(headerBg) center/750rpx 100% no-repeat,
+      linear-gradient(115deg, #f44739 0%, #ff6600 100%);
+    border-radius: 0 0 5% 5%;
+    height: 100rpx;
+
+    .goods-box {
+      width: 710rpx;
+      border-radius: 20rpx;
+      position: absolute;
+      left: 20rpx;
+      box-sizing: border-box;
+    }
+
+    .sales-title {
+      height: 32rpx;
+      background: rgba(#ffe0e2, 0.29);
+      border-radius: 16rpx;
+      font-size: 24rpx;
+      font-weight: 400;
+      padding: 6rpx 20rpx;
+      color: #f7979c;
+    }
+
+    .num-title {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #999999;
+    }
+  }
+
+  .countdown-time {
+    font-size: 26rpx;
+    font-weight: 500;
+    color: #383a46;
+    .countdown-h {
+      font-size: 24rpx;
+      font-family: OPPOSANS;
+      font-weight: 500;
+      color: #ffffff;
+      padding: 0 4rpx;
+      margin-left: 16rpx;
+      height: 40rpx;
+      background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
+      border-radius: 6rpx;
+    }
+    .countdown-num {
+      font-size: 24rpx;
+      font-family: OPPOSANS;
+      font-weight: 500;
+      color: #ffffff;
+      width: 40rpx;
+      height: 40rpx;
+      background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
+      border-radius: 6rpx;
+    }
+  }
+
+  .countdown-box {
+    // height: 364rpx;
+    background: #ffffff;
+    border-radius: 10rpx;
+    box-sizing: border-box;
+
+    .countdown-title {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #333333;
+
+      .cicon-check-round {
+        color: #42b111;
+        margin-right: 24rpx;
+      }
+
+      .cicon-info {
+        color: #d71e08;
+        margin-right: 24rpx;
+      }
+
+      .num {
+        color: #ff6000;
+      }
+    }
+
+    .header-avatar {
+      width: 86rpx;
+      height: 86rpx;
+      background: #ececec;
+      border-radius: 50%;
+      border: 4rpx solid #edc36c;
+      position: relative;
+      box-sizing: border-box;
+
+      .avatar-img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+      }
+
+      .header-tag {
+        width: 72rpx;
+        height: 36rpx;
+        font-size: 24rpx;
+        line-height: nor;
+        background: linear-gradient(132deg, #f3dfb1, #f3dfb1, #ecbe60);
+        border-radius: 16rpx;
+        position: absolute;
+        left: 4rpx;
+        top: -36rpx;
+      }
+    }
+    .default-avatar {
+      width: 86rpx;
+      height: 86rpx;
+      background: #ececec;
+      border-radius: 50%;
+      .avatar-img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+      }
+    }
+
+    .user-avatar {
+      width: 86rpx;
+      height: 86rpx;
+      background: #ececec;
+      border-radius: 50%;
+    }
+  }
+  .order-btn {
+    width: 668rpx;
+    height: 70rpx;
+    border: 2rpx solid #dfdfdf;
+    border-radius: 35rpx;
+    color: #999999;
+    font-weight: 500;
+    font-size: 26rpx;
+    line-height: normal;
+  }
+
+  .disabled-btn {
+    width: 668rpx;
+    height: 70rpx;
+    background: #dddddd;
+    border-radius: 35rpx;
+    color: #999999;
+    font-weight: 500;
+    font-size: 28rpx;
+    line-height: normal;
+  }
+
+  .join-btn {
+    width: 668rpx;
+    height: 70rpx;
+    background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
+    box-shadow: 0px 8rpx 6rpx 0px rgba(255, 104, 4, 0.22);
+    border-radius: 35rpx;
+    color: #fff;
+    font-weight: 500;
+    font-size: 28rpx;
+    line-height: normal;
+  }
+
+  .detail-cell-wrap {
+    width: 100%;
+    padding: 10rpx 20rpx;
+    box-sizing: border-box;
+    border-top: 2rpx solid #dfdfdf;
+    background-color: #fff;
+    // min-height: 60rpx;
+
+    .label-text {
+      font-size: 28rpx;
+      font-weight: 400;
+    }
+
+    .cell-content {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: $dark-6;
+    }
+
+    .right-forwrad-icon {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: $dark-9;
+    }
+  }
+</style>
diff --git a/src/pages/activity/groupon/list.vue b/src/pages/activity/groupon/list.vue
new file mode 100644
index 00000000..0cd8bc97
--- /dev/null
+++ b/src/pages/activity/groupon/list.vue
@@ -0,0 +1,225 @@
+<!-- 拼团活动列表 -->
+<template>
+  <s-layout :bgStyle="{ color: '#FE832A' }" navbar="inner">
+    <view class="page-bg" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]" />
+    <view class="list-content">
+      <!-- 参团会员统计 -->
+      <view class="content-header ss-flex-col ss-col-center ss-row-center">
+        <view class="content-header-title ss-flex ss-row-center">
+          <view
+            v-for="(item, index) in state.summaryData.avatars"
+            :key="index"
+            class="picture"
+            :style="index === 6 ? 'position: relative' : 'position: static'"
+          >
+            <span class="avatar" :style="`background-image: url(${item})`" />
+            <span v-if="index === 6 && state.summaryData.avatars.length > 3" class="mengceng">
+              <i>···</i>
+            </span>
+          </view>
+          <text class="pic_count">{{ state.summaryData.userCount || 0 }}人参与</text>
+        </view>
+      </view>
+      <scroll-view
+        class="scroll-box"
+        :style="{ height: pageHeight + 'rpx' }"
+        scroll-y="true"
+        :scroll-with-animation="false"
+        :enable-back-to-top="true"
+      >
+        <view class="goods-box ss-m-b-20" v-for="item in state.pagination.list" :key="item.id">
+          <s-goods-column
+            class=""
+            size="lg"
+            :data="item"
+            :grouponTag="true"
+            @click="sheep.$router.go('/pages/goods/groupon', { id: item.id })"
+          >
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn">去拼团</button>
+            </template>
+          </s-goods-column>
+        </view>
+        <uni-load-more
+          v-if="state.pagination.total > 0"
+          :status="state.loadStatus"
+          :content-text="{
+            contentdown: '上拉加载更多',
+          }"
+          @tap="loadMore"
+        />
+      </scroll-view>
+    </view>
+  </s-layout>
+</template>
+<script setup>
+  import { reactive } from 'vue';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import CombinationApi from '@/sheep/api/promotion/combination';
+
+  const { safeAreaInsets, safeArea } = sheep.$platform.device;
+  const sysNavBar = sheep.$platform.navbar;
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const pageHeight =
+    (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sysNavBar - 350;
+  const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-header.png');
+
+  const state = reactive({
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 10,
+    },
+    loadStatus: '',
+    summaryData: {},
+  });
+
+  // 加载统计数据
+  const getSummary = async () => {
+    const { data } = await CombinationApi.getCombinationRecordSummary();
+    state.summaryData = data;
+  };
+
+  // 加载活动列表
+  async function getList() {
+    state.loadStatus = 'loading';
+    const { data } = await CombinationApi.getCombinationActivityPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+    });
+    data.list.forEach((activity) => {
+      state.pagination.list.push({ ...activity, price: activity.combinationPrice });
+    });
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => loadMore());
+
+  // 页面初始化
+  onLoad(() => {
+    getSummary();
+    getList();
+  });
+</script>
+<style lang="scss" scoped>
+  .page-bg {
+    width: 100%;
+    height: 458rpx;
+    margin-top: -88rpx;
+    background: v-bind(headerBg) no-repeat;
+    background-size: 100% 100%;
+  }
+  .list-content {
+    position: relative;
+    z-index: 3;
+    margin: -190rpx 20rpx 0 20rpx;
+    background: #fff;
+    border-radius: 20rpx 20rpx 0 0;
+    .content-header {
+      width: 100%;
+      border-radius: 20rpx 20rpx 0 0;
+      height: 100rpx;
+      background: linear-gradient(180deg, #fff4f7, #ffe4d1);
+      .content-header-title {
+        width: 100%;
+        font-size: 30rpx;
+        font-weight: 500;
+        color: #ff2923;
+        line-height: 30rpx;
+        position: relative;
+        .more {
+          position: absolute;
+          right: 30rpx;
+          top: 0;
+          font-size: 24rpx;
+          font-weight: 400;
+          color: #999999;
+          line-height: 30rpx;
+        }
+
+        .picture {
+          display: inline-table;
+        }
+
+        .avatar {
+          width: 38rpx;
+          height: 38rpx;
+          display: inline-table;
+          vertical-align: middle;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+          user-select: none;
+          border-radius: 50%;
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: 0 0;
+          margin-right: -10rpx;
+          box-shadow: 0 0 0 1px #fe832a;
+        }
+
+        .pic_count {
+          margin-left: 30rpx;
+          font-size: 22rpx;
+          font-weight: 500;
+          width: auto;
+          height: auto;
+          background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
+          color: #ffffff;
+          border-radius: 19rpx;
+          padding: 4rpx 14rpx;
+        }
+
+        .mengceng {
+          width: 40rpx;
+          height: 40rpx;
+          line-height: 36rpx;
+          background: rgba(51, 51, 51, 0.6);
+          text-align: center;
+          border-radius: 50%;
+          opacity: 1;
+          position: absolute;
+          left: -2rpx;
+          color: #fff;
+          top: 2rpx;
+          i {
+            font-style: normal;
+            font-size: 20rpx;
+          }
+        }
+      }
+    }
+    .scroll-box {
+      height: 900rpx;
+      .goods-box {
+        position: relative;
+        .cart-btn {
+          position: absolute;
+          bottom: 10rpx;
+          right: 20rpx;
+          z-index: 11;
+          height: 50rpx;
+          line-height: 50rpx;
+          padding: 0 20rpx;
+          border-radius: 25rpx;
+          font-size: 24rpx;
+          color: #fff;
+          background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/pages/activity/groupon/order.vue b/src/pages/activity/groupon/order.vue
new file mode 100644
index 00000000..a93cc6e0
--- /dev/null
+++ b/src/pages/activity/groupon/order.vue
@@ -0,0 +1,240 @@
+<!-- 我的拼团订单列表 -->
+<template>
+  <s-layout title="我的拼团">
+    <su-sticky bgColor="#fff">
+      <su-tabs
+        :list="tabMaps"
+        :scrollable="false"
+        @change="onTabsChange"
+        :current="state.currentTab"
+      ></su-tabs>
+    </su-sticky>
+    <s-empty v-if="state.pagination.total === 0" icon="/static/goods-empty.png" />
+    <view v-if="state.pagination.total > 0">
+      <view
+        class="order-list-card-box bg-white ss-r-10 ss-m-t-14 ss-m-20"
+        v-for="record in state.pagination.list"
+        :key="record.id"
+      >
+        <view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
+          <view class="order-no">拼团编号：{{ record.id }}</view>
+          <view class="ss-font-26" :class="formatOrderColor(record)">
+            {{ tabMaps.find((item) => item.value === record.status).name }}
+          </view>
+        </view>
+        <view class="border-bottom">
+          <s-goods-item
+            :img="record.picUrl"
+            :title="record.spuName"
+            :price="record.combinationPrice"
+          >
+            <template #groupon>
+              <view class="ss-flex">
+                <view class="sales-title"> {{ record.userSize }} 人团 </view>
+              </view>
+            </template>
+          </s-goods-item>
+        </view>
+        <view class="order-card-footer ss-flex ss-row-right ss-p-x-20">
+          <button
+            class="detail-btn ss-reset-button"
+            @tap="sheep.$router.go('/pages/order/detail', { id: record.orderId })"
+          >
+            订单详情
+          </button>
+          <button
+            class="tool-btn ss-reset-button"
+            :class="{ 'ui-BG-Main-Gradient': record.status === 0 }"
+            @tap="sheep.$router.go('/pages/activity/groupon/detail', { id: record.id })"
+          >
+            {{ record.status === 0 ? '邀请拼团' : '拼团详情' }}
+          </button>
+        </view>
+      </view>
+    </view>
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import _ from 'lodash-es';
+  import { formatOrderColor } from '@/sheep/hooks/useGoods';
+  import { resetPagination } from '@/sheep/helper/utils';
+  import CombinationApi from '@/sheep/api/promotion/combination';
+
+  // 数据
+  const state = reactive({
+    currentTab: 0,
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 5,
+    },
+    loadStatus: '',
+    deleteOrderId: 0,
+  });
+
+  const tabMaps = [
+    {
+      name: '全部',
+    },
+    {
+      name: '进行中',
+      value: 0,
+    },
+    {
+      name: '拼团成功',
+      value: 1,
+    },
+    {
+      name: '拼团失败',
+      value: 2,
+    },
+  ];
+
+  // 切换选项卡
+  function onTabsChange(e) {
+    resetPagination(state.pagination);
+    state.currentTab = e.index;
+    getGrouponList();
+  }
+
+  // 获取订单列表
+  async function getGrouponList() {
+    state.loadStatus = 'loading';
+    const { code, data } = await CombinationApi.getCombinationRecordPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      status: tabMaps[state.currentTab].value,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  onLoad((options) => {
+    if (options.type) {
+      state.currentTab = options.type;
+    }
+    getGrouponList();
+  });
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getGrouponList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+
+  //下拉刷新
+  onPullDownRefresh(() => {
+    resetPagination(state.pagination);
+    getGrouponList();
+    setTimeout(function () {
+      uni.stopPullDownRefresh();
+    }, 800);
+  });
+</script>
+
+<style lang="scss" scoped>
+  .swiper-box {
+    flex: 1;
+
+    .swiper-item {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  .order-list-card-box {
+    .order-card-header {
+      height: 80rpx;
+
+      .order-no {
+        font-size: 26rpx;
+        font-weight: 500;
+      }
+    }
+
+    .order-card-footer {
+      height: 100rpx;
+
+      .detail-btn {
+        width: 210rpx;
+        height: 66rpx;
+        border: 2rpx solid #dfdfdf;
+        border-radius: 33rpx;
+        font-size: 26rpx;
+        font-weight: 400;
+        color: #999999;
+        margin-right: 20rpx;
+      }
+      .tool-btn {
+        width: 210rpx;
+        height: 66rpx;
+        border-radius: 33rpx;
+        font-size: 26rpx;
+        font-weight: 400;
+        margin-right: 20rpx;
+        background: #f6f6f6;
+      }
+
+      .invite-btn {
+        width: 210rpx;
+        height: 66rpx;
+        background: linear-gradient(90deg, #fe832a, #ff6600);
+        box-shadow: 0px 8rpx 6rpx 0px rgba(255, 104, 4, 0.22);
+        border-radius: 33rpx;
+        color: #fff;
+        font-size: 26rpx;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .sales-title {
+    height: 32rpx;
+    background: rgba(#ffe0e2, 0.29);
+    border-radius: 16rpx;
+    font-size: 24rpx;
+    font-weight: 400;
+    padding: 6rpx 20rpx;
+    color: #f7979c;
+  }
+
+  .num-title {
+    font-size: 24rpx;
+    font-weight: 400;
+    color: #999999;
+  }
+  .warning-color {
+    color: #faad14;
+  }
+  .danger-color {
+    color: #ff3000;
+  }
+  .success-color {
+    color: #52c41a;
+  }
+</style>
diff --git a/src/pages/activity/index.vue b/src/pages/activity/index.vue
new file mode 100644
index 00000000..95739155
--- /dev/null
+++ b/src/pages/activity/index.vue
@@ -0,0 +1,214 @@
+<!-- 指定满减送的活动列表 -->
+<template>
+  <s-layout class="activity-wrap" :title="state.activityInfo.title">
+    <!-- 活动信息 -->
+    <su-sticky bgColor="#fff">
+      <view class="ss-flex ss-col-top tip-box">
+        <view class="type-text ss-flex ss-row-center">满减：</view>
+        <view class="ss-flex-1">
+          <view class="tip-content" v-for="item in state.activityInfo.rules" :key="item">
+            {{ item.description }}
+          </view>
+        </view>
+        <image class="activity-left-image" src="/static/activity-left.png" />
+        <image class="activity-right-image" src="/static/activity-right.png" />
+      </view>
+    </su-sticky>
+
+    <!-- 商品信息 -->
+    <view class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top">
+      <view class="goods-list-box">
+        <view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
+          <s-goods-column
+            class="goods-md-box"
+            size="md"
+            :data="item"
+            @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            @getHeight="mountMasonry($event, 'left')"
+          >
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn"> </button>
+            </template>
+          </s-goods-column>
+        </view>
+      </view>
+      <view class="goods-list-box">
+        <view class="right-list" v-for="item in state.rightGoodsList" :key="item.id">
+          <s-goods-column
+            class="goods-md-box"
+            size="md"
+            :data="item"
+            @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            @getHeight="mountMasonry($event, 'right')"
+          >
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn" />
+            </template>
+          </s-goods-column>
+        </view>
+      </view>
+    </view>
+
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+  </s-layout>
+</template>
+<script setup>
+  import { reactive } from 'vue';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import _ from 'lodash-es';
+  import RewardActivityApi from '@/sheep/api/promotion/rewardActivity';
+  import SpuApi from '@/sheep/api/product/spu';
+  import { appendSettlementProduct } from '@/sheep/hooks/useGoods';
+  import OrderApi from '@/sheep/api/trade/order';
+
+  const state = reactive({
+    activityId: 0, // 获得编号
+    activityInfo: {}, // 获得信息
+
+    pagination: {
+      list: [],
+      total: 1,
+      pageNo: 1,
+      pageSize: 8,
+    },
+    loadStatus: '',
+    leftGoodsList: [],
+    rightGoodsList: [],
+  });
+
+  // 加载瀑布流
+  let count = 0;
+  let leftHeight = 0;
+  let rightHeight = 0;
+
+  function mountMasonry(height = 0, where = 'left') {
+    if (!state.pagination.list[count]) return;
+
+    if (where === 'left') {
+      leftHeight += height;
+    } else {
+      rightHeight += height;
+    }
+    if (leftHeight <= rightHeight) {
+      state.leftGoodsList.push(state.pagination.list[count]);
+    } else {
+      state.rightGoodsList.push(state.pagination.list[count]);
+    }
+    count++;
+  }
+
+  // 加载商品信息
+  async function getList() {
+    // 处理拓展参数
+    const params = {};
+    if (state.activityInfo.productScope === 2) {
+      params.ids = state.activityInfo.productSpuIds.join(',');
+    } else if (state.activityInfo.productScope === 3) {
+      params.categoryIds = state.activityInfo.productSpuIds.join(',');
+    }
+    // 请求数据
+    state.loadStatus = 'loading';
+    const { code, data } = await SpuApi.getSpuPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      ...params,
+    });
+    if (code !== 0) {
+      return;
+    }
+    // 拼接结算信息（营销）
+    await OrderApi.getSettlementProduct(data.list.map((item) => item.id).join(',')).then((res) => {
+      if (res.code !== 0) {
+        return;
+      }
+      appendSettlementProduct(data.list, res.data);
+    });
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+    mountMasonry();
+  }
+
+  // 加载活动信息
+  async function getActivity(id) {
+    const { code, data } = await RewardActivityApi.getRewardActivity(id);
+    if (code === 0) {
+      state.activityInfo = data;
+    }
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+
+  onLoad(async (options) => {
+    state.activityId = options.activityId;
+    await getActivity(state.activityId);
+    await getList(state.activityId);
+  });
+</script>
+<style lang="scss" scoped>
+  .goods-list-box {
+    width: 50%;
+    box-sizing: border-box;
+    .left-list {
+      margin-right: 10rpx;
+      margin-bottom: 20rpx;
+    }
+    .right-list {
+      margin-left: 10rpx;
+      margin-bottom: 20rpx;
+    }
+  }
+  .tip-box {
+    background: #fff0e7;
+    padding: 20rpx;
+    width: 100%;
+    position: relative;
+    box-sizing: border-box;
+    .activity-left-image {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 58rpx;
+      height: 36rpx;
+    }
+    .activity-right-image {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 72rpx;
+      height: 50rpx;
+    }
+    .type-text {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ff6000;
+      line-height: 42rpx;
+    }
+    .tip-content {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ff6000;
+      line-height: 42rpx;
+    }
+  }
+</style>
diff --git a/src/pages/activity/point/list.vue b/src/pages/activity/point/list.vue
new file mode 100644
index 00000000..7630fd21
--- /dev/null
+++ b/src/pages/activity/point/list.vue
@@ -0,0 +1,76 @@
+<!-- 积分商城：商品列表  -->
+<template>
+  <s-layout title="积分商城" navbar="normal" :leftWidth="0" :rightWidth="0">
+    <scroll-view
+      class="scroll-box"
+      :style="{ height: pageHeight + 'rpx' }"
+      scroll-y="true"
+      :scroll-with-animation="false"
+      :enable-back-to-top="true"
+    >
+      <s-point-card ref="sPointCardRef" class="ss-p-x-20 ss-m-t-20" />
+      <s-empty
+        v-if="activityTotal === 0"
+        icon="/static/goods-empty.png"
+        text="暂无积分商品"
+      ></s-empty>
+      <uni-load-more
+        v-if="activityTotal > 0"
+        :status="loadStatus"
+        :content-text="{
+          contentdown: '上拉加载更多',
+        }"
+        @tap="loadMore"
+      />
+    </scroll-view>
+  </s-layout>
+</template>
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { reactive, ref } from 'vue';
+  import PointApi from '@/sheep/api/promotion/point';
+  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
+
+  // 计算页面高度
+  const { safeAreaInsets, safeArea } = sheep.$platform.device;
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const pageHeight =
+    (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
+
+  const sPointCardRef = ref();
+  // 查询活动列表
+  const activityPageParams = reactive({
+    pageNo: 1, // 页码
+    pageSize: 5, // 每页数量
+  });
+
+  const activityTotal = ref(0); // 活动总数
+  const activityCount = ref(0); // 已加载活动数量
+  const loadStatus = ref(''); // 页面加载状态
+  async function getActivityList() {
+    loadStatus.value = 'loading';
+    const { data } = await PointApi.getPointActivityPage(activityPageParams);
+    await sPointCardRef.value.concatActivity(data.list);
+    activityCount.value = sPointCardRef.value.getActivityCount();
+    activityTotal.value = data.total;
+
+    loadStatus.value = activityCount.value < activityTotal.value ? 'more' : 'noMore';
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (loadStatus.value !== 'noMore') {
+      activityPageParams.pageNo += 1;
+      getActivityList();
+    }
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+  onLoad(() => {
+    getActivityList();
+  });
+</script>
diff --git a/src/pages/activity/seckill/list.vue b/src/pages/activity/seckill/list.vue
new file mode 100644
index 00000000..16eca3b8
--- /dev/null
+++ b/src/pages/activity/seckill/list.vue
@@ -0,0 +1,460 @@
+<!-- 秒杀活动列表 -->
+<template>
+  <s-layout :bgStyle="{ color: 'rgb(245,28,19)' }" navbar="inner">
+    <!--顶部背景图-->
+    <view
+      class="page-bg"
+      :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"
+    ></view>
+    <!-- 时间段轮播图 -->
+    <view class="header" v-if="activeTimeConfig?.sliderPicUrls?.length > 0">
+      <swiper
+        indicator-dots="true"
+        autoplay="true"
+        :circular="true"
+        interval="3000"
+        duration="1500"
+        indicator-color="rgba(255,255,255,0.6)"
+        indicator-active-color="#fff"
+      >
+        <block v-for="(picUrl, index) in activeTimeConfig.sliderPicUrls" :key="index">
+          <swiper-item class="borRadius14">
+            <image :src="picUrl" class="slide-image borRadius14" lazy-load />
+          </swiper-item>
+        </block>
+      </swiper>
+    </view>
+    <!-- 时间段列表 -->
+    <view class="flex align-center justify-between ss-p-25">
+      <!-- 左侧图标 -->
+      <view class="time-icon">
+        <image
+          class="ss-w-100 ss-h-100"
+          :src="sheep.$url.static('/static/img/shop/priceTag.png')"
+        />
+      </view>
+      <scroll-view
+        class="time-list"
+        :scroll-into-view="activeTimeElId"
+        scroll-x
+        scroll-with-animation
+      >
+        <view
+          v-for="(config, index) in timeConfigList"
+          :key="index"
+          :class="['item', { active: activeTimeIndex === index }]"
+          :id="`timeItem${index}`"
+          @tap="handleChangeTimeConfig(index, config.id)"
+        >
+          <!-- 活动起始时间 -->
+          <view class="time">{{ config.startTime }}</view>
+          <!-- 活动状态 -->
+          <view class="status">{{ config?.status }}</view>
+        </view>
+      </scroll-view>
+    </view>
+
+    <!-- 内容区 -->
+    <view class="list-content">
+      <!-- 活动倒计时 -->
+      <view class="content-header ss-flex-col ss-col-center ss-row-center">
+        <view class="content-header-box ss-flex ss-row-center">
+          <view
+            class="countdown-box ss-flex"
+            v-if="activeTimeConfig?.status === TimeStatusEnum.STARTED"
+          >
+            <view class="countdown-title ss-m-r-12">距结束</view>
+            <view class="ss-flex countdown-time">
+              <view class="ss-flex countdown-h">{{ countDown.h }}</view>
+              <view class="ss-m-x-4">:</view>
+              <view class="countdown-num ss-flex ss-row-center">{{ countDown.m }}</view>
+              <view class="ss-m-x-4">:</view>
+              <view class="countdown-num ss-flex ss-row-center">{{ countDown.s }}</view>
+            </view>
+          </view>
+          <view v-else> {{ activeTimeConfig?.status }} </view>
+        </view>
+      </view>
+
+      <!-- 活动列表 -->
+      <scroll-view
+        class="scroll-box"
+        :style="{ height: pageHeight + 'rpx' }"
+        scroll-y="true"
+        :scroll-with-animation="false"
+        :enable-back-to-top="true"
+      >
+        <view class="goods-box ss-m-b-20" v-for="activity in activityList" :key="activity.id">
+          <s-goods-column
+            size="lg"
+            :data="{ ...activity, price: activity.seckillPrice }"
+            :goodsFields="goodsFields"
+            :seckillTag="true"
+          >
+            <!-- 抢购进度 -->
+            <template #activity>
+              <view class="limit">
+                限量
+                <text class="ss-m-l-5">{{ activity.stock }} {{ activity.unitName }}</text>
+              </view>
+              <su-progress :percentage="activity.percent" strokeWidth="10" textInside isAnimate />
+            </template>
+            <!-- 抢购按钮 -->
+            <template #cart>
+              <button
+                :class="[
+                  'ss-reset-button cart-btn',
+                  { disabled: activeTimeConfig?.status === TimeStatusEnum.END },
+                ]"
+                v-if="activeTimeConfig?.status === TimeStatusEnum.WAIT_START"
+              >
+                <span>未开始</span>
+              </button>
+              <button
+                :class="[
+                  'ss-reset-button cart-btn',
+                  { disabled: activeTimeConfig?.status === TimeStatusEnum.END },
+                ]"
+                @click="sheep.$router.go('/pages/goods/seckill', { id: activity.id })"
+                v-else-if="activeTimeConfig?.status === TimeStatusEnum.STARTED"
+              >
+                <span>马上抢</span>
+              </button>
+              <button
+                :class="[
+                  'ss-reset-button cart-btn',
+                  { disabled: activeTimeConfig?.status === TimeStatusEnum.END },
+                ]"
+                v-else
+              >
+                <span>已结束</span>
+              </button>
+            </template>
+          </s-goods-column>
+        </view>
+        <uni-load-more
+          v-if="activityTotal > 0"
+          :status="loadStatus"
+          :content-text="{
+            contentdown: '上拉加载更多',
+          }"
+          @tap="loadMore"
+        />
+      </scroll-view>
+    </view>
+  </s-layout>
+</template>
+<script setup>
+  import { computed, nextTick, reactive, ref } from 'vue';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import { useDurationTime } from '@/sheep/hooks/useGoods';
+  import SeckillApi from '@/sheep/api/promotion/seckill';
+  import dayjs from 'dayjs';
+  import { TimeStatusEnum } from '@/sheep/helper/const';
+
+  // 计算页面高度
+  const { safeAreaInsets, safeArea } = sheep.$platform.device;
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const pageHeight =
+    (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
+  const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-header.png');
+
+  // 商品控件显示的字段（不显示库存、销量。改为显示自定义的进度条）
+  const goodsFields = {
+    name: {
+      show: true,
+    },
+    introduction: {
+      show: true,
+    },
+    price: {
+      show: true,
+    },
+    marketPrice: {
+      show: true,
+    },
+  };
+
+  //#region 时间段
+  // 时间段列表
+  const timeConfigList = ref([]);
+  // 查询时间段
+  const getSeckillConfigList = async () => {
+    const { data } = await SeckillApi.getSeckillConfigList();
+    const now = dayjs();
+    const today = now.format('YYYY-MM-DD');
+    const select = ref([]);
+    // 判断时间段的状态
+    data.forEach((config, index) => {
+      const startTime = dayjs(`${today} ${config.startTime}`);
+      const endTime = dayjs(`${today} ${config.endTime}`);
+      select.value[index] = config.id;
+      if (now.isBefore(startTime)) {
+        config.status = TimeStatusEnum.WAIT_START;
+      } else if (now.isAfter(endTime)) {
+        config.status = TimeStatusEnum.END;
+      } else {
+        config.status = TimeStatusEnum.STARTED;
+        activeTimeIndex.value = index;
+      }
+    });
+    timeConfigList.value = data;
+    // 默认选中进行中的活动
+    handleChangeTimeConfig(activeTimeIndex.value, select.value[activeTimeIndex.value]);
+    // 滚动到进行中的时间段
+    scrollToTimeConfig(activeTimeIndex.value);
+  };
+
+  // 滚动到指定时间段
+  const activeTimeElId = ref(''); // 当前选中的时间段的元素ID
+  const scrollToTimeConfig = (index) => {
+    nextTick(() => (activeTimeElId.value = `timeItem${index}`));
+  };
+
+  // 切换时间段
+  const activeTimeIndex = ref(0); // 当前选中的时间段的索引
+  const activeTimeConfig = computed(() => timeConfigList.value[activeTimeIndex.value]); // 当前选中的时间段
+  const handleChangeTimeConfig = (index, id) => {
+    activeTimeIndex.value = index;
+
+    // 查询活动列表
+    activityPageParams.pageNo = 1;
+    activityPageParams.configId = id;
+    activityList.value = [];
+    getActivityList();
+  };
+
+  // 倒计时
+  const countDown = computed(() => {
+    const endTime = activeTimeConfig.value?.endTime;
+    if (endTime) {
+      return useDurationTime(`${dayjs().format('YYYY-MM-DD')} ${endTime}`);
+    }
+  });
+
+  //#endregion
+
+  //#region 分页查询活动列表
+
+  // 查询活动列表
+  const activityPageParams = reactive({
+    configId: 0, // 时间段 ID
+    pageNo: 1, // 页码
+    pageSize: 5, // 每页数量
+  });
+  const activityTotal = ref(0); // 活动总数
+  const activityList = ref([]); // 活动列表
+  const loadStatus = ref(''); // 页面加载状态
+  async function getActivityList() {
+    loadStatus.value = 'loading';
+    const { data } = await SeckillApi.getSeckillActivityPage(activityPageParams);
+    data.list.forEach((activity) => {
+      // 计算抢购进度
+      activity.percent = parseInt(
+        (100 * (activity.totalStock - activity.stock)) / activity.totalStock,
+      );
+    });
+    activityList.value = activityList.value.concat(...data.list);
+    activityTotal.value = data.total;
+
+    loadStatus.value = activityList.value.length < activityTotal.value ? 'more' : 'noMore';
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (loadStatus.value !== 'noMore') {
+      activityPageParams.pageNo += 1;
+      getActivityList();
+    }
+  }
+  // 上拉加载更多
+  onReachBottom(() => loadMore());
+
+  //#endregion
+
+  // 页面初始化
+  onLoad(async () => {
+    await getSeckillConfigList();
+  });
+</script>
+<style lang="scss" scoped>
+  // 顶部背景图
+  .page-bg {
+    width: 100%;
+    height: 458rpx;
+    background: v-bind(headerBg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  // 时间段轮播图
+  .header {
+    width: 710rpx;
+    height: 330rpx;
+    margin: -276rpx auto 0 auto;
+    border-radius: 14rpx;
+    overflow: hidden;
+
+    swiper {
+      height: 330rpx !important;
+      border-radius: 14rpx;
+      overflow: hidden;
+    }
+
+    image {
+      width: 100%;
+      height: 100%;
+      border-radius: 14rpx;
+      overflow: hidden;
+
+      img {
+        border-radius: 14rpx;
+      }
+    }
+  }
+
+  // 时间段列表：左侧图标
+  .time-icon {
+    width: 75rpx;
+    height: 70rpx;
+  }
+
+  // 时间段列表
+  .time-list {
+    width: 596rpx;
+    white-space: nowrap;
+
+    // 时间段
+    .item {
+      display: inline-block;
+      font-size: 20rpx;
+      color: #666;
+      text-align: center;
+      box-sizing: border-box;
+      margin-right: 30rpx;
+      width: 130rpx;
+
+      // 开始时间
+      .time {
+        font-size: 36rpx;
+        font-weight: 600;
+        color: #333;
+      }
+
+      // 选中的时间段
+      &.active {
+        .time {
+          color: var(--ui-BG-Main);
+        }
+
+        // 状态
+        .status {
+          height: 30rpx;
+          line-height: 30rpx;
+          border-radius: 15rpx;
+          width: 128rpx;
+          background: linear-gradient(90deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  // 内容区
+  .list-content {
+    position: relative;
+    z-index: 3;
+    margin: 0 20rpx 0 20rpx;
+    background: #fff;
+    border-radius: 20rpx 20rpx 0 0;
+
+    .content-header {
+      width: 100%;
+      border-radius: 20rpx 20rpx 0 0;
+      height: 150rpx;
+      background: linear-gradient(180deg, #fff4f7, #ffe6ec);
+
+      .content-header-box {
+        width: 678rpx;
+        height: 64rpx;
+        background: rgba($color: #fff, $alpha: 0.66);
+        border-radius: 32px;
+
+        // 场次倒计时内容
+        .countdown-title {
+          font-size: 28rpx;
+          font-weight: 500;
+          color: #333333;
+          line-height: 28rpx;
+        }
+
+        // 场次倒计时
+        .countdown-time {
+          font-size: 28rpx;
+          color: rgba(#ed3c30, 0.23);
+
+          // 场次倒计时：小时部分
+          .countdown-h {
+            font-size: 24rpx;
+            font-family: OPPOSANS;
+            font-weight: 500;
+            color: #ffffff;
+            padding: 0 4rpx;
+            height: 40rpx;
+            background: rgba(#ed3c30, 0.23);
+            border-radius: 6rpx;
+          }
+
+          // 场次倒计时：分钟、秒
+          .countdown-num {
+            font-size: 24rpx;
+            font-family: OPPOSANS;
+            font-weight: 500;
+            color: #ffffff;
+            width: 40rpx;
+            height: 40rpx;
+            background: rgba(#ed3c30, 0.23);
+            border-radius: 6rpx;
+          }
+        }
+      }
+    }
+
+    // 活动列表
+    .scroll-box {
+      height: 900rpx;
+
+      // 活动
+      .goods-box {
+        position: relative;
+
+        // 抢购按钮
+        .cart-btn {
+          position: absolute;
+          bottom: 10rpx;
+          right: 20rpx;
+          z-index: 11;
+          height: 44rpx;
+          line-height: 50rpx;
+          padding: 0 20rpx;
+          border-radius: 25rpx;
+          font-size: 24rpx;
+          color: #fff;
+          background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
+
+          &.disabled {
+            background: $gray-b;
+            color: #fff;
+          }
+        }
+
+        // 秒杀限量商品数
+        .limit {
+          font-size: 22rpx;
+          color: $dark-9;
+          margin-bottom: 5rpx;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/pages/app/sign.vue b/src/pages/app/sign.vue
new file mode 100644
index 00000000..e0263741
--- /dev/null
+++ b/src/pages/app/sign.vue
@@ -0,0 +1,452 @@
+<!-- 签到界面  -->
+<template>
+  <s-layout title="签到有礼">
+    <s-empty v-if="state.loading" icon="/static/data-empty.png" text="签到活动还未开始" />
+    <view v-if="state.loading" />
+    <view class="sign-wrap" v-else-if="!state.loading">
+      <!-- 签到日历 -->
+      <view class="content-box calendar">
+        <view class="sign-everyday ss-flex ss-col-center ss-row-between ss-p-x-30">
+          <text class="sign-everyday-title">签到日历</text>
+          <view class="sign-num-box">
+            已连续签到 <text class="sign-num">{{ state.signInfo.continuousDay }}</text> 天
+          </view>
+        </view>
+        <view
+          class="list acea-row row-between-wrapper"
+          style="
+            padding: 0 30rpx;
+            height: 240rpx;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          "
+        >
+          <view class="item" v-for="(item, index) in state.signConfigList" :key="index">
+            <view
+              :class="
+                (index === state.signConfigList.length ? 'reward' : '') +
+                ' ' +
+                (state.signInfo.continuousDay >= item.day ? 'rewardTxt' : '')
+              "
+            >
+              第{{ item.day }}天
+            </view>
+            <view
+              class="venus"
+              :class="
+                (index + 1 === state.signConfigList.length ? 'reward' : '') +
+                ' ' +
+                (state.signInfo.continuousDay >= item.day ? 'venusSelect' : '')
+              "
+            >
+            </view>
+            <view class="num" :class="state.signInfo.continuousDay >= item.day ? 'on' : ''">
+              + {{ item.point }}
+            </view>
+          </view>
+        </view>
+
+        <!-- 签到按钮 -->
+        <view class="myDateTable">
+          <view class="ss-flex ss-col-center ss-row-center sign-box ss-m-y-40">
+            <button
+              class="ss-reset-button sign-btn"
+              v-if="!state.signInfo.todaySignIn"
+              @tap="onSign"
+            >
+              签到
+            </button>
+            <button class="ss-reset-button already-btn" v-else disabled> 已签到 </button>
+          </view>
+        </view>
+      </view>
+
+      <!-- 签到说明 -->
+      <view class="bg-white ss-m-t-16 ss-p-t-30 ss-p-b-60 ss-p-x-40">
+        <view class="activity-title ss-m-b-30">签到说明</view>
+        <view class="activity-des">1.已累计签到{{ state.signInfo.totalDay }}天</view>
+        <view class="activity-des">
+          2.据说连续签到第 {{ state.maxDay }} 天可获得超额积分，要坚持签到哦~~
+        </view>
+        <view class="activity-des"> 3.积分可以在购物时抵现金结算的哦 ~~</view>
+      </view>
+    </view>
+
+    <!-- 签到结果弹窗 -->
+    <su-popup :show="state.showModel" type="center" round="10" :isMaskClick="false">
+      <view class="model-box ss-flex-col">
+        <view class="ss-m-t-56 ss-flex-col ss-col-center">
+          <text class="cicon-check-round"></text>
+          <view class="score-title">
+            <text v-if="state.signResult.point">{{ state.signResult.point }} 积分 </text>
+            <text v-if="state.signResult.experience"> {{ state.signResult.experience }} 经验</text>
+          </view>
+          <view class="model-title ss-flex ss-col-center ss-m-t-22 ss-m-b-30">
+            已连续打卡 {{ state.signResult.day }} 天
+          </view>
+        </view>
+        <view class="model-bg ss-flex-col ss-col-center ss-row-right">
+          <view class="title ss-m-b-64">签到成功</view>
+          <view class="ss-m-b-40">
+            <button class="ss-reset-button confirm-btn" @tap="onConfirm">确认</button>
+          </view>
+        </view>
+      </view>
+    </su-popup>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onReady } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import SignInApi from '@/sheep/api/member/signin';
+
+  const headerBg = sheep.$url.css('/static/img/shop/app/sign.png');
+
+  const state = reactive({
+    loading: true,
+
+    signInfo: {}, // 签到信息
+
+    signConfigList: [], // 签到配置列表
+    maxDay: 0, // 最大的签到天数
+
+    showModel: false, // 签到弹框
+    signResult: {}, // 签到结果
+  });
+
+  // 发起签到
+  async function onSign() {
+    const { code, data } = await SignInApi.createSignInRecord();
+    if (code !== 0) {
+      return;
+    }
+    state.showModel = true;
+    state.signResult = data;
+    // 重新获得签到信息
+    await getSignInfo();
+  }
+
+  // 签到确认刷新页面
+  function onConfirm() {
+    state.showModel = false;
+  }
+
+  // 获得个人签到统计
+  async function getSignInfo() {
+    const { code, data } = await SignInApi.getSignInRecordSummary();
+    if (code !== 0) {
+      return;
+    }
+    state.signInfo = data;
+    state.loading = false;
+  }
+
+  // 获取签到配置
+  async function getSignConfigList() {
+    const { code, data } = await SignInApi.getSignInConfigList();
+    if (code !== 0) {
+      return;
+    }
+    state.signConfigList = data;
+    if (data.length > 0) {
+      state.maxDay = data[data.length - 1].day;
+    }
+  }
+
+  onReady(() => {
+    getSignInfo();
+    getSignConfigList();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .header-box {
+    border-top: 2rpx solid rgba(#dfdfdf, 0.5);
+  }
+
+  // 日历
+  .calendar {
+    background: #fff;
+
+    .sign-everyday {
+      height: 100rpx;
+      background: rgba(255, 255, 255, 1);
+      border: 2rpx solid rgba(223, 223, 223, 0.4);
+
+      .sign-everyday-title {
+        font-size: 32rpx;
+        color: rgba(51, 51, 51, 1);
+        font-weight: 500;
+      }
+
+      .sign-num-box {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: rgba(153, 153, 153, 1);
+
+        .sign-num {
+          font-size: 30rpx;
+          font-weight: 600;
+          color: #ff6000;
+          padding: 0 10rpx;
+          font-family: OPPOSANS;
+        }
+      }
+    }
+
+    // 年月日
+    .bar {
+      height: 100rpx;
+
+      .date {
+        font-size: 30rpx;
+        font-family: OPPOSANS;
+        font-weight: 500;
+        color: #333333;
+        line-height: normal;
+      }
+    }
+
+    .cicon-back {
+      margin-top: 6rpx;
+      font-size: 30rpx;
+      color: #c4c4c4;
+      line-height: normal;
+    }
+
+    .cicon-forward {
+      margin-top: 6rpx;
+      font-size: 30rpx;
+      color: #c4c4c4;
+      line-height: normal;
+    }
+
+    // 星期
+    .week {
+      .week-item {
+        font-size: 24rpx;
+        font-weight: 500;
+        color: rgba(153, 153, 153, 1);
+        flex: 1;
+      }
+    }
+
+    // 日历表
+    .myDateTable {
+      display: flex;
+      flex-wrap: wrap;
+
+      .dateCell {
+        width: calc(750rpx / 7);
+        height: 80rpx;
+        font-size: 26rpx;
+        font-weight: 400;
+        color: rgba(51, 51, 51, 1);
+      }
+    }
+  }
+
+  .is-sign {
+    width: 48rpx;
+    height: 48rpx;
+    position: relative;
+
+    .is-sign-num {
+      font-size: 24rpx;
+      font-family: OPPOSANS;
+      font-weight: 500;
+      line-height: normal;
+    }
+
+    .is-sign-image {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 48rpx;
+      height: 48rpx;
+    }
+  }
+
+  .cell-num {
+    font-size: 24rpx;
+    font-family: OPPOSANS;
+    font-weight: 500;
+    color: #333333;
+    line-height: normal;
+  }
+
+  .cicon-title {
+    position: absolute;
+    right: -10rpx;
+    top: -6rpx;
+    font-size: 20rpx;
+    color: red;
+  }
+
+  // 签到按钮
+  .sign-box {
+    height: 140rpx;
+    width: 100%;
+
+    .sign-btn {
+      width: 710rpx;
+      height: 80rpx;
+      border-radius: 35rpx;
+      font-size: 30rpx;
+      font-weight: 500;
+      box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
+      background: linear-gradient(90deg, #ff6000, #fe832a);
+      color: #fff;
+    }
+
+    .already-btn {
+      width: 710rpx;
+      height: 80rpx;
+      border-radius: 35rpx;
+      font-size: 30rpx;
+      font-weight: 500;
+    }
+  }
+
+  .model-box {
+    width: 520rpx;
+    // height: 590rpx;
+    background: linear-gradient(177deg, #ff6000 0%, #fe832a 100%);
+    // background: linear-gradient(177deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    border-radius: 10rpx;
+
+    .cicon-check-round {
+      font-size: 70rpx;
+      color: #fff;
+    }
+
+    .score-title {
+      font-size: 34rpx;
+      font-family: OPPOSANS;
+      font-weight: 500;
+      color: #fcff00;
+    }
+
+    .model-title {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #ffffff;
+    }
+
+    .model-bg {
+      width: 520rpx;
+      height: 344rpx;
+      background-size: 100% 100%;
+      background-image: v-bind(headerBg);
+      background-repeat: no-repeat;
+      border-radius: 0 0 10rpx 10rpx;
+
+      .title {
+        font-size: 34rpx;
+        font-weight: bold;
+        color: var(--ui-BG-Main-TC);
+      }
+
+      .subtitle {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #999999;
+      }
+
+      .cancel-btn {
+        width: 220rpx;
+        height: 70rpx;
+        border: 2rpx solid #ff6000;
+        border-radius: 35rpx;
+        font-size: 28rpx;
+        font-weight: 500;
+        color: #ff6000;
+        line-height: normal;
+        margin-right: 10rpx;
+      }
+
+      .confirm-btn {
+        width: 220rpx;
+        height: 70rpx;
+        background: linear-gradient(90deg, #ff6000, #fe832a);
+        box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
+        border-radius: 35rpx;
+        font-size: 28rpx;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: normal;
+      }
+    }
+  }
+
+  //签到说明
+  .activity-title {
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #333333;
+    line-height: normal;
+  }
+
+  .activity-des {
+    font-size: 26rpx;
+    font-weight: 500;
+    color: #666666;
+    line-height: 40rpx;
+  }
+
+  .reward {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAA4CAYAAAC1+AWFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowYWFmYjU3Mi03MGJhLTRiNDctOTI2Yi0zOThlZDkzZDkxMDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUEyNzZEMjZEMDFCMTFFOEIzQzhEMjMxNjI1NENDQjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUEyNzZEMjVEMDFCMTFFOEIzQzhEMjMxNjI1NENDQjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZmRjNTM0MmUtNmFkOC1iMDRhLThjZTEtMjk2YWYzM2FkMmUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBhYWZiNTcyLTcwYmEtNGI0Ny05MjZiLTM5OGVkOTNkOTEwOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGQ9m8AAAf3SURBVHja7Jxbb9xEFMe9Xu81u6VJL0kqSCToZ0CCNyp4CQ0FqVAkQAgeEE98EPgEwBOCSoCEQPTCG30BVSpfAaQ2KQ1tc4Fm77v2cv7jmc3UGdvjsTdrJEY68m527Zn5zZlzszeF8XhspWl37/xhZdwK/Di2jqA9ufqM9ndtKz+tTvIpSYdkl7+u52h8lpMjUFdIzvH3VZIPSM6SrHOAM292DkHJ7Rz/rP4/rGhQuQNm5xxUroAVNm//PhUnQ7JEco9LGlBy+znGhsX1O1vNajYbjwm1F0l+JfmN5BeSlwKfx4KybTtWw6TriXao39xpFga8v98q08tPSN7Dn0yvVSqVrEqlbBUKBQvxX78/sIbDoenlxhzs6ySDPNmsj0k+SguqWq0wUGwV6Yj35XIpTXD7Csk3eTPw76c5GUAARtUqlVTA0C5wOzd7WLQF19JoFEAASFRLCQwa9hXJ2rQj+GdJ3sCcQj4vkrw7TVAyMLTBwMiGHSP5luQLEjfkO0O+ZW+ZGPjnuIE8YQoDEyyVnIkdmmaDQxgOR+QU+mku85DkZe5RE23D19KCguYcBSjhEHxNLStBarZTJBdNtuGcqlNVx6q4CBo1iwavipDjsUk6Rdq+I0u1brZdkKpCrDVMYLlBUMVikQ0mGM4EBydWeiYpiaLfWq1GwEbKUAwQPc+Vz3NTlWgEqHq9xo7BpoKVpwbNDwtNbHto9XpdAjaOXWBtWNhWAOV53lQnBiPdarWs+fnjmRr/MLtVLjvUp2O57tCK2wwJ4qxCyECyhXX//n3r3tZWxp4yel4+pPiJRMHydAbR7XYzm5Trutbu3p41pFjq0aNHmV0XY0ywqJ4JrIoOKEwwq7a9s2M5RYe5/+3tnUwXIQGwSlJYyKfeMgVlkprAFu7t/c3OLZfLLLhst9vGmUEKYG/x+WvBQgT7ZTDfE8ZPB5RuCiO33d095o0cx2HhCeThw+1UAbEusIAXbPL5r8XBWuf5UVP2JNgWGLzrelMBhT72yFaVCFSRBK6+SNux1+sxmSYwaDQ0GfOTPGaTc1gPyw2R3nwdTJoRMiCow4U6HXNQKOJ1uz0KAvssGR4MBuw4Gg2ZHyqX/O0HzRKTwHcQw/mhCwLisj8x9EVH9FetViOhYTurkm+EQZgXlAqahf4wvtFoJGsaAshLJD/IcdYaJ1mSV9uvM/mD6fX6oaAANE6jcO6dOxtsUEVKP+yCzVINaJJDAwckTEAu/mG1cRyNXBZlQ8vanY7lkYa77shaWVmJhYVxiSQ7OB6ARLCKz6HNtVqVaR364+Mocy6vkvwEzUKR/6blF/snoDB4ROyixLu/3wodUKMxp5XeQLs2NzdZtGwXAazABolzZZHH4SGgJMCAjF0CaJClpSWr2Wxqb/NWS+0s5Dq+r2Eu30GePJZNkuehWSsyKFmrsPKYWFwqoZsHQlNWV1etra2/2ORlUGF5XhGLxaFiXK5XsM6cXmZbKEm+iPOD2UewXz+tI013SqRdfTmifwqMYOA3SO7GlTUOJ9AHBjLJwyXYamfOLDO7k+Q88c3lpcVEoCYaqkjThH3USI3AZ8PmLz7klcIJcRhFWRWx91VJtDCiSRPbpcVFZqy9iLxNngBGsUigTLytanyYS/Bavn0cMacjadWQ87knQodr3OoPxEm+i+2xFfG3il/qUAEzqVDimsePP0HG2o2EJbRibq7OPKYJqKBxlz2hvIAHc55UIIQ3vBaMs77nVcK2TBkns5WNAQZNTAoM13Y1qhjCrZuACoYNKlAHc+1OlINzuMi5KIPSK5xkS1wEHgzeQUfDkgLr9roJwHanBgoaFfCALc7hSly6A5V7h2RfqCc6hSofxEDZAOt1+4e2GzTN46/F9hQrr5u0q0AdhEKHzQGCXym22ufzv6abSCNivRzMC4O5ol+udZTA9Ap9AxZrjflWw7VOnzrJPF61WmNwvIkJsLW1K9g/dod4LCDchk5eXhYRe5JKaax6IA7DILDqJvZEBJ0O+br5hXlmxEU7eXKBJt2gnPEf2iIdNhlkEY1Gw6D6Opgshka40jcpK8dWUYXhN2mwEdCWEwsL1rFjTeV1EFosLp5ixv3BgwcMmsndueXlZV9L9UridqoafFwIYNKQ0509+3TU40WThpxtdXWFwzKrwWdxtykBrPFkb2dRdweApK1erxvDCltoP2IPv8eQGJbwiOK+4YxuCabS/jDNQgkINldDwSNhFVWBIaDJ/YatWlaqn4UWAYbqoTh8FZ8Fxlo0gdUOrg6LgxSxjsruIC5L+VyVUVNBYZmCMkYrMI0KLGrLxOMhzN9RlTqCEhUYjsfjI9MoPyAeKNMl1bgVzzmg6P+diWbd5BXUS3IFVbFV8XzWXBiwqGg+ac0+rESs6bGxU1I9nxVn4G9FnSylR1e13ElIpK0DzBQUb0hh3iS5nkZ7s3i0+zqHZdR0csmUoJBevJ0WVCaweLuYZjBRwFKC8jioH7OYZCawSLsGJLg5i/tswWwX79fp8wKE27cbKmDI/YRDwBHvFaBw7px0vUJEvxesHD7aLaBd5QPc4H+6jff87+I7yFnOq4DB7eMuTLvdYbfuFWEAzjnPryE3Zb9pzIPSUUzxtzvLJH9a4b+hqfPJvKB5zRsccidlv+awZvyzX11gOqDMVvU/9LPf0C15FKBmarOmACw3oPICSwb2OQlu4+Cxv8/yBCoPNitsAcdWDv9Vwb8CDACdCFE+P8dk8gAAAABJRU5ErkJggg==');
+    width: 75rpx;
+    height: 56rpx;
+  }
+
+  .rewardTxt {
+    width: 74rpx;
+    height: 32rpx;
+    background-color: #f4b409;
+    border-radius: 16rpx;
+    font-size: 20rpx;
+    color: var(--ui-BG-Main-TC);
+    line-height: 32rpx;
+    text-align: center;
+    padding: 2rpx;
+  }
+
+  .venus {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowYWFmYjU3Mi03MGJhLTRiNDctOTI2Yi0zOThlZDkzZDkxMDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDQ3N0E3RkJEMDFCMTFFODhGODVBOTc1NEM5Nzg2NzkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDQ3N0E3RkFEMDFCMTFFODhGODVBOTc1NEM5Nzg2NzkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZmRjNTM0MmUtNmFkOC1iMDRhLThjZTEtMjk2YWYzM2FkMmUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBhYWZiNTcyLTcwYmEtNGI0Ny05MjZiLTM5OGVkOTNkOTEwOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnZClGIAAAT7SURBVHja7JtLcxtFEMdnn1rJUhIrTiS7KLsK/EXwNck3gCMcuUFx4QvACW48buHGMZxJPkiowpjC2LElcKzXSqul/6OdoOB9zezsCCimqmvXtdqd+U33dPf0rq2Tn54zg81KjrGuB75x8FbuddsQWIvkS5IxySA5b5no2DUE94TkKPk7IHmf5JDkUQJdW7MNw623o+Ra698KmAdnDNLeIJwRSHvDcLVDVnYynU771fnLl9eFcLZts+VymQf5iJ6pzfFYJeKgT/IZyTskXdWOPM9jjYbPLMticRyz2Sxk8/lc9XFDksckH1IcDKtq8FOSD6rMIuCCoPHXrBIk/qYDC0MlyO1kTBOSj6uuwXerwPn+63DrrdFo8OsV2ns6nEy3Chwg8lpFyK4OwNrgNGpSvxfFoDzP5etJR8PzsiYETmk+X5BjmpkBrHPGU109TeKqv5X3rT3QQ3ObaPDGRjIZXWZpol+b/cebUUA4iuHw938UoNbk9+zsjP16eqoV4JfjH1uqgLjxe10DiaKIDYZDNqfU7OrqSifjkzxIuwDubV2juLi8ZK7j8oT74uJSJ+BRHqQtC6cS/7A9wtrDvb7v84A9Go2UMyQZSFsWrmz6td4GgyF38a7r8lgGefHiQjnjkYG064ZDmjWktecRnEOCDa9DpjqdTrnUDSk2vJXgsHGdTKa0t5vx/V0Yhvy4WMx5hdf3VqYJDQqTxW+QdmECPM8h8flvPPRFR/QXBEEuKEw9Yz/5AyoDtBkei5zriyw4pGVFmoOHPD7+mQ/ccR1mWzZpyuIacx2Hgzl0FJkIjjBTHBeLiO6LuDZH4zFbRkt63oLt7+8XAmJcIhFP0eTn2C9CgzBTrPjUp7XbW6VSJGjx5OSEBhsz2wGkxc0R967LuukuSWKaFEwMnXJQSL/fZ51Op/QSuL5OdVjY7beFBq2sAlHZ/A8aOTg4YKenv/EBr8Nl5ZUO6jPJRGCg0dJie/d3WbPZlMpPMwpZsN0Y2sOVb7PcOzou22CGe3u7fB3J3Cd+udvvScG9soT0Kt13tAZj4UVRwHmWtZClcj+azX6vxx0GN8ECUFyHjnsEp+KlM8b3TBTKBCDqkA/SIFV20jCbO3duk8OIcgHF7G9ttbinVYFLcTBgeAAP+vc4mAkJVywLibARpZvOjWWA36rApYSI1+DSMhltkJPpRGIyJrXAZeWiWiCnk9kNU4RGl8m5MN1VLFzwWKobLm83kQtZbnMb8lgYJ2aIYH//3g73lEHQ5ECAXYUSu7QWZeCKqmoCcqSyPkQgd8lHbne3uSMRbWenSwNtU476BxtT9oJQOZ3OKKloq6SmmXBlyoZKb3nG4wnXyt1ul9261UkN9ggjvd497mDOz885KGN3pfvKg1OuixY15JCHh2/ymFjUms2AMqD9BFB/qwUQg5ZtrVY9b7H/LxtmZSCbaCr9KgGmpEeG6qpzM2tQBHudb5eKNLfKiUMzgAIyL6uRreHklB9qX4MDlQfLpHUV4AY6AB+rzl4ZyIqa+0aHiX6UlDTwMcK2CqQoEGmEE5+RfFK4N636vWjKh0Cp5ceS38k8JXko8yHQ7W7PXKBPBvYwGegNF4/q12g05mV7HXClqgs1ffEr+/LmaTIx0nCb+uI3U5M64Tadi5aBrBXORLKdB1k7nKndhID8GqUaErze/coEXJ1OJm9CY2bw3wr+FGAAoa6PIUihovYAAAAASUVORK5CYII=');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 56rpx;
+    height: 56rpx;
+    margin: 10rpx auto;
+  }
+
+  .venusSelect {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowYWFmYjU3Mi03MGJhLTRiNDctOTI2Yi0zOThlZDkzZDkxMDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzkwRkI4NEFEMDFCMTFFODhDNDdBMDVGOTBBN0U2NTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzkwRkI4NDlEMDFCMTFFODhDNDdBMDVGOTBBN0U2NTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZmRjNTM0MmUtNmFkOC1iMDRhLThjZTEtMjk2YWYzM2FkMmUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBhYWZiNTcyLTcwYmEtNGI0Ny05MjZiLTM5OGVkOTNkOTEwOSIv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');
+  }
+
+  .num {
+    font-size: 36rpx;
+    font-family: 'Guildford Pro';
+  }
+
+  .item {
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 130rpx;
+  }
+
+  .reward {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAA4CAYAAAC1+AWFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowYWFmYjU3Mi03MGJhLTRiNDctOTI2Yi0zOThlZDkzZDkxMDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUEyNzZEMjZEMDFCMTFFOEIzQzhEMjMxNjI1NENDQjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUEyNzZEMjVEMDFCMTFFOEIzQzhEMjMxNjI1NENDQjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZmRjNTM0MmUtNmFkOC1iMDRhLThjZTEtMjk2YWYzM2FkMmUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBhYWZiNTcyLTcwYmEtNGI0Ny05MjZiLTM5OGVkOTNkOTEwOSIv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');
+    width: 75rpx;
+    height: 56rpx;
+  }
+
+  .on {
+    color: #f4b409;
+  }
+</style>
diff --git a/src/pages/chat/components/goods.vue b/src/pages/chat/components/goods.vue
new file mode 100644
index 00000000..eabdd218
--- /dev/null
+++ b/src/pages/chat/components/goods.vue
@@ -0,0 +1,21 @@
+<template>
+  <s-goods-item
+    :title="goodsData.spuName"
+    :img="goodsData.picUrl"
+    :price="goodsData.price"
+    :skuText="goodsData.introduction"
+    priceColor="#FF3000"
+    :titleWidth="400"
+  />
+</template>
+
+<script setup>
+
+  const props = defineProps({
+    goodsData: {
+      type: Object,
+      default: {},
+    },
+  });
+</script>
+
diff --git a/src/pages/chat/components/messageInput.vue b/src/pages/chat/components/messageInput.vue
new file mode 100644
index 00000000..1c7be68d
--- /dev/null
+++ b/src/pages/chat/components/messageInput.vue
@@ -0,0 +1,110 @@
+<template>
+  <view class="send-wrap ss-flex">
+    <view class="left ss-flex ss-flex-1">
+      <optimize-input
+        class="ss-flex-1 ss-p-l-22"
+        :inputBorder="false"
+        :clearable="false"
+        v-model="message"
+        placeholder="请输入你要咨询的问题"
+      ></optimize-input>
+    </view>
+    <text class="sicon-basic bq" @tap.stop="onTools('emoji')"></text>
+    <text
+      v-if="!message"
+      class="sicon-edit"
+      :class="{ 'is-active': toolsMode === 'tools' }"
+      @tap.stop="onTools('tools')"
+    />
+    <button
+      v-if="message"
+      class="ss-reset-button send-btn"
+      @tap="sendMessage"
+      :disabled="isDisabled || sending"
+      :class="{ disabled: isDisabled || sending }"
+    >
+      <text v-if="sending">发送中</text>
+      <text v-else>发送</text>
+    </button>
+  </view>
+</template>
+
+<script setup>
+  import { computed, ref, onUnmounted } from 'vue';
+  import OptimizeInput from '@/pages/chat/components/optimize-input.vue';
+  /**
+   * 消息发送组件
+   */
+  const props = defineProps({
+    // 消息
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    // 工具模式
+    toolsMode: {
+      type: String,
+      default: '',
+    },
+  });
+  const emits = defineEmits(['update:modelValue', 'onTools', 'sendMessage']);
+  const message = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(newValue) {
+      emits(`update:modelValue`, newValue);
+    }
+  });
+
+
+  // 打开工具菜单
+  function onTools(mode) {
+    emits('onTools', mode);
+  }
+
+  // 发送消息
+  function sendMessage() {
+    emits('sendMessage');
+  }
+</script>
+
+<style scoped lang="scss">
+  .send-wrap {
+    padding: 18rpx 20rpx;
+    background: #fff;
+
+    .left {
+      height: 64rpx;
+      border-radius: 32rpx;
+      background: var(--ui-BG-1);
+    }
+
+    .bq {
+      font-size: 50rpx;
+      margin-left: 10rpx;
+    }
+
+    .sicon-edit {
+      font-size: 50rpx;
+      margin-left: 10rpx;
+      transform: rotate(0deg);
+      transition: all linear 0.2s;
+
+      &.is-active {
+        transform: rotate(45deg);
+      }
+    }
+
+    .send-btn {
+      width: 100rpx;
+      height: 60rpx;
+      line-height: 60rpx;
+      border-radius: 30rpx;
+      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+      font-size: 26rpx;
+      color: #fff;
+      margin-left: 11rpx;
+    }
+  }
+</style>
diff --git a/src/pages/chat/components/messageList.vue b/src/pages/chat/components/messageList.vue
new file mode 100644
index 00000000..e021e029
--- /dev/null
+++ b/src/pages/chat/components/messageList.vue
@@ -0,0 +1,293 @@
+<template>
+  <!--  聊天列表使用scroll-view原生组件，整体倒置  -->
+  <scroll-view
+    :scroll-top="scroll.top"
+    class="chat-scroll-view"
+    scroll-y
+    :refresher-enabled="false"
+    @scroll="onScroll"
+    @scrolltolower="loadMoreHistory"
+    style="transform: scaleY(-1)"
+  >
+    <!-- 消息列表容器 -->
+    <view class="message-container">
+      <!-- 加载更多提示 -->
+      <view v-if="isLoading" class="loading-more" style="transform: scaleY(-1)">
+        <text>加载中...</text>
+      </view>
+      <!-- 消息列表 -->
+      <view class="message-list">
+        <view
+          v-for="(item, index) in messageList"
+          :key="item.id"
+          class="message-item"
+          style="transform: scaleY(-1)"
+        >
+          <!--  消息渲染  -->
+          <MessageListItem
+            :message="item"
+            :message-index="index"
+            :message-list="messageList"
+          ></MessageListItem>
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+
+  <!-- 底部聊天输入框 -->
+  <su-fixed bottom>
+    <view v-if="showTip" class="back-top ss-flex ss-row-center ss-m-b-10" @tap="scrollToTop">
+      <text class="back-top-item ss-flex ss-row-center">
+        {{ showNewMessageTip ? '有新消息' : '回到底部' }}
+      </text>
+    </view>
+    <slot name="bottom"></slot>
+  </su-fixed>
+</template>
+
+<script setup>
+  import MessageListItem from '@/pages/chat/components/messageListItem.vue';
+  import { onMounted, reactive, ref, computed } from 'vue';
+  import KeFuApi from '@/sheep/api/promotion/kefu';
+  import { isEmpty } from '@/sheep/helper/utils';
+  import { formatDate } from '@/sheep/helper/utils';
+  import sheep from '@/sheep';
+
+  const { safeAreaInsets } = sheep.$platform.device;
+  const safeAreaInsetsBottom = safeAreaInsets.bottom + 'px'; // 底部安全区域
+  const messageList = ref([]); // 消息列表
+  const showTip = ref(false); // 显示提示
+  const showNewMessageTip = ref(false); // 显示有新消息提示
+  const refreshMessage = ref(false); // 更新消息列表
+  const isLoading = ref(false); // 是否正在加载更多
+  const hasMore = ref(true); // 是否还有更多数据
+  const keyboardHeight = ref(0); // 键盘高度
+  const scroll = ref({
+    top: 0,
+    oldTop: 0,
+  }); // 滚动位置记录
+  const queryParams = reactive({
+    no: 1,
+    limit: 20,
+    createTime: undefined,
+  }); // 查询参数
+
+  // 计算聊天窗口高度
+  const chatScrollHeight = computed(() => {
+    const baseHeight = 'calc(100vh - 150px - ' + safeAreaInsetsBottom + ')';
+    if (keyboardHeight.value > 0) {
+      // 键盘弹起状态，减去键盘高度
+      return `calc(${baseHeight} - ${keyboardHeight.value}px)`;
+    }
+    return baseHeight;
+  });
+
+  // 获得消息分页列表
+  const getMessageList = async () => {
+    isLoading.value = true;
+    try {
+      const { data } = await KeFuApi.getKefuMessageList(queryParams);
+      if (isEmpty(data)) {
+        hasMore.value = false;
+        return;
+      }
+      if (queryParams.no > 1 && refreshMessage.value) {
+        const newMessageList = [];
+        for (const message of data) {
+          if (messageList.value.some((val) => val.id === message.id)) {
+            continue;
+          }
+          newMessageList.push(message);
+        }
+        // 新消息追加到开头
+        messageList.value = [...newMessageList, ...messageList.value];
+        refreshMessage.value = false; // 更新好后重置状态
+        return;
+      }
+
+      if (queryParams.no > 1) {
+        // 加载更多历史消息，追加到现有列表末尾（因为是倒置的，所以旧消息在底部/列表末尾）
+        if (data.length < queryParams.limit) {
+          hasMore.value = false; // 如果返回的数据少于请求的数量，说明没有更多数据了
+        }
+
+        // 过滤掉已存在的消息
+        const historyMessages = data.filter(
+          (msg) => !messageList.value.some((existing) => existing.id === msg.id),
+        );
+
+        if (historyMessages.length > 0) {
+          messageList.value = [...messageList.value, ...historyMessages];
+        }
+      } else {
+        // 首次加载
+        messageList.value = data;
+
+        if (data.length < queryParams.limit) {
+          hasMore.value = false;
+        }
+      }
+
+      if (data.slice(-1).length > 0) {
+        // 设置最后一次历史查询的最后一条消息的 createTime
+        queryParams.createTime = formatDate(data.slice(-1)[0].createTime);
+      }
+    } finally {
+      isLoading.value = false;
+    }
+  };
+
+  /** 加载更多历史数据 */
+  const loadMoreHistory = async () => {
+    if (isLoading.value || !hasMore.value) return;
+
+    // 增加页码
+    queryParams.no += 1;
+    await getMessageList();
+  };
+
+  /** 刷新消息列表 */
+  const refreshMessageList = async (message = undefined) => {
+    if (typeof message !== 'undefined') {
+      // 追加数据到列表开头（因为是倒置的，所以新消息在顶部/列表开头）
+      messageList.value.unshift(message);
+      showNewMessageTip.value = true;
+    } else {
+      queryParams.createTime = undefined;
+      refreshMessage.value = true;
+      await getMessageList();
+    }
+
+    // 若已是第一页则不做处理
+    if (queryParams.no > 1) {
+      showTip.value = true;
+    } else {
+      scrollToTop();
+    }
+  };
+
+  /** 滚动到顶部（倒置后相当于滚动到最新消息） */
+  const scrollToTop = () => {
+    scroll.value.top = scroll.value.oldTop;
+    setTimeout(() => {
+      scroll.value.top = 0;
+    }, 200); // 等待 view 层同步
+    showTip.value = false;
+  };
+
+  /** 设置键盘高度 */
+  const setKeyboardHeight = (height) => {
+    keyboardHeight.value = height;
+    // 键盘弹起时，滚动到最新消息
+    if (height > 0) {
+      scrollToTop();
+    }
+  };
+
+  defineExpose({ getMessageList, refreshMessageList });
+
+  /** 监听消息列表滚动 */
+  const onScroll = (e) => {
+    const { scrollTop } = e.detail;
+    scroll.value.oldTop = scrollTop;
+    // 当滚动位置超过一定值时，显示"新消息"提示
+    if (scrollTop > 100) {
+      showTip.value = true;
+    } else {
+      showTip.value = false;
+    }
+  };
+
+  // 监听键盘弹起和收起事件
+  const setupKeyboardListeners = () => {
+    // #ifdef H5
+    // H5环境
+    window.addEventListener('resize', () => {
+      // 窗口大小变化可能是由键盘引起的
+      if (
+        document.activeElement &&
+        (document.activeElement.tagName === 'INPUT' ||
+          document.activeElement.tagName === 'TEXTAREA')
+      ) {
+        // 估算键盘高度，实际上是窗口高度变化
+        const currentHeight = window.innerHeight;
+        const viewportHeight = window.visualViewport
+          ? window.visualViewport.height
+          : window.innerHeight;
+        const keyboardHeight = currentHeight - viewportHeight;
+        setKeyboardHeight(keyboardHeight > 0 ? keyboardHeight : 0);
+      } else {
+        setKeyboardHeight(0);
+      }
+    });
+    // #endif
+
+    // #ifdef MP-WEIXIN
+    // TODO puhui999: 小程序键盘弹起还有点问题，看看怎么适配
+    // 微信小程序环境
+    uni.onKeyboardHeightChange((res) => {
+      setKeyboardHeight(res.height);
+    });
+    // #endif
+  };
+
+  onMounted(() => {
+    queryParams.no = 1; // 确保首次加载是第一页
+    scroll.value = {
+      top: 0,
+      oldTop: 0,
+    };
+    getMessageList();
+    setupKeyboardListeners();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .chat-scroll-view {
+    height: v-bind(chatScrollHeight);
+    width: 100%;
+    position: relative;
+    background-color: #f8f8f8;
+    z-index: 1;
+  }
+
+  .message-container {
+    width: 100%;
+    /* 确保容器至少有一屏高度 */
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  .message-list {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 20px;
+  }
+
+  .message-item {
+    margin-bottom: 10px;
+  }
+
+  .loading-more {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #999;
+    font-size: 14px;
+  }
+
+  .back-top {
+    .back-top-item {
+      height: 30px;
+      width: 100px;
+      background-color: #fff;
+      border-radius: 30px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+  }
+</style>
diff --git a/src/pages/chat/components/messageListItem.vue b/src/pages/chat/components/messageListItem.vue
new file mode 100644
index 00000000..b91472c8
--- /dev/null
+++ b/src/pages/chat/components/messageListItem.vue
@@ -0,0 +1,297 @@
+<template>
+  <view class="chat-box">
+    <!--  消息渲染  -->
+    <view class="message-item ss-flex-col scroll-item">
+      <view class="ss-flex ss-row-center ss-col-center">
+        <!-- 系统消息 -->
+        <view
+          v-if="message.contentType === KeFuMessageContentTypeEnum.SYSTEM"
+          class="system-message"
+        >
+          {{ message.content }}
+        </view>
+        <!-- 日期 - 移到消息内容上方显示 -->
+        <view
+          v-if="
+            message.contentType !== KeFuMessageContentTypeEnum.SYSTEM &&
+            showTime(message, messageIndex)
+          "
+          class="date-message"
+        >
+          {{ formatDate(message.createTime) }}
+        </view>
+      </view>
+
+      <!-- 消息体渲染管理员消息和用户消息并左右展示  -->
+      <view
+        v-if="message.contentType !== KeFuMessageContentTypeEnum.SYSTEM"
+        class="ss-flex ss-col-top"
+        :class="[
+          message.senderType === UserTypeEnum.ADMIN
+            ? `ss-row-left`
+            : message.senderType === UserTypeEnum.MEMBER
+            ? `ss-row-right`
+            : '',
+        ]"
+      >
+        <!-- 客服头像 -->
+        <image
+          v-show="message.senderType === UserTypeEnum.ADMIN"
+          class="chat-avatar ss-m-r-24"
+          :src="sheep.$url.cdn(message.senderAvatar) || sheep.$url.static('')"
+          mode="aspectFill"
+          lazy-load
+        />
+        <!-- 内容 -->
+        <template v-if="message.contentType === KeFuMessageContentTypeEnum.TEXT">
+          <view class="message-box" :class="{ admin: message.senderType === UserTypeEnum.ADMIN }">
+            <mp-html :content="processedContent" :domain="sheep.$url.cdn('')" lazy-load />
+          </view>
+        </template>
+        <template v-if="message.contentType === KeFuMessageContentTypeEnum.IMAGE">
+          <view
+            class="message-box"
+            :class="{ admin: message.senderType === UserTypeEnum.ADMIN }"
+            :style="{ width: '200rpx' }"
+          >
+            <su-image
+              class="message-img"
+              isPreview
+              :previewList="[sheep.$url.cdn(getMessageContent(message).picUrl || message.content)]"
+              :current="0"
+              :src="sheep.$url.cdn(getMessageContent(message).picUrl || message.content)"
+              :height="200"
+              :width="200"
+              mode="aspectFill"
+            />
+          </view>
+        </template>
+        <template v-if="message.contentType === KeFuMessageContentTypeEnum.PRODUCT">
+          <div class="ss-m-b-10">
+            <GoodsItem
+              :goodsData="getMessageContent(message)"
+              @tap="
+                sheep.$router.go('/pages/goods/index', { id: getMessageContent(message).spuId })
+              "
+            />
+          </div>
+        </template>
+        <template v-if="message.contentType === KeFuMessageContentTypeEnum.ORDER">
+          <OrderItem
+            :orderData="getMessageContent(message)"
+            @tap="sheep.$router.go('/pages/order/detail', { id: getMessageContent(message).id })"
+          />
+        </template>
+        <!-- user头像 -->
+        <image
+          v-if="message.senderType === UserTypeEnum.MEMBER"
+          class="chat-avatar ss-m-l-24"
+          :src="
+            sheep.$url.cdn(userInfo.avatar) ||
+            sheep.$url.static('/static/img/shop/chat/default.png')
+          "
+          mode="aspectFill"
+        >
+        </image>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { computed, unref } from 'vue';
+  import dayjs from 'dayjs';
+  import { KeFuMessageContentTypeEnum, UserTypeEnum } from '@/pages/chat/util/constants';
+  import { emojiList } from '@/pages/chat/util/emoji';
+  import sheep from '@/sheep';
+  import { formatDate, jsonParse } from '@/sheep/helper/utils';
+  import GoodsItem from '@/pages/chat/components/goods.vue';
+  import OrderItem from '@/pages/chat/components/order.vue';
+
+  const props = defineProps({
+    // 消息
+    message: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 消息索引
+    messageIndex: {
+      type: Number,
+      default: 0,
+    },
+    // 消息列表
+    messageList: {
+      type: Array,
+      default: () => [],
+    },
+  });
+
+  const getMessageContent = computed(() => (item) => jsonParse(item.content)); // 解析消息内容
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+
+  //======================= 工具 =======================
+
+  const showTime = computed(() => (item, index) => {
+    if (unref(props.messageList)[index + 1]) {
+      let dateString = dayjs(unref(props.messageList)[index + 1].createTime).fromNow();
+      return dateString !== dayjs(unref(item).createTime).fromNow();
+    }
+    return false;
+  });
+
+  // 缓存表情映射
+  const emojiMap = computed(() => {
+    const map = new Map();
+    emojiList.forEach((emoji) => {
+      map.set(emoji.name, emoji.file);
+    });
+    return map;
+  });
+
+  // 处理表情 - 进行缓存优化
+  function replaceEmoji(data) {
+    let newData = data;
+    if (typeof newData !== 'object') {
+      let reg = /\[(.+?)]/g; // [] 中括号
+      let zhEmojiName = newData.match(reg);
+      if (zhEmojiName) {
+        zhEmojiName.forEach((item) => {
+          const emojiFile = emojiMap.value.get(item) || '';
+          if (emojiFile) {
+            newData = newData.replace(
+              item,
+              `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;vertical-align: middle;" src="${sheep.$url.cdn(
+                '/static/img/chat/emoji/' + emojiFile,
+              )}"/>`,
+            );
+          }
+        });
+      }
+    }
+    return newData;
+  }
+
+  // 预处理内容，避免重复计算
+  const processedContent = computed(() => {
+    if (props.message.contentType === KeFuMessageContentTypeEnum.TEXT) {
+      return replaceEmoji(getMessageContent.value(props.message).text || props.message.content);
+    }
+    return props.message.content;
+  });
+</script>
+
+<style scoped lang="scss">
+  .message-item {
+    margin-bottom: 10rpx;
+  }
+
+  .date-message,
+  .system-message {
+    width: fit-content;
+    border-radius: 12rpx;
+    padding: 8rpx 16rpx;
+    margin-bottom: 16rpx;
+    background-color: var(--ui-BG-3);
+    color: #999;
+    font-size: 24rpx;
+  }
+
+  .chat-avatar {
+    width: 70rpx;
+    height: 70rpx;
+    border-radius: 50%;
+  }
+
+  .send-status {
+    color: #333;
+    height: 80rpx;
+    margin-right: 8rpx;
+    display: flex;
+    align-items: center;
+
+    .loading {
+      width: 32rpx;
+      height: 32rpx;
+      -webkit-animation: rotating 2s linear infinite;
+      animation: rotating 2s linear infinite;
+
+      @-webkit-keyframes rotating {
+        0% {
+          transform: rotateZ(0);
+        }
+
+        100% {
+          transform: rotateZ(360deg);
+        }
+      }
+
+      @keyframes rotating {
+        0% {
+          transform: rotateZ(0);
+        }
+
+        100% {
+          transform: rotateZ(360deg);
+        }
+      }
+    }
+
+    .warning {
+      width: 32rpx;
+      height: 32rpx;
+      color: #ff3000;
+    }
+  }
+
+  .message-box {
+    max-width: 50%;
+    font-size: 16px;
+    white-space: normal;
+    word-break: break-all;
+    word-wrap: break-word;
+    padding: 20rpx;
+    color: #fff;
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    margin-top: 3px;
+    margin-bottom: 9px;
+    border-top-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+    &.admin {
+      background: #fff;
+      color: #333;
+      margin-top: 3px;
+      margin-bottom: 9px;
+      border-radius: 0 10px 10px 10px;
+    }
+
+    :deep() {
+      .imgred {
+        width: 100%;
+      }
+
+      .imgred,
+      img {
+        width: 100%;
+      }
+    }
+  }
+
+  :deep() {
+    .goods,
+    .order {
+      max-width: 500rpx;
+    }
+  }
+
+  .message-img {
+    width: 100px;
+    height: 100px;
+    border-radius: 6rpx;
+  }
+
+  .error-img {
+    width: 400rpx;
+    height: 400rpx;
+  }
+</style>
diff --git a/src/pages/chat/components/optimize-input.vue b/src/pages/chat/components/optimize-input.vue
new file mode 100644
index 00000000..73f3ceb5
--- /dev/null
+++ b/src/pages/chat/components/optimize-input.vue
@@ -0,0 +1,540 @@
+<template>
+  <view
+    class="uni-easyinput"
+    :class="{ 'uni-easyinput-error': msg }"
+    :style="{ color: inputBorder && msg ? '#e43d33' : styles.color }"
+  >
+    <view
+      class="uni-easyinput__content"
+      :class="{
+				'is-input-border': inputBorder,
+				'is-input-error-border': inputBorder && msg,
+				'is-textarea': type === 'textarea',
+				'is-disabled': disabled
+			}"
+      :style="{
+				'border-color': inputBorder && msg ? '#dd524d' : styles.borderColor,
+				'background-color': disabled ? styles.disableColor : ''
+			}"
+    >
+      <uni-icons
+        v-if="prefixIcon"
+        class="content-clear-icon"
+        :type="prefixIcon"
+        color="#c0c4cc"
+        @click="onClickIcon('prefix')"
+      ></uni-icons>
+      <textarea
+        v-if="type === 'textarea'"
+        class="uni-easyinput__content-textarea"
+        :class="{ 'input-padding': inputBorder }"
+        :name="name"
+        :value="val"
+        :placeholder="placeholder"
+        :placeholderStyle="placeholderStyle"
+        :disabled="disabled"
+        placeholder-class="uni-easyinput__placeholder-class"
+        :maxlength="inputMaxlength"
+        :focus="focused"
+        :autoHeight="autoHeight"
+        :adjust-position="false"
+        @input="onInput"
+        @blur="onBlur"
+        @focus="onFocus"
+        @confirm="onConfirm"
+      ></textarea>
+      <input
+        v-else
+        :type="type === 'password' ? 'text' : type"
+        class="uni-easyinput__content-input"
+        :style="{
+					'padding-right': type === 'password' || clearable || prefixIcon ? '' : '10px',
+					'padding-left': paddingLeft + 'px'
+
+				}"
+        :name="name"
+        :value="val"
+        :password="!showPassword && type === 'password'"
+        :placeholder="placeholder"
+        :placeholderStyle="placeholderStyle"
+        placeholder-class="uni-easyinput__placeholder-class"
+        :disabled="disabled"
+        :maxlength="inputMaxlength"
+        :focus="focused"
+        :confirmType="confirmType"
+        :adjust-position="false"
+        @focus="onFocus"
+        @blur="onBlur"
+        @input="onInput"
+        @change="onInput"
+        @confirm="onConfirm"
+        :cursor-spacing="30"
+        always-embed
+      />
+      <template v-if="type === 'password' && passwordIcon">
+        <uni-icons
+          v-if="val"
+          class="content-clear-icon"
+          :class="{ 'is-textarea-icon': type === 'textarea' }"
+          :type="showPassword ? 'eye-slash-filled' : 'eye-filled'"
+          :size="18"
+          color="#c0c4cc"
+          @click="onEyes"
+        ></uni-icons>
+      </template>
+      <template v-else-if="suffixIcon">
+        <uni-icons
+          v-if="suffixIcon"
+          class="content-clear-icon"
+          :type="suffixIcon"
+          color="#c0c4cc"
+          @click="onClickIcon('suffix')"
+        ></uni-icons>
+      </template>
+      <template v-else>
+        <uni-icons
+          class="content-clear-icon"
+          :class="{ 'is-textarea-icon': type === 'textarea' }"
+          type="clear"
+          :size="clearSize"
+          v-if="clearable && val && !disabled"
+          color="#c0c4cc"
+          @click="onClear"
+        ></uni-icons>
+      </template>
+      <slot name="right"></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  // import {
+  // 	debounce,
+  // 	throttle
+  // } from './common.js'
+  /**
+   * Easyinput 输入框
+   * @description 此组件可以实现表单的输入与校验，包括 "text" 和 "textarea" 类型。
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=3455
+   * @property {String}	value	输入内容
+   * @property {String }	type	输入框的类型（默认text） password/text/textarea/..
+   * 	@value text			文本输入键盘
+   * 	@value textarea	多行文本输入键盘
+   * 	@value password	密码输入键盘
+   * 	@value number		数字输入键盘，注意iOS上app-vue弹出的数字键盘并非9宫格方式
+   * 	@value idcard		身份证输入键盘，信、支付宝、百度、QQ小程序
+   * 	@value digit		带小数点的数字键盘	，App的nvue页面、微信、支付宝、百度、头条、QQ小程序支持
+   * @property {Boolean}	clearable	是否显示右侧清空内容的图标控件，点击可清空输入框内容（默认true）
+   * @property {Boolean}	autoHeight	是否自动增高输入区域，type为textarea时有效（默认false）
+   * @property {String }	placeholder	输入框的提示文字
+   * @property {String }	placeholderStyle	placeholder的样式(内联样式，字符串)，如"color: #ddd"
+   * @property {Boolean}	focus	是否自动获得焦点（默认false）
+   * @property {Boolean}	disabled	是否禁用（默认false）
+   * @property {Number }	maxlength	最大输入长度，设置为 -1 的时候不限制最大长度（默认140）
+   * @property {String }	confirmType	设置键盘右下角按钮的文字，仅在type="text"时生效（默认done）
+   * @property {Number }	clearSize	清除图标的大小，单位px（默认15）
+   * @property {String}	prefixIcon	输入框头部图标
+   * @property {String}	suffixIcon	输入框尾部图标
+   * @property {Boolean}	trim	是否自动去除两端的空格
+   * @value both	去除两端空格
+   * @value left	去除左侧空格
+   * @value right	去除右侧空格
+   * @value start	去除左侧空格
+   * @value end		去除右侧空格
+   * @value all		去除全部空格
+   * @value none	不去除空格
+   * @property {Boolean}	inputBorder	是否显示input输入框的边框（默认true）
+   * @property {Boolean}	passwordIcon	type=password时是否显示小眼睛图标
+   * @property {Object}	styles	自定义颜色
+   * @event {Function}	input	输入框内容发生变化时触发
+   * @event {Function}	focus	输入框获得焦点时触发
+   * @event {Function}	blur	输入框失去焦点时触发
+   * @event {Function}	confirm	点击完成按钮时触发
+   * @event {Function}	iconClick	点击图标时触发
+   * @example <uni-easyinput v-model="mobile"></uni-easyinput>
+   */
+
+  export default {
+    name: 'optimize-input',
+    emits: ['click', 'iconClick', 'update:modelValue', 'input', 'focus', 'blur', 'confirm'],
+    model: {
+      prop: 'modelValue',
+      event: 'update:modelValue'
+    },
+    props: {
+      name: String,
+      value: [Number, String],
+      modelValue: [Number, String],
+      type: {
+        type: String,
+        default: 'text'
+      },
+      clearable: {
+        type: Boolean,
+        default: true
+      },
+      autoHeight: {
+        type: Boolean,
+        default: false
+      },
+      placeholder: String,
+      placeholderStyle: String,
+      focus: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      maxlength: {
+        type: [Number, String],
+        default: 140
+      },
+      confirmType: {
+        type: String,
+        default: 'done'
+      },
+      clearSize: {
+        type: [Number, String],
+        default: 15
+      },
+      inputBorder: {
+        type: Boolean,
+        default: true
+      },
+      prefixIcon: {
+        type: String,
+        default: ''
+      },
+      suffixIcon: {
+        type: String,
+        default: ''
+      },
+      trim: {
+        type: [Boolean, String],
+        default: true
+      },
+      passwordIcon: {
+        type: Boolean,
+        default: true
+      },
+      styles: {
+        type: Object,
+        default() {
+          return {
+            color: '#333',
+            disableColor: '#F7F6F6',
+            borderColor: '#e5e5e5'
+          };
+        }
+      },
+      errorMessage: {
+        type: [String, Boolean],
+        default: ''
+      },
+      paddingLeft:{
+        type: [Number, String],
+        default: 0
+      }
+    },
+    data() {
+      return {
+        focused: false,
+        errMsg: '',
+        val: '',
+        showMsg: '',
+        border: false,
+        isFirstBorder: false,
+        showClearIcon: false,
+        showPassword: false
+      };
+    },
+    computed: {
+      msg() {
+        return this.errorMessage || this.errMsg;
+      },
+      // 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，用户可以传入字符串数值
+      inputMaxlength() {
+        return Number(this.maxlength);
+      }
+    },
+    watch: {
+      value(newVal) {
+        if (this.errMsg) this.errMsg = '';
+        this.val = newVal;
+        // fix by mehaotian is_reset 在 uni-forms 中定义
+        if (this.form && this.formItem && !this.is_reset) {
+          this.is_reset = false;
+          this.formItem.setValue(newVal);
+        }
+      },
+      modelValue(newVal) {
+        if (this.errMsg) this.errMsg = '';
+        this.val = newVal;
+        if (this.form && this.formItem && !this.is_reset) {
+          this.is_reset = false;
+          this.formItem.setValue(newVal);
+        }
+      },
+      focus(newVal) {
+        this.$nextTick(() => {
+          this.focused = this.focus;
+        });
+      }
+    },
+    created() {
+      if (!this.value && this.value !== 0) {
+        this.val = this.modelValue;
+      }
+      if (!this.modelValue && this.modelValue !== 0) {
+        this.val = this.value;
+      }
+      this.form = this.getForm('uniForms');
+      this.formItem = this.getForm('uniFormsItem');
+      if (this.form && this.formItem) {
+        if (this.formItem.name) {
+          if (!this.is_reset) {
+            this.is_reset = false;
+            this.formItem.setValue(this.val);
+          }
+          this.rename = this.formItem.name;
+          this.form.inputChildrens.push(this);
+        }
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.focused = this.focus;
+      });
+    },
+    methods: {
+      /**
+       * 初始化变量值
+       */
+      init() {},
+      onClickIcon(type) {
+        this.$emit('iconClick', type);
+      },
+      /**
+       * 获取父元素实例
+       */
+      getForm(name = 'uniForms') {
+        let parent = this.$parent;
+        let parentName = parent.$options.name;
+        while (parentName !== name) {
+          parent = parent.$parent;
+          if (!parent) return false;
+          parentName = parent.$options.name;
+        }
+        return parent;
+      },
+
+      onEyes() {
+        this.showPassword = !this.showPassword;
+      },
+      onInput(event) {
+        let value = event.detail.value;
+        // 判断是否去除空格
+        if (this.trim) {
+          if (typeof this.trim === 'boolean' && this.trim) {
+            value = this.trimStr(value);
+          }
+          if (typeof this.trim === 'string') {
+            value = this.trimStr(value, this.trim);
+          }
+        }
+        if (this.errMsg) this.errMsg = '';
+        this.val = value;
+        // TODO 兼容 vue2
+        this.$emit('input', value);
+        // TODO　兼容　vue3
+        this.$emit('update:modelValue', value);
+      },
+      onFocus(event) {
+        this.$emit('focus', event);
+      },
+      onBlur(event) {
+        let value = event.detail.value;
+        this.$emit('blur', event);
+      },
+      onConfirm(e) {
+        this.$emit('confirm', e.detail.value);
+      },
+      onClear(event) {
+        this.val = '';
+        // TODO 兼容 vue2
+        this.$emit('input', '');
+        // TODO 兼容 vue2
+        // TODO　兼容　vue3
+        this.$emit('update:modelValue', '');
+      },
+      fieldClick() {
+        this.$emit('click');
+      },
+      trimStr(str, pos = 'both') {
+        if (pos === 'both') {
+          return str.trim();
+        } else if (pos === 'left') {
+          return str.trimLeft();
+        } else if (pos === 'right') {
+          return str.trimRight();
+        } else if (pos === 'start') {
+          return str.trimStart();
+        } else if (pos === 'end') {
+          return str.trimEnd();
+        } else if (pos === 'all') {
+          return str.replace(/\s+/g, '');
+        } else if (pos === 'none') {
+          return str;
+        }
+        return str;
+      }
+    }
+  };
+</script>
+
+<style lang="scss">
+  $uni-error: #e43d33;
+  $uni-border-1: #dcdfe6 !default;
+  .uni-easyinput {
+    /* #ifndef APP-NVUE */
+    width: 100%;
+    /* #endif */
+    flex: 1;
+    position: relative;
+    text-align: left;
+    color: #333;
+    font-size: 14px;
+  }
+
+  .uni-easyinput__content {
+    flex: 1;
+    /* #ifndef APP-NVUE */
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    min-height: 72rpx;
+    /* #endif */
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .uni-easyinput__content-input {
+    /* #ifndef APP-NVUE */
+    width: auto;
+    /* #endif */
+    position: relative;
+    overflow: hidden;
+    flex: 1;
+    line-height: 56rpx;
+    font-size: 28rpx;
+    height: 56rpx;
+  }
+  .uni-easyinput__placeholder-class {
+    color: #bbbbbb;
+    font-size: 28rpx;
+    font-weight: 400;
+    line-height: normal;
+  }
+  .is-textarea {
+    align-items: flex-start;
+  }
+
+  .is-textarea-icon {
+    margin-top: 5px;
+  }
+
+  .uni-easyinput__content-textarea {
+    position: relative;
+    overflow: hidden;
+    flex: 1;
+    line-height: 1.5;
+    font-size: 14px;
+    padding-top: 6px;
+    padding-bottom: 10px;
+    height: 80px;
+    /* #ifndef APP-NVUE */
+    min-height: 80px;
+    width: auto;
+    /* #endif */
+  }
+
+  .input-padding {
+    padding-left: 10px;
+  }
+
+  .content-clear-icon {
+    padding: 0 5px;
+  }
+
+  .label-icon {
+    margin-right: 5px;
+    margin-top: -1px;
+  }
+
+  // 显示边框
+  .is-input-border {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    box-sizing: border-box;
+    /* #endif */
+    flex-direction: row;
+    align-items: center;
+    border: 1px solid $uni-border-1;
+    border-radius: 4px;
+  }
+
+  .uni-error-message {
+    position: absolute;
+    bottom: -17px;
+    left: 0;
+    line-height: 12px;
+    color: $uni-error;
+    font-size: 12px;
+    text-align: left;
+  }
+
+  .uni-error-msg--boeder {
+    position: relative;
+    bottom: 0;
+    line-height: 22px;
+  }
+
+  .is-input-error-border {
+    border-color: $uni-error;
+    .uni-easyinput__placeholder-class {
+      // color: mix(#fff, $uni-error, 50%);
+    }
+  }
+
+  .uni-easyinput--border {
+    margin-bottom: 0;
+    padding: 10px 15px;
+    // padding-bottom: 0;
+    border-top: 1px #eee solid;
+  }
+
+  .uni-easyinput-error {
+    padding-bottom: 0;
+  }
+
+  .is-first-border {
+    /* #ifndef APP-NVUE */
+    border: none;
+    /* #endif */
+    /* #ifdef APP-NVUE */
+    border-width: 0;
+    /* #endif */
+  }
+
+  .is-disabled {
+    border-color: red;
+    background-color: #f7f6f6;
+    color: #d5d5d5;
+    .uni-easyinput__placeholder-class {
+      color: #d5d5d5;
+      font-size: 12px;
+    }
+  }
+</style>
diff --git a/src/pages/chat/components/order.vue b/src/pages/chat/components/order.vue
new file mode 100644
index 00000000..15f27208
--- /dev/null
+++ b/src/pages/chat/components/order.vue
@@ -0,0 +1,114 @@
+<template>
+  <view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
+        :key="orderData.id">
+    <view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
+      <view class="order-no">订单号：{{ orderData.no }}</view>
+      <view class="order-state ss-font-26" :class="formatOrderColor(orderData)">
+        {{ formatOrderStatus(orderData) }}
+      </view>
+    </view>
+    <view class="border-bottom" v-for="item in orderData.items" :key="item.id">
+      <s-goods-item
+        :img="item.picUrl"
+        :title="item.spuName"
+        :skuText="item.properties.map((property) => property.valueName).join(' ')"
+        :price="item.price"
+        :num="item.count"
+      />
+    </view>
+    <view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
+      <view class="ss-flex ss-col-center">
+        <view class="discounts-title pay-color">共 {{ orderData.productCount }} 件商品,总金额:</view>
+        <view class="discounts-money pay-color">
+          ￥{{ fen2yuan(orderData.payPrice) }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { fen2yuan, formatOrderColor, formatOrderStatus } from '@/sheep/hooks/useGoods';
+
+  const props = defineProps({
+    orderData: {
+      type: Object,
+      default: {},
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .order-list-card-box {
+    .order-card-header {
+      height: 80rpx;
+
+      .order-no {
+        font-size: 26rpx;
+        font-weight: 500;
+      }
+
+      .order-state {}
+    }
+    .pay-box {
+      .discounts-title {
+        font-size: 24rpx;
+        line-height: normal;
+        color: #999999;
+      }
+
+      .discounts-money {
+        font-size: 24rpx;
+        line-height: normal;
+        color: #999;
+        font-family: OPPOSANS;
+      }
+
+      .pay-color {
+        color: #333;
+      }
+    }
+    .order-card-footer {
+      height: 100rpx;
+
+      .more-item-box {
+        padding: 20rpx;
+
+        .more-item {
+          height: 60rpx;
+
+          .title {
+            font-size: 26rpx;
+          }
+        }
+      }
+
+      .more-btn {
+        color: $dark-9;
+        font-size: 24rpx;
+      }
+
+      .content {
+        width: 154rpx;
+        color: #333333;
+        font-size: 26rpx;
+        font-weight: 500;
+      }
+    }
+  }
+  .warning-color {
+    color: #faad14;
+  }
+
+  .danger-color {
+    color: #ff3000;
+  }
+
+  .success-color {
+    color: #52c41a;
+  }
+
+  .info-color {
+    color: #999999;
+  }
+</style>
diff --git a/src/pages/chat/components/select-popup.vue b/src/pages/chat/components/select-popup.vue
new file mode 100644
index 00000000..60711af2
--- /dev/null
+++ b/src/pages/chat/components/select-popup.vue
@@ -0,0 +1,151 @@
+<template>
+  <su-popup :show="show" showClose round="10" backgroundColor="#eee" @close="emits('close')">
+    <view class="select-popup">
+      <view class="title">
+        <span>{{ mode == 'goods' ? '我的浏览' : '我的订单' }}</span>
+      </view>
+      <scroll-view
+        class="scroll-box"
+        scroll-y="true"
+        :scroll-with-animation="true"
+        :show-scrollbar="false"
+        @scrolltolower="loadmore"
+      >
+        <view
+          class="item"
+          v-for="item in state.pagination.data"
+          :key="item.id"
+          @tap="emits('select', { type: mode, data: item })"
+        >
+          <template v-if="mode == 'goods'">
+            <GoodsItem :goodsData="item" />
+          </template>
+          <template v-if="mode == 'order'">
+            <OrderItem :orderData="item" />
+          </template>
+        </view>
+        <uni-load-more :status="state.loadStatus" :content-text="{ contentdown: '上拉加载更多' }" />
+      </scroll-view>
+    </view>
+  </su-popup>
+</template>
+
+<script setup>
+  import { reactive, watch } from 'vue';
+  import _ from 'lodash-es';
+  import GoodsItem from './goods.vue';
+  import OrderItem from './order.vue';
+  import OrderApi from '@/sheep/api/trade/order';
+  import SpuHistoryApi from '@/sheep/api/product/history';
+
+  const emits = defineEmits(['select', 'close']);
+  const props = defineProps({
+    mode: {
+      type: String,
+      default: 'goods',
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  watch(
+    () => props.mode,
+    () => {
+      state.pagination.data = [];
+      if (props.mode) {
+        getList(state.pagination.page);
+      }
+    },
+  );
+
+  const state = reactive({
+    loadStatus: '',
+    pagination: {
+      data: [],
+      current_page: 1,
+      total: 1,
+      last_page: 1,
+    },
+  });
+
+  async function getList(page, list_rows = 5) {
+    state.loadStatus = 'loading';
+    const res =
+      props.mode == 'goods'
+        ? await SpuHistoryApi.getBrowseHistoryPage({
+            page,
+            list_rows,
+          })
+        : await OrderApi.getOrderPage({
+            page,
+            list_rows,
+          });
+    let orderList = _.concat(state.pagination.data, res.data.list);
+    state.pagination = {
+      ...res.data,
+      data: orderList,
+    };
+    if (state.pagination.current_page < state.pagination.last_page) {
+      state.loadStatus = 'more';
+    } else {
+      state.loadStatus = 'noMore';
+    }
+  }
+
+  function loadmore() {
+    if (state.loadStatus !== 'noMore') {
+      getList(state.pagination.current_page + 1);
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .select-popup {
+    max-height: 600rpx;
+
+    .title {
+      height: 100rpx;
+      line-height: 100rpx;
+      padding: 0 26rpx;
+      background: #fff;
+      border-radius: 20rpx 20rpx 0 0;
+
+      span {
+        font-size: 32rpx;
+        position: relative;
+
+        &::after {
+          content: '';
+          display: block;
+          width: 100%;
+          height: 2px;
+          z-index: 1;
+          position: absolute;
+          left: 0;
+          bottom: -15px;
+          background: var(--ui-BG-Main);
+          pointer-events: none;
+        }
+      }
+    }
+
+    .scroll-box {
+      height: 500rpx;
+    }
+
+    .item {
+      background: #fff;
+      margin: 26rpx 26rpx 0;
+      border-radius: 20rpx;
+
+      :deep() {
+        .image {
+          width: 140rpx;
+          height: 140rpx;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/pages/chat/components/toolsPopup.vue b/src/pages/chat/components/toolsPopup.vue
new file mode 100644
index 00000000..f47ce3fc
--- /dev/null
+++ b/src/pages/chat/components/toolsPopup.vue
@@ -0,0 +1,166 @@
+<template>
+  <su-popup
+    :show="showTools"
+    @close="handleClose"
+  >
+    <view class="ss-modal-box ss-flex-col">
+      <slot></slot>
+      <view class="content ss-flex ss-flex-1">
+        <template v-if="toolsMode === 'emoji'">
+          <swiper
+            class="emoji-swiper"
+            :indicator-dots="true"
+            circular
+            indicator-active-color="#7063D2"
+            indicator-color="rgba(235, 231, 255, 1)"
+            :autoplay="false"
+            :interval="3000"
+            :duration="1000"
+          >
+            <swiper-item v-for="emoji in emojiPage" :key="emoji">
+              <view class="ss-flex ss-flex-wrap">
+                <image
+                  v-for="item in emoji" :key="item"
+                  class="emoji-img"
+                  :src="sheep.$url.cdn(`/static/img/chat/emoji/${item.file}`)"
+                  @tap="onEmoji(item)"
+                >
+                </image>
+              </view>
+            </swiper-item>
+          </swiper>
+        </template>
+        <template v-else>
+          <view class="image">
+            <s-uploader
+              file-mediatype="image"
+              :imageStyles="{ width: 50, height: 50, border: false }"
+              @select="imageSelect({ type: 'image', data: $event })"
+            >
+              <image
+                class="icon"
+                :src="sheep.$url.static('/static/img/shop/chat/image.png')"
+                mode="aspectFill"
+              ></image>
+            </s-uploader>
+            <view>图片</view>
+          </view>
+          <view class="goods" @tap="onShowSelect('goods')">
+            <image
+              class="icon"
+              :src="sheep.$url.static('/static/img/shop/chat/goods.png')"
+              mode="aspectFill"
+            ></image>
+            <view>商品</view>
+          </view>
+          <view class="order" @tap="onShowSelect('order')">
+            <image
+              class="icon"
+              :src="sheep.$url.static('/static/img/shop/chat/order.png')"
+              mode="aspectFill"
+            ></image>
+            <view>订单</view>
+          </view>
+        </template>
+      </view>
+    </view>
+  </su-popup>
+</template>
+
+<script setup>
+  /**
+   * 聊天工具
+   */
+  import { emojiPage } from '@/pages/chat/util/emoji';
+  import sheep from '@/sheep';
+
+  const props = defineProps({
+    // 工具模式
+    toolsMode: {
+      type: String,
+      default: '',
+    },
+    // 控制工具菜单弹出
+    showTools: {
+      type: Boolean,
+      default: () => false,
+    },
+  });
+  const emits = defineEmits(['onEmoji', 'imageSelect', 'onShowSelect', 'close']);
+
+  // 关闭弹出工具菜单
+  function handleClose() {
+    emits('close');
+  }
+
+  // 选择表情
+  function onEmoji(emoji) {
+    emits('onEmoji', emoji);
+  }
+
+  // 选择图片
+  function imageSelect(val) {
+    emits('imageSelect', val);
+  }
+
+  // 选择商品或订单
+  function onShowSelect(mode) {
+    emits('onShowSelect', mode);
+  }
+</script>
+
+<style scoped lang="scss">
+  .content {
+    width: 100%;
+    align-content: space-around;
+    border-top: 1px solid #dfdfdf;
+    padding: 20rpx 0 0;
+
+    .emoji-swiper {
+      width: 100%;
+      height: 280rpx;
+      padding: 0 20rpx;
+
+      .emoji-img {
+        width: 50rpx;
+        height: 50rpx;
+        display: inline-block;
+        margin: 10rpx;
+      }
+    }
+
+    .image,
+    .goods,
+    .order {
+      width: 33.3%;
+      height: 280rpx;
+      text-align: center;
+      font-size: 24rpx;
+      color: #333;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .icon {
+        width: 50rpx;
+        height: 50rpx;
+        margin-bottom: 21rpx;
+      }
+    }
+
+    :deep() {
+      .uni-file-picker__container {
+        justify-content: center;
+      }
+
+      .file-picker__box {
+        display: none;
+
+        &:last-of-type {
+          display: flex;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/pages/chat/index.vue b/src/pages/chat/index.vue
new file mode 100644
index 00000000..2c7d8172
--- /dev/null
+++ b/src/pages/chat/index.vue
@@ -0,0 +1,222 @@
+<template>
+  <s-layout
+    class="chat-wrap"
+    :title="!isReconnecting ? '连接客服成功' : '会话重连中'"
+    navbar="inner"
+  >
+    <!--  覆盖头部导航栏背景颜色  -->
+    <view class="page-bg" :style="{ height: sys_navBar + 'px' }"></view>
+    <!--  聊天区域  -->
+    <MessageList ref="messageListRef">
+      <template #bottom>
+        <message-input
+          v-model="chat.msg"
+          @on-tools="onTools"
+          @send-message="onSendMessage"
+          :auto-focus="false"
+          :show-char-count="true"
+          :max-length="500"
+        ></message-input>
+      </template>
+    </MessageList>
+    <!--  聊天工具  -->
+    <tools-popup
+      :show-tools="chat.showTools"
+      :tools-mode="chat.toolsMode"
+      @close="handleToolsClose"
+      @on-emoji="onEmoji"
+      @image-select="onSelect"
+      @on-show-select="onShowSelect"
+    >
+      <message-input
+        v-model="chat.msg"
+        @on-tools="onTools"
+        @send-message="onSendMessage"
+        :auto-focus="false"
+        :show-char-count="true"
+        :max-length="500"
+      ></message-input>
+    </tools-popup>
+    <!--  商品订单选择  -->
+    <SelectPopup
+      :mode="chat.selectMode"
+      :show="chat.showSelect"
+      @select="onSelect"
+      @close="chat.showSelect = false"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import MessageList from '@/pages/chat/components/messageList.vue';
+  import { reactive, ref, toRefs } from 'vue';
+  import sheep from '@/sheep';
+  import ToolsPopup from '@/pages/chat/components/toolsPopup.vue';
+  import MessageInput from '@/pages/chat/components/messageInput.vue';
+  import SelectPopup from '@/pages/chat/components/select-popup.vue';
+  import {
+    KeFuMessageContentTypeEnum,
+    WebSocketMessageTypeConstants,
+  } from '@/pages/chat/util/constants';
+  import FileApi from '@/sheep/api/infra/file';
+  import KeFuApi from '@/sheep/api/promotion/kefu';
+  import { useWebSocket } from './util/useWebSocket';
+  import { jsonParse } from '@/sheep/helper/utils';
+
+  const sys_navBar = sheep.$platform.navbar;
+
+  const chat = reactive({
+    msg: '',
+    scrollInto: '',
+    showTools: false,
+    toolsMode: '',
+    showSelect: false,
+    selectMode: '',
+  });
+
+  // 发送消息
+  async function onSendMessage() {
+    if (!chat.msg) return;
+    try {
+      const data = {
+        contentType: KeFuMessageContentTypeEnum.TEXT,
+        content: JSON.stringify({ text: chat.msg }),
+      };
+      await KeFuApi.sendKefuMessage(data);
+      chat.msg = '';
+    } finally {
+      chat.showTools = false;
+    }
+  }
+
+  const messageListRef = ref();
+
+  //======================= 聊天工具相关 start =======================
+
+  function handleToolsClose() {
+    chat.showTools = false;
+    chat.toolsMode = '';
+  }
+
+  function onEmoji(item) {
+    chat.msg += item.name;
+  }
+
+  // 点击工具栏开关
+  function onTools(mode) {
+    if (isReconnecting.value) {
+      sheep.$helper.toast('您已掉线！请返回重试');
+      return;
+    }
+
+    // 第二次点击关闭
+    if (chat.showTools && chat.toolsMode === mode) {
+      handleToolsClose();
+      return;
+    }
+    // 切换工具栏
+    if (chat.showTools && chat.toolsMode !== mode) {
+      chat.showTools = false;
+      chat.toolsMode = '';
+    }
+    // 延迟打开等一下过度效果
+    setTimeout(() => {
+      chat.toolsMode = mode;
+      chat.showTools = true;
+    }, 200);
+  }
+
+  function onShowSelect(mode) {
+    chat.showTools = false;
+    chat.showSelect = true;
+    chat.selectMode = mode;
+  }
+
+  async function onSelect({ type, data }) {
+    let msg;
+    switch (type) {
+      case 'image':
+        const res = await FileApi.uploadFile(data.tempFiles[0].path);
+        msg = {
+          contentType: KeFuMessageContentTypeEnum.IMAGE,
+          content: JSON.stringify({ picUrl: res.data }),
+        };
+        break;
+      case 'goods':
+        msg = {
+          contentType: KeFuMessageContentTypeEnum.PRODUCT,
+          content: JSON.stringify(data),
+        };
+        break;
+      case 'order':
+        msg = {
+          contentType: KeFuMessageContentTypeEnum.ORDER,
+          content: JSON.stringify(data),
+        };
+        break;
+    }
+    if (msg) {
+      // 发送消息
+      // scrollBottom();
+      await KeFuApi.sendKefuMessage(msg);
+      await messageListRef.value.refreshMessageList();
+      chat.showTools = false;
+      chat.showSelect = false;
+      chat.selectMode = '';
+    }
+  }
+
+  //======================= 聊天工具相关 end =======================
+  const { options } = useWebSocket({
+    // 连接成功
+    onConnected: async () => {},
+    // 收到消息
+    onMessage: async (data) => {
+      const type = data.type;
+      if (!type) {
+        console.error('未知的消息类型：' + data);
+        return;
+      }
+      // 2.2 消息类型：KEFU_MESSAGE_TYPE
+      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
+        // 刷新消息列表
+        await messageListRef.value.refreshMessageList(jsonParse(data.content));
+        return;
+      }
+      // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
+      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
+        console.log('管理员已读消息');
+        // 更新消息已读状态
+        sheep.$helper.toast('客服已读您的消息');
+      }
+    },
+  });
+  const isReconnecting = toRefs(options).isReconnecting; // 重连状态
+</script>
+
+<style scoped lang="scss">
+  .chat-wrap {
+    .page-bg {
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: var(--ui-BG-Main);
+      z-index: 1;
+    }
+
+    .status {
+      position: relative;
+      box-sizing: border-box;
+      z-index: 3;
+      height: 70rpx;
+      padding: 0 30rpx;
+      background: var(--ui-BG-Main-opacity-1);
+      display: flex;
+      align-items: center;
+      font-size: 30rpx;
+      font-weight: 400;
+      color: var(--ui-BG-Main);
+    }
+  }
+</style>
diff --git a/src/pages/chat/util/constants.js b/src/pages/chat/util/constants.js
new file mode 100644
index 00000000..1b8eba97
--- /dev/null
+++ b/src/pages/chat/util/constants.js
@@ -0,0 +1,19 @@
+export const KeFuMessageContentTypeEnum = {
+  TEXT: 1, // 文本消息
+  IMAGE: 2, // 图片消息
+  VOICE: 3, // 语音消息
+  VIDEO: 4, // 视频消息
+  SYSTEM: 5, // 系统消息
+  // ========== 商城特殊消息 ==========
+  PRODUCT: 10,//  商品消息
+  ORDER: 11,//  订单消息"
+};
+export const UserTypeEnum = {
+  MEMBER: 1, // 会员 面向 c 端，普通用户
+  ADMIN: 2, // 管理员 面向 b 端，管理后台
+};
+// Promotion 的 WebSocket 消息类型枚举类
+export const WebSocketMessageTypeConstants = {
+  KEFU_MESSAGE_TYPE: 'kefu_message_type', // 客服消息类型
+  KEFU_MESSAGE_ADMIN_READ: 'kefu_message_read_status_change' // 客服消息管理员已读
+}
diff --git a/src/pages/chat/util/emoji.js b/src/pages/chat/util/emoji.js
new file mode 100644
index 00000000..83e6e842
--- /dev/null
+++ b/src/pages/chat/util/emoji.js
@@ -0,0 +1,58 @@
+export const emojiList = [
+  { name: '[笑掉牙]', file: 'xiaodiaoya.png' },
+  { name: '[可爱]', file: 'keai.png' },
+  { name: '[冷酷]', file: 'lengku.png' },
+  { name: '[闭嘴]', file: 'bizui.png' },
+  { name: '[生气]', file: 'shengqi.png' },
+  { name: '[惊恐]', file: 'jingkong.png' },
+  { name: '[瞌睡]', file: 'keshui.png' },
+  { name: '[大笑]', file: 'daxiao.png' },
+  { name: '[爱心]', file: 'aixin.png' },
+  { name: '[坏笑]', file: 'huaixiao.png' },
+  { name: '[飞吻]', file: 'feiwen.png' },
+  { name: '[疑问]', file: 'yiwen.png' },
+  { name: '[开心]', file: 'kaixin.png' },
+  { name: '[发呆]', file: 'fadai.png' },
+  { name: '[流泪]', file: 'liulei.png' },
+  { name: '[汗颜]', file: 'hanyan.png' },
+  { name: '[惊悚]', file: 'jingshu.png' },
+  { name: '[困~]', file: 'kun.png' },
+  { name: '[心碎]', file: 'xinsui.png' },
+  { name: '[天使]', file: 'tianshi.png' },
+  { name: '[晕]', file: 'yun.png' },
+  { name: '[啊]', file: 'a.png' },
+  { name: '[愤怒]', file: 'fennu.png' },
+  { name: '[睡着]', file: 'shuizhuo.png' },
+  { name: '[面无表情]', file: 'mianwubiaoqing.png' },
+  { name: '[难过]', file: 'nanguo.png' },
+  { name: '[犯困]', file: 'fankun.png' },
+  { name: '[好吃]', file: 'haochi.png' },
+  { name: '[呕吐]', file: 'outu.png' },
+  { name: '[龇牙]', file: 'ziya.png' },
+  { name: '[懵比]', file: 'mengbi.png' },
+  { name: '[白眼]', file: 'baiyan.png' },
+  { name: '[饿死]', file: 'esi.png' },
+  { name: '[凶]', file: 'xiong.png' },
+  { name: '[感冒]', file: 'ganmao.png' },
+  { name: '[流汗]', file: 'liuhan.png' },
+  { name: '[笑哭]', file: 'xiaoku.png' },
+  { name: '[流口水]', file: 'liukoushui.png' },
+  { name: '[尴尬]', file: 'ganga.png' },
+  { name: '[惊讶]', file: 'jingya.png' },
+  { name: '[大惊]', file: 'dajing.png' },
+  { name: '[不好意思]', file: 'buhaoyisi.png' },
+  { name: '[大闹]', file: 'danao.png' },
+  { name: '[不可思议]', file: 'bukesiyi.png' },
+  { name: '[爱你]', file: 'aini.png' },
+  { name: '[红心]', file: 'hongxin.png' },
+  { name: '[点赞]', file: 'dianzan.png' },
+  { name: '[恶魔]', file: 'emo.png' },
+];
+
+export let emojiPage = {};
+emojiList.forEach((item, index) => {
+  if (!emojiPage[Math.floor(index / 30) + 1]) {
+    emojiPage[Math.floor(index / 30) + 1] = [];
+  }
+  emojiPage[Math.floor(index / 30) + 1].push(item);
+});
diff --git a/src/pages/chat/util/useWebSocket.js b/src/pages/chat/util/useWebSocket.js
new file mode 100644
index 00000000..4b592764
--- /dev/null
+++ b/src/pages/chat/util/useWebSocket.js
@@ -0,0 +1,150 @@
+import { onBeforeUnmount, reactive, ref } from 'vue';
+import { baseUrl, websocketPath } from '@/sheep/config';
+import { copyValueToTarget } from '@/sheep/helper/utils';
+import { getRefreshToken } from '@/sheep/request';
+
+/**
+ * WebSocket 创建 hook
+ * @param opt 连接配置
+ * @return {{options: *}}
+ */
+export function useWebSocket(opt) {
+  const options = reactive({
+    url: (baseUrl + websocketPath).replace('http', 'ws') + '?token=' + getRefreshToken(), // ws 地址
+    isReconnecting: false, // 正在重新连接
+    reconnectInterval: 3000, // 重连间隔，单位毫秒
+    heartBeatInterval: 5000, // 心跳间隔，单位毫秒
+    pingTimeoutDuration: 1000, // 超过这个时间，后端没有返回pong，则判定后端断线了。
+    heartBeatTimer: null, // 心跳计时器
+    destroy: false, // 是否销毁
+    pingTimeout: null, // 心跳检测定时器
+    reconnectTimeout: null, // 重连定时器ID的属性
+    onConnected: () => {}, // 连接成功时触发
+    onClosed: () => {}, // 连接关闭时触发
+    onMessage: (data) => {}, // 收到消息
+  });
+  const SocketTask = ref(null); // SocketTask 由 uni.connectSocket() 接口创建
+
+  const initEventListeners = () => {
+    // 监听 WebSocket 连接打开事件
+    SocketTask.value.onOpen(() => {
+      console.log('WebSocket 连接成功');
+      // 连接成功时触发
+      options.onConnected();
+      // 开启心跳检查
+      startHeartBeat();
+    });
+    // 监听 WebSocket 接受到服务器的消息事件
+    SocketTask.value.onMessage((res) => {
+      try {
+        if (res.data === 'pong') {
+          // 收到心跳重置心跳超时检查
+          resetPingTimeout();
+        } else {
+          options.onMessage(JSON.parse(res.data));
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    });
+    // 监听 WebSocket 连接关闭事件
+    SocketTask.value.onClose((event) => {
+      // 情况一：实例销毁
+      if (options.destroy) {
+        options.onClosed();
+      } else {
+        // 情况二：连接失败重连
+        // 停止心跳检查
+        stopHeartBeat();
+        // 重连
+        reconnect();
+      }
+    });
+  };
+
+  // 发送消息
+  const sendMessage = (message) => {
+    if (SocketTask.value && !options.destroy) {
+      SocketTask.value.send({ data: message });
+    }
+  };
+  // 开始心跳检查
+  const startHeartBeat = () => {
+    options.heartBeatTimer = setInterval(() => {
+      sendMessage('ping');
+      options.pingTimeout = setTimeout(() => {
+        // 如果在超时时间内没有收到 pong，则认为连接断开
+        reconnect();
+      }, options.pingTimeoutDuration);
+    }, options.heartBeatInterval);
+  };
+  // 停止心跳检查
+  const stopHeartBeat = () => {
+    clearInterval(options.heartBeatTimer);
+    resetPingTimeout();
+  };
+
+  // WebSocket 重连
+  const reconnect = () => {
+    if (options.destroy || !SocketTask.value) {
+      // 如果WebSocket已被销毁或尚未完全关闭，不进行重连
+      return;
+    }
+
+    // 重连中
+    options.isReconnecting = true;
+
+    // 清除现有的重连标志，以避免多次重连
+    if (options.reconnectTimeout) {
+      clearTimeout(options.reconnectTimeout);
+    }
+
+    // 设置重连延迟
+    options.reconnectTimeout = setTimeout(() => {
+      // 检查组件是否仍在运行和WebSocket是否关闭
+      if (!options.destroy) {
+        // 重置重连标志
+        options.isReconnecting = false;
+        // 初始化新的WebSocket连接
+        initSocket();
+      }
+    }, options.reconnectInterval);
+  };
+
+  const resetPingTimeout = () => {
+    if (options.pingTimeout) {
+      clearTimeout(options.pingTimeout);
+      options.pingTimeout = null; // 清除超时ID
+    }
+  };
+
+  const close = () => {
+    options.destroy = true;
+    stopHeartBeat();
+    if (options.reconnectTimeout) {
+      clearTimeout(options.reconnectTimeout);
+    }
+    if (SocketTask.value) {
+      SocketTask.value.close();
+      SocketTask.value = null;
+    }
+  };
+
+  const initSocket = () => {
+    options.destroy = false;
+    copyValueToTarget(options, opt);
+    SocketTask.value = uni.connectSocket({
+      url: options.url,
+      complete: () => {},
+      success: () => {},
+    });
+    initEventListeners();
+  };
+
+  initSocket();
+
+  onBeforeUnmount(() => {
+    close();
+  });
+  return { options };
+}
diff --git a/src/pages/commission/commission-ranking.vue b/src/pages/commission/commission-ranking.vue
new file mode 100644
index 00000000..50fc76fe
--- /dev/null
+++ b/src/pages/commission/commission-ranking.vue
@@ -0,0 +1,239 @@
+<!-- 佣金排行榜 -->
+<template>
+  <s-layout title="佣金排行榜">
+    <view class="commission-rank">
+      <view class="header">
+        <view class="rank" v-if="state.position">
+          您目前的排名
+          <text class="num">{{ state.position }}</text> 名
+        </view>
+        <view class="rank" v-else>您目前暂无排名</view>
+      </view>
+      <view class="wrapper">
+        <view class="nav acea-row row-around" style="justify-content: space-around; display: flex">
+          <view
+            class="item"
+            :class="state.currentTab === index ? 'font-color' : ''"
+            v-for="(item, index) in tabMaps"
+            :key="index"
+            @click="switchTap(index)"
+          >
+            {{ item }}
+          </view>
+        </view>
+        <view class="list">
+          <view class="item" v-for="(item, index) in state.pagination.list" :key="index">
+            <view class="num" v-if="index <= 2">
+              <image :src="'/static/images/medal0' + (index + 1) + '.png'" />
+            </view>
+            <view class="num" v-else>
+              {{ index + 1 }}
+            </view>
+            <view class="pictrue">
+              <image :src="item.avatar" />
+            </view>
+            <view class="text">{{ item.nickname }}</view>
+            <view class="people">￥{{ fen2yuan(item.brokeragePrice) }}</view>
+          </view>
+        </view>
+        <view class="noCommodity" v-if="state.pagination.list.length === 0">
+          <emptyPage title="暂无排行～" />
+        </view>
+      </view>
+    </view>
+
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import BrokerageApi from '@/sheep/api/trade/brokerage';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import _ from 'lodash-es';
+  import { resetPagination, getWeekTimes, getMonthTimes } from '@/sheep/helper/utils';
+
+  const tabMaps = ['周排行', '月排行'];
+
+  const state = reactive({
+    currentTab: 0,
+    position: 0, // 排名
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 10,
+    },
+    loadStatus: '',
+  });
+
+  async function switchTap(index) {
+    state.currentTab = index;
+    resetPagination(state.pagination);
+    calculateTimes();
+    getBrokerageRankList();
+  }
+
+  async function getBrokerageRankList() {
+    const { code, data } = await BrokerageApi.getBrokerageUserChildSummaryPageByPrice({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      'times[0]': state.times[0],
+      'times[1]': state.times[1],
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+    if (state.pagination.pageNo === 1) {
+      getBrokerageRankNumber();
+    }
+  }
+
+  async function getBrokerageRankNumber() {
+    const { code, data } = await BrokerageApi.getRankByPrice({
+      times: state.times,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.position = data;
+  }
+
+  function formatDate(date) {
+    return sheep.$helper.timeFormat(date, 'yyyy-mm-dd hh:MM:ss');
+  }
+
+  function calculateTimes() {
+    let times;
+    if (state.currentTab === 0) {
+      times = getWeekTimes();
+    } else {
+      times = getMonthTimes();
+    }
+    state.times = [formatDate(times[0]), formatDate(times[1])];
+  }
+
+  onLoad(function () {
+    calculateTimes();
+    getBrokerageRankList();
+  });
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getBrokerageRankList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => loadMore());
+</script>
+<style lang="scss" scoped>
+  .commission-rank {
+    .header {
+      background: url('data:image/jpeg;base64,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')
+        no-repeat;
+      width: 100%;
+      height: 344rpx;
+      background-size: 100% 100%;
+
+      .rank {
+        font-size: 33rpx;
+        color: #fff;
+        position: absolute;
+        top: 160rpx;
+        left: 48rpx;
+
+        .num {
+          font-size: 51rpx;
+          font-weight: bold;
+          margin: 0 10rpx;
+        }
+      }
+    }
+
+    .wrapper {
+      width: 710rpx;
+      background-color: #fff;
+      border-radius: 14rpx;
+      margin: -76rpx auto 0 auto;
+
+      .nav {
+        height: 99rpx;
+        border-bottom: 2.5rpx solid #f3f3f3;
+        font-size: 30rpx;
+        font-weight: bold;
+        color: #999;
+        line-height: 99rpx;
+
+        .item.font-color {
+          border-bottom: 4rpx solid #e93323;
+          margin-top: -2rpx;
+          color: #e93323;
+        }
+      }
+
+      .list {
+        padding: 0 20rpx;
+
+        .item {
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          border-bottom: 1px solid #f3f3f3;
+          height: 101rpx;
+          font-size: 28rpx;
+
+          .num {
+            color: #666;
+            flex: 0.08;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+
+            image {
+              width: 50rpx;
+              height: 50rpx;
+            }
+          }
+
+          .pictrue {
+            flex: 0.15;
+
+            image {
+              width: 68rpx;
+              height: 68rpx;
+              display: block;
+              border-radius: 50%;
+              margin: 0 auto;
+            }
+          }
+
+          .text {
+            color: #333;
+            flex: 0.5;
+          }
+
+          .people {
+            text-align: right;
+            flex: 0.27;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/pages/commission/components/account-info.vue b/src/pages/commission/components/account-info.vue
new file mode 100644
index 00000000..d904b8df
--- /dev/null
+++ b/src/pages/commission/components/account-info.vue
@@ -0,0 +1,125 @@
+<!-- 分销账户：展示基本统计信息 -->
+<template>
+  <view class="account-card">
+    <view class="account-card-box">
+      <view class="ss-flex ss-row-between card-box-header">
+        <view class="ss-flex">
+          <view class="header-title ss-m-r-16">账户信息</view>
+          <button
+            class="ss-reset-button look-btn ss-flex"
+            @tap="state.showMoney = !state.showMoney"
+          >
+            <uni-icons
+              :type="state.showMoney ? 'eye-filled' : 'eye-slash-filled'"
+              color="#A57A55"
+              size="20"
+            />
+          </button>
+        </view>
+        <view class="ss-flex" @tap="sheep.$router.go('/pages/commission/wallet')">
+          <view class="header-title ss-m-r-4">查看明细</view>
+          <text class="cicon-play-arrow" />
+        </view>
+      </view>
+
+      <!-- 收益 -->
+      <view class="card-content ss-flex">
+        <view class="ss-flex-1 ss-flex-col ss-col-center">
+          <view class="item-title">当前佣金(元)</view>
+          <view class="item-detail">
+            {{ state.showMoney ? fen2yuan(state.summary.brokeragePrice || 0) : '***' }}
+          </view>
+        </view>
+        <view class="ss-flex-1 ss-flex-col ss-col-center">
+          <view class="item-title">昨天的佣金(元)</view>
+          <view class="item-detail">
+            {{ state.showMoney ? fen2yuan(state.summary.yesterdayPrice || 0) : '***' }}
+          </view>
+        </view>
+        <view class="ss-flex-1 ss-flex-col ss-col-center">
+          <view class="item-title">累计已提(元)</view>
+          <view class="item-detail">
+            {{ state.showMoney ? fen2yuan(state.summary.withdrawPrice || 0) : '***' }}
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { computed, reactive, onMounted } from 'vue';
+  import BrokerageApi from '@/sheep/api/trade/brokerage';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+
+  const state = reactive({
+    showMoney: false,
+    summary: {},
+  });
+
+  onMounted(async () => {
+    let { code, data } = await BrokerageApi.getBrokerageUserSummary();
+    if (code === 0) {
+      state.summary = data || {}
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .account-card {
+    width: 694rpx;
+    margin: 0 auto;
+    padding: 2rpx;
+    background: linear-gradient(180deg, #ffffff 0.88%, #fff9ec 100%);
+    border-radius: 12rpx;
+    z-index: 3;
+    position: relative;
+
+    .account-card-box {
+      background: #ffefd6;
+
+      .card-box-header {
+        padding: 0 30rpx;
+        height: 72rpx;
+        box-shadow: 0px 2px 6px #f2debe;
+
+        .header-title {
+          font-size: 24rpx;
+          font-weight: 500;
+          color: #a17545;
+          line-height: 30rpx;
+        }
+
+        .cicon-play-arrow {
+          color: #a17545;
+          font-size: 24rpx;
+          line-height: 30rpx;
+        }
+      }
+
+      .card-content {
+        height: 190rpx;
+        background: #fdfae9;
+
+        .item-title {
+          font-size: 24rpx;
+          font-weight: 500;
+          color: #cba67e;
+          line-height: 30rpx;
+          margin-bottom: 24rpx;
+        }
+
+        .item-detail {
+          font-size: 36rpx;
+          font-family: OPPOSANS;
+          font-weight: bold;
+          color: #692e04;
+          line-height: 30rpx;
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/commission/components/account-type-select.vue b/src/pages/commission/components/account-type-select.vue
new file mode 100644
index 00000000..c39c7a72
--- /dev/null
+++ b/src/pages/commission/components/account-type-select.vue
@@ -0,0 +1,171 @@
+<!-- 提现方式的 select 组件 -->
+<template>
+  <su-popup :show="show" class="ss-checkout-counter-wrap" @close="hideModal">
+    <view class="ss-modal-box bg-white ss-flex-col">
+      <view class="modal-header ss-flex-col ss-col-left">
+        <text class="modal-title ss-m-b-20">选择提现方式</text>
+      </view>
+      <view class="modal-content ss-flex-1 ss-p-b-100">
+        <radio-group @change="onChange">
+          <label
+            class="container-list ss-p-l-34 ss-p-r-24 ss-flex ss-col-center ss-row-center"
+            v-for="(item, index) in typeList"
+            :key="index"
+          >
+            <view class="container-icon ss-flex ss-m-r-20">
+              <image :src="sheep.$url.static(item.icon)" />
+            </view>
+            <view class="ss-flex-1">{{ item.title }}</view>
+            <radio
+              :value="item.value"
+              color="var(--ui-BG-Main)"
+              :checked="item.value === state.currentValue"
+              :disabled="!methods.includes(parseInt(item.value))"
+            />
+          </label>
+        </radio-group>
+      </view>
+      <view class="modal-footer ss-flex ss-row-center ss-col-center">
+        <button class="ss-reset-button save-btn" @tap="onConfirm">确定</button>
+      </view>
+    </view>
+  </su-popup>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import sheep from '@/sheep';
+
+  const props = defineProps({
+    modelValue: {
+      type: Object,
+      default() {},
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    methods: {
+      // 开启的提现方式
+      type: Array,
+      default: [],
+    },
+  });
+  const emits = defineEmits(['update:modelValue', 'change', 'close']);
+  const state = reactive({
+    currentValue: '',
+  });
+
+  const typeList = [
+    {
+      icon: '/static/img/shop/pay/wallet.png',
+      title: '钱包余额',
+      value: '1',
+    },
+    {
+      icon: '/static/img/shop/pay/bank.png',
+      title: '银行卡转账',
+      value: '2',
+    },
+    {
+      icon: '/static/img/shop/pay/wechat.png',
+      title: '微信收款码', // 微信手动转账
+      value: '3',
+    },
+    {
+      icon: '/static/img/shop/pay/alipay.png',
+      title: '支付宝收款码', // 支付宝手动转账
+      value: '4',
+    },
+    {
+      icon: '/static/img/shop/pay/wechat_api.png',
+      title: '微信零钱', // 微信 API 转账
+      value: '5',
+    },
+    {
+      icon: '/static/img/shop/pay/alipay_api.png',
+      title: '支付宝余额', // 支付宝 API 转账
+      value: '6',
+    },
+  ];
+
+  function onChange(e) {
+    state.currentValue = e.detail.value;
+  }
+
+  const onConfirm = async () => {
+    if (state.currentValue === '') {
+      sheep.$helper.toast('请选择提现方式');
+      return;
+    }
+    // 赋值
+    emits('update:modelValue', {
+      type: state.currentValue,
+    });
+    // 关闭弹窗
+    emits('close');
+  };
+
+  const hideModal = () => {
+    emits('close');
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ss-modal-box {
+    border-radius: 30rpx 30rpx 0 0;
+    max-height: 1000rpx;
+
+    .modal-header {
+      position: relative;
+      padding: 60rpx 40rpx 40rpx;
+
+      .modal-title {
+        font-size: 32rpx;
+        font-weight: bold;
+      }
+
+      .close-icon {
+        position: absolute;
+        top: 10rpx;
+        right: 20rpx;
+        font-size: 46rpx;
+        opacity: 0.2;
+      }
+    }
+
+    .modal-content {
+      overflow-y: auto;
+
+      .container-list {
+        height: 96rpx;
+        border-bottom: 2rpx solid rgba(#dfdfdf, 0.5);
+        font-size: 28rpx;
+        font-weight: 500;
+        color: #333333;
+
+        .container-icon {
+          width: 36rpx;
+          height: 36rpx;
+        }
+      }
+    }
+
+    .modal-footer {
+      height: 120rpx;
+
+      .save-btn {
+        width: 710rpx;
+        height: 80rpx;
+        border-radius: 40rpx;
+        background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+        color: $white;
+      }
+    }
+  }
+
+  image {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/src/pages/commission/components/commission-auth.vue b/src/pages/commission/components/commission-auth.vue
new file mode 100644
index 00000000..9a484fad
--- /dev/null
+++ b/src/pages/commission/components/commission-auth.vue
@@ -0,0 +1,101 @@
+<!-- 分销权限弹窗：再没有权限时，进行提示  -->
+<template>
+  <su-popup
+    :show="state.show"
+    type="center"
+    round="10"
+    @close="state.show = false"
+    :isMaskClick="false"
+    maskBackgroundColor="rgba(0, 0, 0, 0.7)"
+  >
+    <view class="notice-box">
+      <view class="img-wrap">
+        <image
+          class="notice-img"
+          :src="sheep.$url.static('/static/img/shop/commission/forbidden.png')"
+          mode="aspectFill"
+        />
+      </view>
+      <view class="notice-title"> 抱歉！您没有分销权限 </view>
+      <view class="notice-detail"> 该功能暂不可用 </view>
+      <button
+        class="ss-reset-button notice-btn ui-Shadow-Main ui-BG-Main-Gradient"
+        @tap="sheep.$router.back()"
+      >
+        知道了
+      </button>
+      <button class="ss-reset-button back-btn" @tap="sheep.$router.back()"> 返回 </button>
+    </view>
+  </su-popup>
+</template>
+
+<script setup>
+  import { onShow } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import { reactive } from 'vue';
+  import BrokerageApi from '@/sheep/api/trade/brokerage';
+
+  const state = reactive({
+    show: false,
+  });
+
+  onShow(async () => {
+    // 读取是否有分销权限
+    const { code, data } = await BrokerageApi.getBrokerageUser();
+    if (code === 0 && !data?.brokerageEnabled) {
+      state.show = true;
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .notice-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    width: 612rpx;
+    min-height: 658rpx;
+    background: #ffffff;
+    padding: 30rpx;
+    border-radius: 20rpx;
+    .img-wrap {
+      margin-bottom: 50rpx;
+      .notice-img {
+        width: 180rpx;
+        height: 170rpx;
+      }
+    }
+    .notice-title {
+      font-size: 35rpx;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 28rpx;
+    }
+    .notice-detail {
+      font-size: 28rpx;
+      font-weight: 400;
+      color: #999999;
+      line-height: 36rpx;
+      margin-bottom: 50rpx;
+    }
+    .notice-btn {
+      width: 492rpx;
+      line-height: 70rpx;
+      border-radius: 35rpx;
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #ffffff;
+      margin-bottom: 10rpx;
+    }
+    .back-btn {
+      width: 492rpx;
+      line-height: 70rpx;
+      font-size: 28rpx;
+      font-weight: 500;
+      color: var(--ui-BG-Main-gradient);
+      background: none;
+    }
+  }
+</style>
diff --git a/src/pages/commission/components/commission-info.vue b/src/pages/commission/components/commission-info.vue
new file mode 100644
index 00000000..79f7cd86
--- /dev/null
+++ b/src/pages/commission/components/commission-info.vue
@@ -0,0 +1,114 @@
+<!-- 分销商信息  -->
+<template>
+	<!-- 用户资料 -->
+	<view class="user-card ss-flex ss-col-bottom">
+		<view class="card-top ss-flex ss-row-between">
+			<view class="ss-flex">
+				<view class="head-img-box">
+					<image class="head-img" :src="sheep.$url.cdn(userInfo.avatar)" mode="aspectFill"></image>
+				</view>
+				<view class="ss-flex-col">
+					<view class="user-name">{{ userInfo.nickname }}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import sheep from '@/sheep';
+	import { computed, reactive } from 'vue';
+
+	const userInfo = computed(() => sheep.$store('user').userInfo);
+	const headerBg = sheep.$url.css('/static/img/shop/commission/background.png');
+
+	const state = reactive({
+		showMoney: false,
+	});
+
+</script>
+
+<style lang="scss" scoped>
+	// 用户资料卡片
+	.user-card {
+		width: 700rpx;
+		height: 192rpx;
+		margin: 0 auto;
+		margin-top: -88rpx;
+		padding-top: 88rpx;
+		background: v-bind(headerBg) no-repeat;
+		background-size: 100% 100%;
+
+		.head-img-box {
+			margin-right: 20rpx;
+			width: 100rpx;
+			height: 100rpx;
+			border-radius: 50%;
+			position: relative;
+			background: #fce0ad;
+
+			.head-img {
+				width: 92rpx;
+				height: 92rpx;
+				border-radius: 50%;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+			}
+		}
+
+		.card-top {
+			box-sizing: border-box;
+			padding-bottom: 34rpx;
+
+			.user-name {
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #692e04;
+				line-height: 30rpx;
+				margin-bottom: 20rpx;
+			}
+
+			.log-btn {
+				width: 84rpx;
+				height: 42rpx;
+				border: 2rpx solid rgba(#ffffff, 0.33);
+				border-radius: 21rpx;
+				font-size: 22rpx;
+				font-weight: 400;
+				color: #ffffff;
+				margin-bottom: 20rpx;
+			}
+
+			.look-btn {
+				color: #fff;
+				width: 40rpx;
+				height: 40rpx;
+			}
+		}
+
+		.user-info-box {
+			.tag-box {
+				background: #ff6000;
+				border-radius: 18rpx;
+				line-height: 36rpx;
+
+				.tag-img {
+					width: 36rpx;
+					height: 36rpx;
+					border-radius: 50%;
+					margin-left: -2rpx;
+				}
+
+				.tag-title {
+					font-size: 24rpx;
+					padding: 0 10rpx;
+					font-weight: 500;
+					line-height: 36rpx;
+					color: #fff;
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/pages/commission/components/commission-log.vue b/src/pages/commission/components/commission-log.vue
new file mode 100644
index 00000000..cee3b3cb
--- /dev/null
+++ b/src/pages/commission/components/commission-log.vue
@@ -0,0 +1,181 @@
+<!-- 分销首页：明细列表  -->
+<template>
+  <view class="distribution-log-wrap">
+    <view class="header-box">
+      <image class="header-bg" :src="sheep.$url.static('/static/img/shop/commission/title2.png')" />
+      <view class="ss-flex header-title">
+        <view class="title">实时动态</view>
+        <text class="cicon-forward" />
+      </view>
+    </view>
+    <scroll-view
+      scroll-y="true"
+      @scrolltolower="loadmore"
+      class="scroll-box log-scroll"
+      scroll-with-animation="true"
+    >
+      <view v-if="state.pagination.list">
+        <view
+          class="log-item-box ss-flex ss-row-between"
+          v-for="item in state.pagination.list"
+          :key="item.id"
+        >
+          <view class="log-item-wrap">
+            <view class="log-item ss-flex ss-ellipsis-1 ss-col-center">
+              <view class="ss-flex ss-col-center">
+                <image
+                  class="log-img"
+                  :src="sheep.$url.static('/static/img/shop/avatar/notice.png')"
+                  mode="aspectFill"
+                />
+              </view>
+              <view class="log-text ss-ellipsis-1">
+                {{ item.title }} {{ fen2yuan(item.price) }} 元
+              </view>
+            </view>
+          </view>
+          <text class="log-time">{{ dayjs(item.createTime).fromNow() }}</text>
+        </view>
+      </view>
+
+      <!-- 加载更多 -->
+      <uni-load-more
+        v-if="state.pagination.total > 0"
+        :status="state.loadStatus"
+        color="#333333"
+        @tap="loadmore"
+      />
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { reactive } from 'vue';
+  import _ from 'lodash-es';
+  import dayjs from 'dayjs';
+  import BrokerageApi from '@/sheep/api/trade/brokerage';
+  import { fen2yuan } from '../../../sheep/hooks/useGoods';
+
+  const state = reactive({
+    loadStatus: '',
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 8,
+    },
+  });
+
+  async function getLog() {
+    state.loadStatus = 'loading';
+    const { code, data } = await BrokerageApi.getBrokerageRecordPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  getLog();
+
+  // 加载更多
+  function loadmore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getLog();
+  }
+</script>
+
+<style lang="scss" scoped>
+  .distribution-log-wrap {
+    width: 690rpx;
+    margin: 0 auto;
+    margin-bottom: 20rpx;
+    border-radius: 12rpx;
+    z-index: 3;
+    position: relative;
+
+    .header-box {
+      width: 690rpx;
+      height: 76rpx;
+      position: relative;
+
+      .header-bg {
+        width: 690rpx;
+        height: 76rpx;
+      }
+
+      .header-title {
+        position: absolute;
+        left: 20rpx;
+        top: 24rpx;
+      }
+
+      .title {
+        font-size: 28rpx;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 30rpx;
+      }
+
+      .cicon-forward {
+        font-size: 30rpx;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 30rpx;
+      }
+    }
+
+    .log-scroll {
+      height: 600rpx;
+      background: #fdfae9;
+      padding: 10rpx 20rpx 0;
+      box-sizing: border-box;
+      border-radius: 0 0 12rpx 12rpx;
+
+      .log-item-box {
+        margin-bottom: 20rpx;
+
+        .log-time {
+          // margin-left: 30rpx;
+          text-align: right;
+          font-size: 24rpx;
+          font-family: OPPOSANS;
+          font-weight: 400;
+          color: #c4c4c4;
+        }
+      }
+
+      .loadmore-wrap {
+        // line-height: 80rpx;
+      }
+
+      .log-item {
+        // background: rgba(#ffffff, 0.2);
+        border-radius: 24rpx;
+        padding: 6rpx 20rpx 6rpx 12rpx;
+
+        .log-img {
+          width: 40rpx;
+          height: 40rpx;
+          border-radius: 50%;
+          margin-right: 10rpx;
+        }
+
+        .log-text {
+          max-width: 480rpx;
+          font-size: 24rpx;
+          font-weight: 500;
+          color: #333333;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/pages/commission/components/commission-menu.vue b/src/pages/commission/components/commission-menu.vue
new file mode 100644
index 00000000..42498f5e
--- /dev/null
+++ b/src/pages/commission/components/commission-menu.vue
@@ -0,0 +1,145 @@
+<!-- 分销：商菜单栏 -->
+<template>
+  <view class="menu-box ss-flex-col">
+    <view class="header-box">
+      <image class="header-bg" :src="sheep.$url.static('/static/img/shop/commission/title1.png')" />
+      <view class="ss-flex header-title">
+        <view class="title">功能专区</view>
+        <text class="cicon-forward"></text>
+      </view>
+    </view>
+    <view class="menu-list ss-flex ss-flex-wrap">
+      <view
+        v-for="(item, index) in state.menuList"
+        :key="index"
+        class="item-box ss-flex-col ss-col-center"
+        @tap="sheep.$router.go(item.path)"
+      >
+        <image
+          class="menu-icon ss-m-b-10"
+          :src="sheep.$url.static(item.img)"
+          mode="aspectFill"
+        ></image>
+        <view>{{ item.title }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { reactive } from 'vue';
+
+  const state = reactive({
+    menuList: [
+      {
+        img: '/static/img/shop/commission/commission_icon1.png',
+        title: '我的团队',
+        path: '/pages/commission/team',
+      },
+      {
+        img: '/static/img/shop/commission/commission_icon2.png',
+        title: '佣金明细',
+        path: '/pages/commission/wallet',
+      },
+      {
+        img: '/static/img/shop/commission/commission_icon3.png',
+        title: '分销订单',
+        path: '/pages/commission/order',
+      },
+      {
+        img: '/static/img/shop/commission/commission_icon4.png',
+        title: '推广商品',
+        path: '/pages/commission/goods',
+      },
+      // {
+      //   img: '/static/img/shop/commission/commission_icon5.png',
+      //   title: '我的资料',
+      //   path: '/pages/commission/apply',
+      //   isAgentFrom: true,
+      // },
+      {
+        img: '/static/img/shop/commission/commission_icon7.png',
+        title: '邀请海报',
+        path: 'action:showShareModal',
+      },
+      {
+        img: '/static/img/shop/commission/commission_icon8.png',
+        title: '推广排行',
+        path: '/pages/commission/promoter',
+      },
+      {
+        img: '/static/img/shop/commission/commission_icon9.png',
+        title: '佣金排行',
+        path: '/pages/commission/commission-ranking',
+      },
+    ],
+  });
+</script>
+
+<style lang="scss" scoped>
+  .menu-box {
+    margin: 0 auto;
+    width: 690rpx;
+    margin-bottom: 20rpx;
+    margin-top: 20rpx;
+    border-radius: 12rpx;
+    z-index: 3;
+    position: relative;
+  }
+
+  .header-box {
+    width: 690rpx;
+    height: 76rpx;
+    position: relative;
+
+    .header-bg {
+      width: 690rpx;
+      height: 76rpx;
+    }
+
+    .header-title {
+      position: absolute;
+      left: 20rpx;
+      top: 24rpx;
+    }
+
+    .title {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 30rpx;
+    }
+
+    .cicon-forward {
+      font-size: 30rpx;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 30rpx;
+    }
+  }
+
+  .menu-list {
+    padding: 50rpx 0 10rpx 0;
+    background: #fdfae9;
+    border-radius: 0 0 12rpx 12rpx;
+  }
+
+  .item-box {
+    width: 25%;
+    margin-bottom: 40rpx;
+  }
+
+  .menu-icon {
+    width: 68rpx;
+    height: 68rpx;
+    background: #ffffff;
+    border-radius: 50%;
+  }
+
+  .menu-title {
+    font-size: 26rpx;
+    font-weight: 500;
+    color: #ffffff;
+  }
+</style>
diff --git a/src/pages/commission/goods.vue b/src/pages/commission/goods.vue
new file mode 100644
index 00000000..f4638f7f
--- /dev/null
+++ b/src/pages/commission/goods.vue
@@ -0,0 +1,165 @@
+<!-- 分销商品列表  -->
+<template>
+  <s-layout title="推广商品" :onShareAppMessage="state.shareInfo">
+    <view class="goods-item ss-m-20" v-for="item in state.pagination.list" :key="item.id">
+      <s-goods-item
+        size="lg"
+        :img="item.picUrl"
+        :title="item.name"
+        :subTitle="item.introduction"
+        :price="item.price"
+        :originPrice="item.marketPrice"
+        priceColor="#333"
+        @tap="sheep.$router.go('/pages/goods/index', { id: item.id })"
+      >
+        <template #rightBottom>
+          <view class="ss-flex ss-row-between">
+            <view class="commission-num" v-if="item.brokerageMinPrice === undefined">
+              预计佣金：计算中
+            </view>
+            <view
+              class="commission-num"
+              v-else-if="item.brokerageMinPrice === item.brokerageMaxPrice"
+            >
+              预计佣金：{{ fen2yuan(item.brokerageMinPrice) }}
+            </view>
+            <view class="commission-num" v-else>
+              预计佣金：{{ fen2yuan(item.brokerageMinPrice) }} ~
+              {{ fen2yuan(item.brokerageMaxPrice) }}
+            </view>
+            <button
+              class="ss-reset-button share-btn ui-BG-Main-Gradient"
+              @tap.stop="onShareGoods(item)"
+            >
+              分享赚
+            </button>
+          </view>
+        </template>
+      </s-goods-item>
+    </view>
+    <s-empty
+      v-if="state.pagination.total === 0"
+      icon="/static/goods-empty.png"
+      text="暂无推广商品"
+    />
+    <!-- 加载更多 -->
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import $share from '@/sheep/platform/share';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import _ from 'lodash-es';
+  import { showShareModal } from '@/sheep/hooks/useModal';
+  import SpuApi from '@/sheep/api/product/spu';
+  import BrokerageApi from '@/sheep/api/trade/brokerage';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+
+  const state = reactive({
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 8,
+    },
+    loadStatus: '',
+    shareInfo: {},
+  });
+
+  function onShareGoods(goodsInfo) {
+    state.shareInfo = $share.getShareInfo(
+      {
+        title: goodsInfo.name,
+        image: sheep.$url.cdn(goodsInfo.picUrl),
+        desc: goodsInfo.introduction,
+        params: {
+          page: '2',
+          query: goodsInfo.id,
+        },
+      },
+      {
+        type: 'goods', // 商品海报
+        title: goodsInfo.name, // 商品名称
+        image: sheep.$url.cdn(goodsInfo.picUrl), // 商品主图
+        price: fen2yuan(goodsInfo.price), // 商品价格
+        original_price: fen2yuan(goodsInfo.marketPrice), // 商品原价
+      },
+    );
+    showShareModal();
+  }
+
+  async function getGoodsList() {
+    state.loadStatus = 'loading';
+    let { code, data } = await SpuApi.getSpuPage({
+      pageSize: state.pagination.pageSize,
+      pageNo: state.pagination.pageNo,
+    });
+
+    if (code !== 0) {
+      state.loadStatus = 'error'; // 处理错误状态
+      return;
+    }
+
+    // 使用 Promise.all 来等待所有佣金请求完成
+    await Promise.all(
+      data.list.map(async (item) => {
+        try {
+          const res = await BrokerageApi.getProductBrokeragePrice(item.id);
+          item.brokerageMinPrice = res.data.brokerageMinPrice;
+          item.brokerageMaxPrice = res.data.brokerageMaxPrice;
+        } catch (error) {
+          console.error(`获取商品【${item.name}】的佣金时出错：`, error);
+        }
+      }),
+    );
+
+    // 在所有请求完成后合并列表和更新状态
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  onLoad(() => {
+    getGoodsList();
+  });
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getGoodsList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .goods-item {
+    .commission-num {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: $red;
+    }
+
+    .share-btn {
+      width: 120rpx;
+      height: 50rpx;
+      border-radius: 25rpx;
+    }
+  }
+</style>
diff --git a/src/pages/commission/index.vue b/src/pages/commission/index.vue
new file mode 100644
index 00000000..28c077cc
--- /dev/null
+++ b/src/pages/commission/index.vue
@@ -0,0 +1,57 @@
+<!-- 分销中心  -->
+<template>
+  <s-layout
+    navbar="inner"
+    class="index-wrap"
+    title="分销中心"
+    :bgStyle="bgStyle"
+    :onShareAppMessage="shareInfo"
+  >
+    <!-- 分销商信息 -->
+    <commission-info />
+    <!-- 账户信息 -->
+    <account-info />
+    <!-- 菜单栏 -->
+    <commission-menu />
+    <!-- 分销记录 -->
+    <commission-log />
+
+    <!-- 权限弹窗 -->
+    <commission-auth />
+  </s-layout>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import commissionInfo from './components/commission-info.vue';
+  import accountInfo from './components/account-info.vue';
+  import commissionLog from './components/commission-log.vue';
+  import commissionMenu from './components/commission-menu.vue';
+  import commissionAuth from './components/commission-auth.vue';
+  import sheep from '@/sheep';
+  import { SharePageEnum } from '@/sheep/helper/const';
+
+  /** 分销邀请 */
+  const shareInfo = computed(() => {
+    return sheep.$platform.share.getShareInfo(
+      {
+        params: {
+          page: SharePageEnum.HOME.value, // 用户通邀请进入到首页
+        },
+      },
+      {
+        type: 'user',
+      },
+    );
+  });
+
+  const bgStyle = {
+    color: '#F7D598',
+  };
+</script>
+
+<style lang="scss" scoped>
+  :deep(.page-main) {
+    background-size: 100% 100% !important;
+  }
+</style>
diff --git a/src/pages/commission/order.vue b/src/pages/commission/order.vue
new file mode 100644
index 00000000..94be9b7f
--- /dev/null
+++ b/src/pages/commission/order.vue
@@ -0,0 +1,332 @@
+<!-- 分销 - 订单明细 -->
+<template>
+  <s-layout title="分销订单" :class="state.scrollTop ? 'order-warp' : ''" navbar="inner">
+    <view
+      class="header-box"
+      :style="[
+        {
+          marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+          paddingTop: Number(statusBarHeight + 108) + 'rpx',
+        },
+      ]"
+    >
+      <!-- 团队数据总览 -->
+      <view class="team-data-box ss-flex ss-col-center ss-row-between" style="width: 100%">
+        <view class="data-card" style="width: 100%">
+          <view class="total-item" style="width: 100%">
+            <view class="item-title" style="text-align: center">累计推广订单（单）</view>
+            <view class="total-num" style="text-align: center">
+              {{ state.totals }}
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- tab -->
+    <su-sticky bgColor="#fff">
+      <su-tabs
+        :list="tabMaps"
+        :scrollable="false"
+        :current="state.currentTab"
+        @change="onTabsChange"
+      >
+      </su-tabs>
+    </su-sticky>
+
+    <!-- 订单 -->
+    <view class="order-box">
+      <view class="order-item" v-for="item in state.pagination.list" :key="item">
+        <view class="order-header">
+          <view class="no-box ss-flex ss-col-center ss-row-between">
+            <text class="order-code">订单编号：{{ item.bizId }}</text>
+            <text class="order-state">
+              {{ item.status === 0 ? '待结算' : item.status === 1 ? '已结算' : '已取消' }}
+              ( 佣金 {{ fen2yuan(item.price) }} 元 )
+            </text>
+          </view>
+          <view class="order-from ss-flex ss-col-center ss-row-between">
+            <view class="from-user ss-flex ss-col-center">
+              <text>{{ item.title }}</text>
+            </view>
+            <view class="order-time">
+              {{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 数据为空 -->
+      <s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" />
+      <!-- 加载更多 -->
+      <uni-load-more
+        v-if="state.pagination.total > 0"
+        :status="state.loadStatus"
+        :content-text="{
+          contentdown: '上拉加载更多',
+        }"
+        @tap="loadMore"
+      />
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import _ from 'lodash-es';
+  import { resetPagination } from '@/sheep/helper/utils';
+  import BrokerageApi from '@/sheep/api/trade/brokerage';
+  import { fen2yuan } from '../../sheep/hooks/useGoods';
+
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
+
+  onPageScroll((e) => {
+    state.scrollTop = e.scrollTop <= 100;
+  });
+
+  const state = reactive({
+    totals: 0, // 累计推广订单（单）
+    scrollTop: false,
+
+    currentTab: 0,
+    loadStatus: '',
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 8,
+    },
+  });
+
+  const tabMaps = [
+    {
+      name: '全部',
+      value: -1,
+    },
+    {
+      name: '待结算',
+      value: 0, // 待结算
+    },
+    {
+      name: '已结算',
+      value: 1, // 已结算
+    },
+  ];
+
+  // 切换选项卡
+  function onTabsChange(e) {
+    resetPagination(state.pagination);
+    state.currentTab = e.index;
+    getOrderList();
+  }
+
+  // 获取订单列表
+  async function getOrderList() {
+    state.loadStatus = 'loading';
+    const tab = tabMaps[state.currentTab];
+    const queryParams = {
+      pageSize: state.pagination.pageSize,
+      pageNo: state.pagination.pageNo,
+      bizType: 1, // 获得推广佣金
+      status: tab.value,
+    };
+    if (tab.value < 0) {
+      delete queryParams.status;
+    }
+    const { code, data } = await BrokerageApi.getBrokerageRecordPage(queryParams);
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+    if (state.currentTab === 0) {
+      state.totals = data.total;
+    }
+  }
+
+  onLoad(() => {
+    getOrderList();
+  });
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getOrderList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .header-box {
+    box-sizing: border-box;
+    padding: 0 20rpx 20rpx 20rpx;
+    width: 750rpx;
+    background: v-bind(headerBg) no-repeat,
+      linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    background-size: 750rpx 100%;
+
+    // 团队信息总览
+    .team-data-box {
+      .data-card {
+        width: 305rpx;
+        background: #ffffff;
+        border-radius: 20rpx;
+        padding: 20rpx;
+
+        .total-item {
+          margin-bottom: 30rpx;
+
+          .item-title {
+            font-size: 24rpx;
+            font-weight: 500;
+            color: #999999;
+            line-height: normal;
+            margin-bottom: 20rpx;
+          }
+
+          .total-num {
+            font-size: 38rpx;
+            font-weight: 500;
+            color: #333333;
+            font-family: OPPOSANS;
+          }
+        }
+
+        .category-num {
+          font-size: 26rpx;
+          font-weight: 500;
+          color: #333333;
+          font-family: OPPOSANS;
+        }
+      }
+    }
+
+    // 直推
+    .direct-box {
+      margin-top: 20rpx;
+
+      .direct-item {
+        width: 340rpx;
+        background: #ffffff;
+        border-radius: 20rpx;
+        padding: 20rpx;
+        box-sizing: border-box;
+
+        .item-title {
+          font-size: 22rpx;
+          font-weight: 500;
+          color: #999999;
+          margin-bottom: 6rpx;
+        }
+
+        .item-value {
+          font-size: 38rpx;
+          font-weight: 500;
+          color: #333333;
+          font-family: OPPOSANS;
+        }
+      }
+    }
+  }
+
+  // 订单
+  .order-box {
+    .order-item {
+      background: #ffffff;
+      border-radius: 10rpx;
+      margin: 20rpx;
+
+      .order-footer {
+        padding: 20rpx;
+        font-size: 24rpx;
+        color: #999;
+      }
+
+      .order-header {
+        .no-box {
+          padding: 20rpx;
+
+          .order-code {
+            font-size: 26rpx;
+            font-weight: 500;
+            color: #333333;
+          }
+
+          .order-state {
+            font-size: 26rpx;
+            font-weight: 500;
+            color: var(--ui-BG-Main);
+          }
+        }
+
+        .order-from {
+          padding: 20rpx;
+
+          .from-user {
+            font-size: 24rpx;
+            font-weight: 400;
+            color: #666666;
+
+            .user-avatar {
+              width: 26rpx;
+              height: 26rpx;
+              border-radius: 50%;
+              margin-right: 8rpx;
+            }
+
+            .user-name {
+              font-size: 24rpx;
+              font-weight: 400;
+              color: #999999;
+            }
+          }
+
+          .order-time {
+            font-size: 24rpx;
+            font-weight: 400;
+            color: #999999;
+          }
+        }
+      }
+
+      .commission-box {
+        .name {
+          font-size: 24rpx;
+          font-weight: 400;
+          color: #999999;
+        }
+      }
+
+      .commission-num {
+        font-size: 30rpx;
+        font-weight: 500;
+        color: $red;
+        font-family: OPPOSANS;
+
+        &::before {
+          content: '￥';
+          font-size: 22rpx;
+        }
+      }
+
+      .order-status {
+        line-height: 30rpx;
+        padding: 0 10rpx;
+        border-radius: 30rpx;
+        margin-left: 20rpx;
+        font-size: 24rpx;
+        color: var(--ui-BG-Main);
+      }
+    }
+  }
+</style>
diff --git a/src/pages/commission/promoter.vue b/src/pages/commission/promoter.vue
new file mode 100644
index 00000000..2dfcc2b3
--- /dev/null
+++ b/src/pages/commission/promoter.vue
@@ -0,0 +1,288 @@
+<template>
+  <s-layout title="推广人排行榜">
+    <view class="promoter-rank">
+      <view class="nav">
+        <view
+          class="item"
+          :class="state.currentTab === index ? 'active' : ''"
+          v-for="(item, index) in tabMaps"
+          :key="index"
+          @click="switchTap(index)"
+        >
+          {{ item }}
+        </view>
+      </view>
+      <view class="top-list">
+        <template v-for="(item, index) in state.pagination.list" :key="index">
+          <view v-if="index < 3" class="item">
+            <view class="pictrue">
+              <view class="num">
+                <text>{{ index + 1 }}</text>
+              </view>
+              <image class="image" :src="item.avatar"></image>
+            </view>
+            <view class="people">{{ item.brokerageUserCount }}人</view>
+            <view class="nickname">{{ item.nickname }}</view>
+          </view>
+        </template>
+      </view>
+    </view>
+    <view class="other-list">
+      <template v-for="(item, index) in state.pagination.list" :key="index">
+        <view class="item" v-if="index > 2">
+          <view class="num">{{ index + 1 }}</view>
+          <view class="pictrue">
+            <image class="image" :src="item.avatar"></image>
+          </view>
+          <view class="nickname">{{ item.nickname }}</view>
+          <view class="people">{{ item.brokerageUserCount }}人</view>
+        </view>
+      </template>
+    </view>
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import _ from 'lodash-es';
+  import BrokerageApi from '@/sheep/api/trade/brokerage';
+  import { resetPagination, getWeekTimes, getMonthTimes } from '@/sheep/helper/utils';
+
+  const tabMaps = ['周排行', '月排行'];
+
+  const state = reactive({
+    currentTab: 0,
+    times: [],
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 10,
+    },
+    loadStatus: '',
+  });
+
+  function switchTap(index) {
+    if (state.currentTab === index) {
+      return;
+    }
+    state.currentTab = index;
+    resetPagination(state.pagination);
+    calculateTimes();
+    getRankList();
+  }
+
+  async function getRankList() {
+    state.loadStatus = 'loading';
+    // 查询
+    const { code, data } = await BrokerageApi.getBrokerageUserRankPageByUserCount({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      'times[0]': state.times[0],
+      'times[1]': state.times[1],
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => loadMore());
+
+  function calculateTimes() {
+    let times;
+    if (state.currentTab === 0) {
+      times = getWeekTimes();
+    } else {
+      times = getMonthTimes();
+    }
+    state.times = [formatDate(times[0]), formatDate(times[1])];
+  }
+
+  onLoad(function () {
+    calculateTimes();
+    getRankList();
+  });
+
+  function formatDate(date) {
+    return sheep.$helper.timeFormat(date, 'yyyy-mm-dd hh:MM:ss');
+  }
+</script>
+
+<style lang="scss" scoped>
+  .promoter-rank {
+    padding: 45rpx 0 30rpx 0;
+    background: url('data:image/jpeg;base64,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')
+      no-repeat;
+    width: 100%;
+    background-size: 100% 100%;
+
+    .nav {
+      display: flex;
+      width: 450rpx;
+      height: 66rpx;
+      border: 1px solid #fff;
+      border-radius: 33rpx;
+      font-size: 30rpx;
+      color: #fff;
+      margin: 0 auto;
+      overflow: hidden;
+
+      .item {
+        width: 50%;
+        height: 100%;
+        text-align: center;
+        line-height: 60rpx;
+
+        &.active {
+          color: #333;
+          background-color: white;
+        }
+      }
+    }
+
+    .top-list {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-top: 50rpx;
+
+      .item {
+        margin: 0 20rpx;
+
+        .pictrue {
+          position: relative;
+          background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIgAAACxCAYAAAAfz/U3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNGUyNzRkOS00YmQ4LTUzNGItYWZkZS02ZTlmMTgxYmZlYWUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODVBODg2MzdEOEU1MTFFOTg4RTM5OTQyQjhDODMzMTciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODVBODg2MzZEOEU1MTFFOTg4RTM5OTQyQjhDODMzMTciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTAxZGU2OWItNWM2My0xOTQ1LTllZmMtMGIzNjcwYTFmNWUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE0ZTI3NGQ5LTRiZDgtNTM0Yi1hZmRlLTZlOWYxODFiZmVhZSIv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')
+            no-repeat;
+          background-size: 100% 100%;
+          width: 136rpx;
+          height: 177rpx;
+          position: relative;
+          margin: 0 auto;
+          text-align: center;
+
+          .image {
+            display: inline-block;
+            margin-top: 47rpx;
+            width: 130rpx;
+            height: 130rpx;
+            border-radius: 50%;
+          }
+
+          .num {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            text-align: center;
+
+            text {
+              display: inline-block;
+              width: 30rpx;
+              height: 30rpx;
+              line-height: 30rpx;
+              color: white;
+              border-radius: 50%;
+              overflow: hidden;
+              font-size: 22rpx;
+              background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+            }
+          }
+        }
+
+        .nickname {
+          color: white;
+          font-weight: 20rpx;
+          text-align: center;
+          max-width: 200rpx;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .people {
+          text-align: center;
+          color: white;
+          font-weight: 20rpx;
+        }
+
+        &:first-second {
+          .pictrue {
+            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAADNCAYAAABNahkfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNGUyNzRkOS00YmQ4LTUzNGItYWZkZS02ZTlmMTgxYmZlYWUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUU1MTlBRjBEOEU1MTFFOUEwRjRGRTQyMUZGNDk5NEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUU1MTlBRUZEOEU1MTFFOUEwRjRGRTQyMUZGNDk5NEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTAxZGU2OWItNWM2My0xOTQ1LTllZmMtMGIzNjcwYTFmNWUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE0ZTI3NGQ5LTRiZDgtNTM0Yi1hZmRlLTZlOWYxODFiZmVhZSIv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')
+              no-repeat;
+          }
+        }
+
+        &:first-third {
+          .pictrue {
+            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIgAAACxCAYAAAAfz/U3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNGUyNzRkOS00YmQ4LTUzNGItYWZkZS02ZTlmMTgxYmZlYWUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTExRTlGRDlEOEU2MTFFOTg0MDg4RjQ5MDM3QjNGRTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTExRTlGRDhEOEU2MTFFOTg0MDg4RjQ5MDM3QjNGRTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTAxZGU2OWItNWM2My0xOTQ1LTllZmMtMGIzNjcwYTFmNWUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE0ZTI3NGQ5LTRiZDgtNTM0Yi1hZmRlLTZlOWYxODFiZmVhZSIv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')
+              no-repeat;
+          }
+        }
+      }
+    }
+  }
+
+  .other-list {
+    margin-top: 20rpx;
+    padding: 0 16rpx;
+
+    .item {
+      border-radius: 14rpx;
+      margin-bottom: 12rpx;
+      padding: 15rpx 20rpx;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      background: white;
+
+      .num {
+        flex: 0.1;
+        text-align: center;
+      }
+
+      .pictrue {
+        flex: 0.2;
+        display: flex;
+        align-items: center;
+
+        .image {
+          width: 60rpx;
+          height: 60rpx;
+          border-radius: 50%;
+        }
+      }
+
+      .nickname {
+        flex: 0.5;
+      }
+
+      .people {
+        flex: 0.2;
+        text-align: center;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/commission/team.vue b/src/pages/commission/team.vue
new file mode 100644
index 00000000..ba86814d
--- /dev/null
+++ b/src/pages/commission/team.vue
@@ -0,0 +1,604 @@
+<!-- 页面 -->
+<template>
+  <s-layout title="我的团队" :class="state.scrollTop ? 'team-wrap' : ''" navbar="inner">
+    <view
+      class="header-box"
+      :style="[
+        {
+          marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+          paddingTop: Number(statusBarHeight + 108) + 'rpx',
+        },
+      ]"
+    >
+      <!-- 推广数据总览 -->
+      <view class="team-data-box ss-flex ss-col-center ss-row-between" style="width: 100%">
+        <view class="data-card" style="width: 100%">
+          <view class="total-item" style="width: 100%">
+            <view class="item-title" style="text-align: center">推广人数</view>
+            <view class="total-num" style="text-align: center">
+              {{
+                state.summary.firstBrokerageUserCount + state.summary.secondBrokerageUserCount || 0
+              }}
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="promoter-list">
+      <!--<view
+        class="promoterHeader bg-color"
+        style="backgroundcolor: #e93323 !important; height: 218rpx; color: #fff"
+      >
+        <view class="headerCon acea-row row-between" style="padding: 28px 29px 0 29px">
+          <view>
+            <view class="name" style="color: #fff">推广人数</view>
+            <view>
+              <text class="num" style="color: #fff">
+                {{
+                  state.summary.firstBrokerageUserCount + state.summary.secondBrokerageUserCount ||
+                  0
+                }}
+              </text>
+              人
+            </view>
+          </view>
+          <view class="iconfont icon-tuandui" />
+        </view>
+      </view>-->
+      <view style="padding: 0 20rpx">
+        <view class="nav acea-row row-around l1" style="margin-top: 20rpx">
+          <view :class="state.level == 1 ? 'item on' : 'item'" @click="setType(1)">
+            一级({{ state.summary.firstBrokerageUserCount || 0 }})
+          </view>
+          <view :class="state.level == 2 ? 'item on' : 'item'" @click="setType(2)">
+            二级({{ state.summary.secondBrokerageUserCount || 0 }})
+          </view>
+        </view>
+        <view
+          class="search acea-row row-between-wrapper"
+          style="display: flex; height: 100rpx; align-items: center"
+        >
+          <view class="input">
+            <input
+              placeholder="点击搜索会员名称"
+              v-model="state.nickname"
+              confirm-type="search"
+              name="search"
+              @confirm="submitForm"
+            />
+          </view>
+          <image
+            :src="sheep.$url.static('/static/img/shop/search.png')"
+            mode=""
+            style="width: 60rpx; height: 64rpx"
+            @click="submitForm"
+          />
+        </view>
+        <view class="list">
+          <view class="sortNav acea-row row-middle" style="display: flex; align-items: center">
+            <view
+              class="sortItem"
+              @click="setSort('userCount', 'asc')"
+              v-if="sort === 'userCountDESC'"
+            >
+              团队排序
+              <image :src="sheep.$url.static('/static/img/shop/sort1.png')" />
+            </view>
+            <view
+              class="sortItem"
+              @click="setSort('userCount', 'desc')"
+              v-else-if="sort === 'userCountASC'"
+            >
+              团队排序
+              <image :src="sheep.$url.static('/static/img/shop/sort3.png')" />
+            </view>
+            <view class="sortItem" @click="setSort('userCount', 'desc')" v-else>
+              团队排序
+              <image :src="sheep.$url.static('/static/img/shop/sort2.png')" />
+            </view>
+            <view class="sortItem" @click="setSort('price', 'asc')" v-if="sort === 'priceDESC'">
+              金额排序
+              <image :src="sheep.$url.static('/static/img/shop/sort1.png')" />
+            </view>
+            <view
+              class="sortItem"
+              @click="setSort('price', 'desc')"
+              v-else-if="sort === 'priceASC'"
+            >
+              金额排序
+              <image :src="sheep.$url.static('/static/img/shop/sort3.png')" />
+            </view>
+            <view class="sortItem" @click="setSort('price', 'desc')" v-else>
+              金额排序
+              <image :src="sheep.$url.static('/static/img/shop/sort2.png')" />
+            </view>
+            <view
+              class="sortItem"
+              @click="setSort('orderCount', 'asc')"
+              v-if="sort === 'orderCountDESC'"
+            >
+              订单排序
+              <image :src="sheep.$url.static('/static/img/shop/sort1.png')" />
+            </view>
+            <view
+              class="sortItem"
+              @click="setSort('orderCount', 'desc')"
+              v-else-if="sort === 'orderCountASC'"
+            >
+              订单排序
+              <image :src="sheep.$url.static('/static/img/shop/sort3.png')" />
+            </view>
+            <view class="sortItem" @click="setSort('orderCount', 'desc')" v-else>
+              订单排序
+              <image :src="sheep.$url.static('/static/img/shop/sort2.png')" />
+            </view>
+          </view>
+          <block v-for="(item, index) in state.pagination.list" :key="index">
+            <view class="item acea-row row-between-wrapper" style="display: flex">
+              <view
+                class="picTxt acea-row row-between-wrapper"
+                style="display: flex; align-items: center"
+              >
+                <view class="pictrue">
+                  <image :src="item.avatar" />
+                </view>
+                <view class="text">
+                  <view class="name line1">{{ item.nickname }}</view>
+                  <view>
+                    加入时间:
+                    {{ sheep.$helper.timeFormat(item.brokerageTime, 'yyyy-mm-dd hh:MM:ss') }}
+                  </view>
+                </view>
+              </view>
+              <view
+                class="right"
+                style="
+                  justify-content: center;
+                  flex-direction: column;
+                  display: flex;
+                  margin-left: auto;
+                "
+              >
+                <view>
+                  <text class="num font-color">{{ item.brokerageUserCount || 0 }} </text>人
+                </view>
+                <view>
+                  <text class="num">{{ item.orderCount || 0 }}</text
+                  >单</view
+                >
+                <view>
+                  <text class="num">{{ fen2yuan(item.brokeragePrice) || 0 }}</text
+                  >元
+                </view>
+              </view>
+            </view>
+          </block>
+          <block v-if="state.pagination.list.length === 0">
+            <view style="text-align: center; margin-top: 30rpx">暂无推广人数</view>
+          </block>
+        </view>
+      </view>
+    </view>
+    <!-- <home></home> -->
+
+    <!-- 		<view class="header-box" :style="[
+        {
+          marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+          paddingTop: Number(statusBarHeight + 108) + 'rpx',
+        },
+      ]">
+			<view v-if="userInfo.parent_user" class="referrer-box ss-flex ss-col-center">
+				推荐人：
+				<image class="referrer-avatar ss-m-r-10" :src="sheep.$url.cdn(userInfo.parent_user.avatar)"
+					mode="aspectFill">
+				</image>
+				{{ userInfo.parent_user.nickname }}
+			</view>
+			<view class="team-data-box ss-flex ss-col-center ss-row-between">
+				<view class="data-card">
+					<view class="total-item">
+						<view class="item-title">团队总人数（人）</view>
+						<view class="total-num">
+							{{ (state.summary.firstBrokerageUserCount+ state.summary.secondBrokerageUserCount)|| 0 }}
+						</view>
+					</view>
+					<view class="category-item ss-flex">
+						<view class="ss-flex-1">
+							<view class="item-title">一级成员</view>
+							<view class="category-num">{{ state.summary.firstBrokerageUserCount || 0 }}</view>
+						</view>
+						<view class="ss-flex-1">
+							<view class="item-title">二级成员</view>
+							<view class="category-num">{{ state.summary.secondBrokerageUserCount || 0 }}</view>
+						</view>
+					</view>
+				</view>
+				<view class="data-card">
+					<view class="total-item">
+						<view class="item-title">团队分销商人数（人）</view>
+						<view class="total-num">{{ agentInfo?.child_agent_count_all || 0 }}</view>
+					</view>
+					<view class="category-item ss-flex">
+						<view class="ss-flex-1">
+							<view class="item-title">一级分销商</view>
+							<view class="category-num">{{ agentInfo?.child_agent_count_1 || 0 }}</view>
+						</view>
+						<view class="ss-flex-1">
+							<view class="item-title">二级分销商</view>
+							<view class="category-num">{{ agentInfo?.child_agent_count_2 || 0 }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="list-box">
+			<uni-list :border="false">
+				<uni-list-chat v-for="item in state.pagination.data" :key="item.id" :avatar-circle="true"
+					:title="item.nickname" :avatar="sheep.$url.cdn(item.avatar)"
+					:note="filterUserNum(item.agent?.child_user_count_1)">
+					<view class="chat-custom-right">
+						<view v-if="item.avatar" class="tag-box ss-flex ss-col-center">
+							<image class="tag-img" :src="sheep.$url.cdn(item.avatar)" mode="aspectFill">
+							</image>
+							<text class="tag-title">{{ item.nickname }}</text>
+						</view>
+						<text
+							class="time-text">{{ sheep.$helper.timeFormat(item.brokerageTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
+					</view>
+				</uni-list-chat>
+			</uni-list>
+		</view>
+		<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无团队信息">
+		</s-empty> -->
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { computed, reactive, ref } from 'vue';
+  import _ from 'lodash-es';
+  import { onPageScroll } from '@dcloudio/uni-app';
+  import BrokerageApi from '@/sheep/api/trade/brokerage';
+  import { fen2yuan } from '../../sheep/hooks/useGoods';
+
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  // const agentInfo = computed(() => sheep.$store('user').agentInfo);
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+  const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
+
+  onPageScroll((e) => {
+    state.scrollTop = e.scrollTop <= 100;
+  });
+
+  let sort = ref();
+  const state = reactive({
+    summary: {},
+    pagination: {
+      pageNo: 1,
+      pageSize: 8,
+      list: [],
+      total: 0,
+    },
+    loadStatus: '',
+    // ↓ 新 ui 逻辑
+    level: 1,
+    nickname: ref(''),
+    sortKey: '',
+    isAsc: '',
+  });
+
+  function filterUserNum(num) {
+    if (_.isNil(num)) {
+      return '';
+    }
+    return `下级团队${num}人`;
+  }
+
+  function submitForm() {
+    state.pagination.list = [];
+    getTeamList();
+  }
+
+  async function getTeamList() {
+    state.loadStatus = 'loading';
+    let { code, data } = await BrokerageApi.getBrokerageUserChildSummaryPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      level: state.level,
+      'sortingField.order': state.isAsc,
+      'sortingField.field': state.sortKey,
+      nickname: state.nickname,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  function setType(e) {
+    state.pagination.list = [];
+    state.level = e + '';
+    getTeamList();
+  }
+
+  function setSort(sortKey, isAsc) {
+    state.pagination.list = [];
+    sort = sortKey + isAsc.toUpperCase();
+    state.isAsc = isAsc;
+    state.sortKey = sortKey;
+    getTeamList();
+  }
+
+  onLoad(async () => {
+    await getTeamList();
+    // 概要数据
+    let { data } = await BrokerageApi.getBrokerageUserSummary();
+    state.summary = data;
+  });
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getTeamList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .l1 {
+    background-color: #fff;
+    height: 86rpx;
+    line-height: 86rpx;
+    font-size: 28rpx;
+    color: #282828;
+    border-bottom: 1rpx solid #eee;
+    border-top-left-radius: 14rpx;
+    border-top-right-radius: 14rpx;
+    display: flex;
+    justify-content: space-around;
+  }
+
+  .header-box {
+    box-sizing: border-box;
+    padding: 0 20rpx 20rpx 20rpx;
+    width: 750rpx;
+    z-index: 3;
+    position: relative;
+    background: v-bind(headerBg) no-repeat,
+      linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    background-size: 750rpx 100%;
+
+    // 团队信息总览
+    .team-data-box {
+      .data-card {
+        width: 305rpx;
+        background: #ffffff;
+        border-radius: 20rpx;
+        padding: 20rpx;
+
+        .item-title {
+          font-size: 22rpx;
+          font-weight: 500;
+          color: #999999;
+          line-height: 30rpx;
+          margin-bottom: 10rpx;
+        }
+
+        .total-item {
+          margin-bottom: 30rpx;
+        }
+
+        .total-num {
+          font-size: 38rpx;
+          font-weight: 500;
+          color: #333333;
+          font-family: OPPOSANS;
+        }
+
+        .category-num {
+          font-size: 26rpx;
+          font-weight: 500;
+          color: #333333;
+          font-family: OPPOSANS;
+        }
+      }
+    }
+  }
+
+  .list-box {
+    z-index: 3;
+    position: relative;
+  }
+
+  .chat-custom-right {
+    .time-text {
+      font-size: 22rpx;
+      font-weight: 400;
+      color: #999999;
+    }
+
+    .tag-box {
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 21rpx;
+      line-height: 30rpx;
+      padding: 5rpx 10rpx;
+      width: 140rpx;
+
+      .tag-img {
+        width: 34rpx;
+        height: 34rpx;
+        margin-right: 6rpx;
+        border-radius: 50%;
+      }
+
+      .tag-title {
+        font-size: 18rpx;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 1);
+        line-height: 20rpx;
+      }
+    }
+  }
+
+  // 推荐人
+  .referrer-box {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #ffffff;
+    padding: 20rpx;
+
+    .referrer-avatar {
+      width: 34rpx;
+      height: 34rpx;
+      border-radius: 50%;
+    }
+  }
+
+  .promoter-list .nav {
+    background-color: #fff;
+    height: 86rpx;
+    line-height: 86rpx;
+    font-size: 28rpx;
+    color: #282828;
+    border-bottom: 1rpx solid #eee;
+    border-top-left-radius: 14rpx;
+    border-top-right-radius: 14rpx;
+    margin-top: -30rpx;
+  }
+
+  .promoter-list .nav .item.on {
+    border-bottom: 5rpx solid;
+    // $theme-color
+    color: var(--ui-BG-Main);
+    // $theme-color
+  }
+
+  .promoter-list .search {
+    width: 100%;
+    background-color: #fff;
+    height: 100rpx;
+    padding: 0 24rpx;
+    box-sizing: border-box;
+    border-bottom-left-radius: 14rpx;
+    border-bottom-right-radius: 14rpx;
+  }
+
+  .promoter-list .search .input {
+    width: 592rpx;
+    height: 60rpx;
+    border-radius: 50rpx;
+    background-color: #f5f5f5;
+    text-align: center;
+    position: relative;
+  }
+
+  .promoter-list .search .input input {
+    height: 100%;
+    font-size: 26rpx;
+    width: 610rpx;
+    text-align: center;
+  }
+
+  .promoter-list .search .input .placeholder {
+    color: #bbb;
+  }
+
+  .promoter-list .search .input .iconfont {
+    position: absolute;
+    right: 28rpx;
+    color: #999;
+    font-size: 28rpx;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .promoter-list .search .iconfont {
+    font-size: 32rpx;
+    color: #515151;
+    height: 60rpx;
+    line-height: 60rpx;
+  }
+
+  .promoter-list .list {
+    margin-top: 20rpx;
+  }
+
+  .promoter-list .list .sortNav {
+    background-color: #fff;
+    height: 76rpx;
+    border-bottom: 1rpx solid #eee;
+    color: #333;
+    font-size: 28rpx;
+    border-top-left-radius: 14rpx;
+    border-top-right-radius: 14rpx;
+  }
+
+  .promoter-list .list .sortNav .sortItem {
+    text-align: center;
+    flex: 1;
+  }
+
+  .promoter-list .list .sortNav .sortItem image {
+    width: 24rpx;
+    height: 24rpx;
+    margin-left: 6rpx;
+    vertical-align: -3rpx;
+  }
+
+  .promoter-list .list .item {
+    background-color: #fff;
+    border-bottom: 1rpx solid #eee;
+    height: 152rpx;
+    padding: 0 24rpx;
+    font-size: 24rpx;
+    color: #666;
+  }
+
+  .promoter-list .list .item .picTxt .pictrue {
+    width: 106rpx;
+    height: 106rpx;
+    border-radius: 50%;
+  }
+
+  .promoter-list .list .item .picTxt .pictrue image {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 3rpx solid #fff;
+    box-shadow: 0 0 10rpx #aaa;
+    box-sizing: border-box;
+  }
+
+  .promoter-list .list .item .picTxt .text {
+    // width: 304rpx;
+    font-size: 24rpx;
+    color: #666;
+    margin-left: 14rpx;
+  }
+
+  .promoter-list .list .item .picTxt .text .name {
+    font-size: 28rpx;
+    color: #333;
+    margin-bottom: 13rpx;
+  }
+
+  .promoter-list .list .item .right {
+    text-align: right;
+    font-size: 22rpx;
+    color: #333;
+  }
+
+  .promoter-list .list .item .right .num {
+    margin-right: 7rpx;
+  }
+</style>
diff --git a/src/pages/commission/wallet.vue b/src/pages/commission/wallet.vue
new file mode 100644
index 00000000..73024dbc
--- /dev/null
+++ b/src/pages/commission/wallet.vue
@@ -0,0 +1,643 @@
+<!-- 分销 - 佣金明细 -->
+<template>
+  <s-layout class="wallet-wrap" title="佣金">
+    <!-- 钱包卡片 -->
+    <view class="header-box ss-flex ss-row-center ss-col-center">
+      <view class="card-box ui-BG-Main ui-Shadow-Main">
+        <view class="card-head ss-flex ss-col-center">
+          <view class="card-title ss-m-r-10">当前佣金（元）</view>
+          <view
+            @tap="state.showMoney = !state.showMoney"
+            class="ss-eye-icon"
+            :class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'"
+          />
+        </view>
+        <view class="ss-flex ss-row-between ss-col-center ss-m-t-30">
+          <view class="money-num">{{
+            state.showMoney ? fen2yuan(state.summary.withdrawPrice || 0) : '*****'
+          }}</view>
+          <view class="ss-flex">
+            <view class="ss-m-r-20">
+              <button
+                class="ss-reset-button withdraw-btn"
+                @tap="sheep.$router.go('/pages/commission/withdraw')"
+              >
+                提现
+              </button>
+            </view>
+            <button class="ss-reset-button balance-btn ss-m-l-20" @tap="state.showModal = true">
+              转余额
+            </button>
+          </view>
+        </view>
+
+        <view class="ss-flex">
+          <view class="loading-money">
+            <view class="loading-money-title">冻结佣金</view>
+            <view class="loading-money-num">
+              {{ state.showMoney ? fen2yuan(state.summary.frozenPrice || 0) : '*****' }}
+            </view>
+          </view>
+          <view class="loading-money ss-m-l-100">
+            <view class="loading-money-title">可提现佣金</view>
+            <view class="loading-money-num">
+              {{ state.showMoney ? fen2yuan(state.summary.brokeragePrice || 0) : '*****' }}
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <su-sticky>
+      <!-- 统计 -->
+      <view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
+        <uni-datetime-picker
+          v-model="state.date"
+          type="daterange"
+          @change="onChangeTime"
+          :end="state.today"
+        >
+          <button class="ss-reset-button date-btn">
+            <text>{{ dateFilterText }}</text>
+            <text class="cicon-drop-down ss-seldate-icon" />
+          </button>
+        </uni-datetime-picker>
+
+        <view class="total-box">
+          <!-- TODO 芋艿：【钱包-可优化】这里暂时不考虑做 -->
+          <!-- <view class="ss-m-b-10">总收入￥{{ state.pagination.income.toFixed(2) }}</view> -->
+          <!-- <view>总支出￥{{ (-state.pagination.expense).toFixed(2) }}</view> -->
+        </view>
+      </view>
+      <su-tabs
+        :list="tabMaps"
+        @change="onChangeTab"
+        :scrollable="false"
+        :current="state.currentTab"
+      />
+    </su-sticky>
+    <s-empty
+      v-if="state.pagination.total === 0"
+      icon="/static/data-empty.png"
+      text="暂无数据"
+    ></s-empty>
+
+    <!-- 转余额弹框 -->
+    <su-popup
+      :show="state.showModal"
+      type="bottom"
+      round="20"
+      @close="state.showModal = false"
+      showClose
+    >
+      <view class="ss-p-x-20 ss-p-y-30">
+        <view class="model-title ss-m-b-30 ss-m-l-20">转余额</view>
+        <view class="model-subtitle ss-m-b-100 ss-m-l-20">将您的佣金转到余额中继续消费</view>
+        <view class="input-box ss-flex ss-col-center border-bottom ss-m-b-70 ss-m-x-20">
+          <view class="unit">￥</view>
+          <uni-easyinput
+            :inputBorder="false"
+            class="ss-flex-1 ss-p-l-10"
+            v-model="state.price"
+            type="number"
+            placeholder="请输入金额"
+          />
+        </view>
+        <button
+          class="ss-reset-button model-btn ui-BG-Main-Gradient ui-Shadow-Main"
+          @tap="onConfirm"
+        >
+          确定
+        </button>
+      </view>
+    </su-popup>
+
+    <!-- 钱包记录 -->
+    <view v-if="state.pagination.total > 0">
+      <!-- 分佣列表 -->
+      <view v-if="state.currentTab === 0">
+        <view
+          class="wallet-list ss-flex border-bottom"
+          v-for="item in state.pagination.list"
+          :key="item.id"
+        >
+          <view class="list-content">
+            <view class="title-box ss-flex ss-row-between ss-m-b-20">
+              <text class="title ss-line-1">{{ item.title }}</text>
+              <view class="money">
+                <text v-if="item.price >= 0" class="add">+{{ fen2yuan(item.price) }}</text>
+                <text v-else class="minus">{{ fen2yuan(item.price) }}</text>
+              </view>
+            </view>
+            <view class="ss-flex ss-row-between ss-col-center">
+              <text class="time">
+                {{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
+              </text>
+              <view class="ss-flex ss-col-center">
+                <text class="status" :class="'status-' + item.status">{{ item.statusName }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 提现列表 -->
+      <view v-else>
+        <view
+          class="wallet-list ss-flex border-bottom"
+          v-for="item in state.pagination.list"
+          :key="item.id"
+        >
+          <view class="list-content">
+            <view class="title-box ss-flex ss-row-between ss-m-b-20">
+              <text class="title ss-line-1">{{ item.typeName }}</text>
+              <view class="money">
+                <text class="minus">{{ fen2yuan(item.price) }}</text>
+              </view>
+            </view>
+            <view class="ss-flex ss-row-between ss-col-center">
+              <text class="time">
+                {{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
+              </text>
+              <button
+                v-if="item.status === 10 && item.type === 5 && item.payTransferId > 0"
+                class="ss-reset-button confirm-btn ss-m-l-20"
+                @tap="onRequestMerchantTransfer(item)"
+              >
+                确认收款
+              </button>
+              <text v-else class="status" :class="'status-' + item.status">{{
+                item.statusName
+              }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- <u-gap></u-gap> -->
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import { computed, reactive } from 'vue';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import dayjs from 'dayjs';
+  import _ from 'lodash-es';
+  import BrokerageApi from '@/sheep/api/trade/brokerage';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import { resetPagination } from '@/sheep/helper/utils';
+  import PayTransferApi from '@/sheep/api/pay/transfer';
+
+  const headerBg = sheep.$url.css('/static/img/shop/user/wallet_card_bg.png');
+
+  const state = reactive({
+    showMoney: false,
+    summary: {}, // 分销信息
+
+    today: '',
+    date: [],
+    currentTab: 0,
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 8,
+    },
+    loadStatus: '',
+
+    price: undefined,
+    showModal: false,
+  });
+
+  const tabMaps = [
+    {
+      name: '分佣',
+      value: '1',
+    },
+    {
+      name: '提现',
+      value: '2',
+    },
+  ];
+
+  const dateFilterText = computed(() => {
+    if (state.date[0] === state.date[1]) {
+      return state.date[0];
+    } else {
+      return state.date.join('~');
+    }
+  });
+
+  async function getLogList() {
+    state.loadStatus = 'loading';
+    let { code, data } = await (state.currentTab === 0
+      ? BrokerageApi.getBrokerageRecordPage({
+          pageSize: state.pagination.pageSize,
+          pageNo: state.pagination.pageNo,
+          'createTime[0]': state.date[0] + ' 00:00:00',
+          'createTime[1]': state.date[1] + ' 23:59:59',
+        })
+      : BrokerageApi.getBrokerageWithdrawPage({
+          pageSize: state.pagination.pageSize,
+          pageNo: state.pagination.pageNo,
+          'createTime[0]': state.date[0] + ' 00:00:00',
+          'createTime[1]': state.date[1] + ' 23:59:59',
+        }));
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  function onChangeTab(e) {
+    resetPagination(state.pagination);
+    state.currentTab = e.index;
+    getLogList();
+  }
+
+  function onChangeTime(e) {
+    state.date[0] = e[0];
+    state.date[1] = e[e.length - 1];
+    resetPagination(state.pagination);
+    getLogList();
+  }
+
+  // 确认操作（转账到余额）
+  async function onConfirm() {
+    if (state.price <= 0) {
+      sheep.$helper.toast('请输入正确的金额');
+      return;
+    }
+    uni.showModal({
+      title: '提示',
+      content: '确认把您的佣金转入到余额钱包中？',
+      success: async function (res) {
+        if (!res.confirm) {
+          return;
+        }
+        const { code } = await BrokerageApi.createBrokerageWithdraw({
+          type: 1, // 钱包
+          price: state.price * 100,
+        });
+        if (code === 0) {
+          state.showModal = false;
+          await getAgentInfo();
+          onChangeTab({
+            index: 1,
+          });
+        }
+      },
+    });
+  }
+
+  async function getAgentInfo() {
+    const { code, data } = await BrokerageApi.getBrokerageUserSummary();
+    if (code !== 0) {
+      return;
+    }
+    state.summary = data;
+  }
+
+  // 微信场景下：用户确认收款
+  // 可见 https://pay.weixin.qq.com/doc/v3/merchant/4012716430 文档
+  async function onRequestMerchantTransfer(item) {
+    const requestMerchantTransfer = sheep.$platform.useProvider()
+      ? sheep.$platform.useProvider().requestMerchantTransfer
+      : undefined;
+    if (!requestMerchantTransfer) {
+      sheep.$helper.toast('仅微信平台支持该功能');
+      return;
+    }
+    // 获取提现详情
+    const { code, data } = await BrokerageApi.getBrokerageWithdraw(item.id);
+    if (code !== 0) {
+      return;
+    }
+    if (data.status === 11) {
+      sheep.$helper.toast('该提现单已确认收款');
+      item.status = 11;
+      return;
+    }
+    if (!data.transferChannelMchId || !data.transferChannelPackageInfo) {
+      sheep.$helper.toast('提现信息异常，请稍后再试');
+      return;
+    }
+    // 调用微信确认收款
+    const payTransferId = data.payTransferId;
+    await requestMerchantTransfer(
+      data.transferChannelMchId,
+      data.transferChannelPackageInfo,
+      async (res) => {
+        if (res.result !== 'success') {
+          sheep.$helper.toast(res.errMsg);
+          return;
+        }
+        // 同步转账单状态
+        try {
+          const syncTransferResult = await PayTransferApi.syncTransfer(payTransferId);
+          console.log('syncTransferResult 结果', syncTransferResult);
+        } catch (e) {
+          console.error('syncTransferResult 异常', e);
+        }
+        // 查询提现单最新状态
+        const { data } = await BrokerageApi.getBrokerageWithdraw(item.id);
+        if (data && data.status !== 11) {
+          sheep.$helper.toast('确认收款成功，但数据存在延迟，请以实际【微信支付】到账为准');
+          return;
+        }
+        sheep.$helper.toast('确认收款成功');
+        // 更新到列表中
+        item.status = 11;
+      },
+    );
+  }
+
+  onLoad(async (options) => {
+    state.today = dayjs().format('YYYY-MM-DD');
+    state.date = [state.today, state.today];
+    if (options.type === '2') {
+      // 切换到"提现" tab 下
+      state.currentTab = 1;
+    }
+    getLogList();
+    getAgentInfo();
+  });
+
+  onReachBottom(() => {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getLogList();
+  });
+</script>
+
+<style lang="scss" scoped>
+  // 钱包
+  .header-box {
+    background-color: $white;
+    padding: 30rpx;
+
+    .card-box {
+      width: 100%;
+      min-height: 300rpx;
+      padding: 40rpx;
+      background-size: 100% 100%;
+      border-radius: 30rpx;
+      overflow: hidden;
+      position: relative;
+      z-index: 1;
+      box-sizing: border-box;
+
+      &::after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: v-bind(headerBg) no-repeat;
+        pointer-events: none;
+      }
+
+      .card-head {
+        color: $white;
+        font-size: 24rpx;
+      }
+
+      .ss-eye-icon {
+        font-size: 40rpx;
+        color: $white;
+      }
+
+      .money-num {
+        font-size: 40rpx;
+        line-height: normal;
+        font-weight: 500;
+        color: $white;
+        font-family: OPPOSANS;
+      }
+
+      .reduce-num {
+        font-size: 26rpx;
+        font-weight: 400;
+        color: $white;
+      }
+
+      .withdraw-btn {
+        width: 120rpx;
+        height: 60rpx;
+        line-height: 60rpx;
+        border-radius: 30px;
+        font-size: 24rpx;
+        font-weight: 500;
+        background-color: $white;
+        color: var(--ui-BG-Main);
+      }
+
+      .balance-btn {
+        width: 120rpx;
+        height: 60rpx;
+        line-height: 60rpx;
+        border-radius: 30px;
+        font-size: 24rpx;
+        font-weight: 500;
+        color: $white;
+        border: 1px solid $white;
+      }
+    }
+  }
+
+  .loading-money {
+    margin-top: 56rpx;
+
+    .loading-money-title {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: normal;
+      margin-bottom: 30rpx;
+    }
+
+    .loading-money-num {
+      font-size: 30rpx;
+      font-family: OPPOSANS;
+      font-weight: 500;
+      color: #fefefe;
+    }
+  }
+
+  // 筛选
+
+  .filter-box {
+    height: 120rpx;
+    padding: 0 30rpx;
+    background-color: $bg-page;
+
+    .total-box {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: $dark-9;
+    }
+
+    .date-btn {
+      background-color: $white;
+      line-height: 54rpx;
+      border-radius: 27rpx;
+      padding: 0 20rpx;
+      font-size: 24rpx;
+      font-weight: 500;
+      color: $dark-6;
+
+      .ss-seldate-icon {
+        font-size: 50rpx;
+        color: $dark-9;
+      }
+    }
+  }
+
+  // tab
+  .wallet-tab-card {
+    .tab-item {
+      height: 80rpx;
+      position: relative;
+
+      .tab-title {
+        font-size: 30rpx;
+      }
+
+      .cur-tab-title {
+        font-weight: $font-weight-bold;
+      }
+
+      .tab-line {
+        width: 60rpx;
+        height: 6rpx;
+        border-radius: 6rpx;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 2rpx;
+        background-color: var(--ui-BG-Main);
+      }
+    }
+  }
+
+  // 钱包记录
+  .wallet-list {
+    padding: 30rpx;
+    background-color: #ffff;
+
+    .head-img {
+      width: 70rpx;
+      height: 70rpx;
+      border-radius: 50%;
+      background: $gray-c;
+    }
+
+    .list-content {
+      justify-content: space-between;
+      align-items: flex-start;
+      flex: 1;
+
+      .title {
+        font-size: 28rpx;
+        color: $dark-3;
+        width: 400rpx;
+      }
+
+      .time {
+        color: $gray-c;
+        font-size: 22rpx;
+      }
+    }
+
+    .money {
+      font-size: 28rpx;
+      font-weight: bold;
+      font-family: OPPOSANS;
+
+      .add {
+        color: var(--ui-BG-Main);
+      }
+
+      .minus {
+        color: $dark-3;
+      }
+    }
+
+    .confirm-btn {
+      font-size: 22rpx;
+      color: var(--ui-BG-Main);
+      background: rgba(var(--ui-BG-Main-rgb), 0.1);
+      padding: 4rpx 16rpx;
+      margin: 0;
+      line-height: 1.4;
+      border-radius: 20rpx;
+      border: 1px solid var(--ui-BG-Main);
+    }
+  }
+
+  .model-title {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #333333;
+  }
+
+  .model-subtitle {
+    font-size: 26rpx;
+    color: #c2c7cf;
+  }
+
+  .model-btn {
+    width: 100%;
+    height: 80rpx;
+    border-radius: 40rpx;
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: normal;
+  }
+
+  .input-box {
+    height: 100rpx;
+
+    .unit {
+      font-size: 48rpx;
+      color: #333;
+      font-weight: 500;
+      line-height: normal;
+    }
+
+    .uni-easyinput__placeholder-class {
+      font-size: 30rpx;
+      height: 40rpx;
+      line-height: normal;
+    }
+  }
+
+  .status {
+    font-size: 22rpx;
+    &.status-0 {
+      color: #ff9900;
+    }
+    &.status-1 {
+      color: #19be6b;
+    }
+    &.status-2 {
+      color: #fa3534;
+    }
+  }
+</style>
diff --git a/src/pages/commission/withdraw.vue b/src/pages/commission/withdraw.vue
new file mode 100644
index 00000000..fb661866
--- /dev/null
+++ b/src/pages/commission/withdraw.vue
@@ -0,0 +1,486 @@
+<!-- 分佣提现 -->
+<template>
+  <s-layout title="申请提现" class="withdraw-wrap" navbar="inner">
+    <view class="page-bg"></view>
+    <view
+      class="wallet-num-box ss-flex ss-col-center ss-row-between"
+      :style="[
+        {
+          marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+          paddingTop: Number(statusBarHeight + 108) + 'rpx',
+        },
+      ]"
+    >
+      <view class="">
+        <view class="num-title">可提现金额（元）</view>
+        <view class="wallet-num">{{ fen2yuan(state.brokerageInfo.brokeragePrice) }}</view>
+      </view>
+      <button
+        class="ss-reset-button log-btn"
+        @tap="sheep.$router.go('/pages/commission/wallet', { type: 2 })"
+      >
+        提现记录
+      </button>
+    </view>
+    <!-- 提现输入卡片-->
+    <view class="draw-card">
+      <view class="bank-box ss-flex ss-col-center ss-row-between ss-m-b-30">
+        <view class="name">提现至</view>
+        <view class="bank-list ss-flex ss-col-center" @tap="onAccountSelect(true)">
+          <view v-if="!state.accountInfo.type" class="empty-text">请选择提现方式</view>
+          <view v-if="state.accountInfo.type === '1'" class="empty-text">钱包余额</view>
+          <view v-if="state.accountInfo.type === '2'" class="empty-text">银行卡转账</view>
+          <view v-if="state.accountInfo.type === '3'" class="empty-text">微信账户</view>
+          <view v-if="state.accountInfo.type === '4'" class="empty-text">支付宝账户</view>
+          <view v-if="state.accountInfo.type === '5'" class="empty-text">微信零钱</view>
+          <text class="cicon-forward" />
+        </view>
+      </view>
+      <!-- 提现金额 -->
+      <view class="card-title">提现金额</view>
+      <view class="input-box ss-flex ss-col-center border-bottom">
+        <view class="unit">￥</view>
+        <uni-easyinput
+          :inputBorder="false"
+          class="ss-flex-1 ss-p-l-10"
+          v-model="state.accountInfo.price"
+          type="number"
+          placeholder="请输入提现金额"
+        />
+      </view>
+      <!-- 提现账号 -->
+      <view class="card-title" v-show="['2', '6'].includes(state.accountInfo.type)">
+        提现账号
+      </view>
+      <view
+        class="input-box ss-flex ss-col-center border-bottom"
+        v-show="['2', '6'].includes(state.accountInfo.type)"
+      >
+        <view class="unit" />
+        <uni-easyinput
+          :inputBorder="false"
+          class="ss-flex-1 ss-p-l-10"
+          v-model="state.accountInfo.userAccount"
+          placeholder="请输入提现账号"
+        />
+      </view>
+      <!-- 收款码 -->
+      <view class="card-title" v-show="['3', '4'].includes(state.accountInfo.type)">收款码</view>
+      <view
+        class="input-box ss-flex ss-col-center"
+        v-show="['3', '4'].includes(state.accountInfo.type)"
+      >
+        <view class="unit" />
+        <view class="upload-img">
+          <s-uploader
+            v-model:url="state.accountInfo.qrCodeUrl"
+            fileMediatype="image"
+            limit="1"
+            mode="grid"
+            :imageStyles="{ width: '168rpx', height: '168rpx' }"
+            @success="(payload) => (state.accountInfo.qrCodeUrl = payload.tempFilePaths[0])"
+          />
+        </view>
+      </view>
+      <!-- 持卡人姓名 -->
+      <view class="card-title" v-show="['2', '5', '6'].includes(state.accountInfo.type)">
+        收款真名
+      </view>
+      <view
+        class="input-box ss-flex ss-col-center border-bottom"
+        v-show="['2', '5', '6'].includes(state.accountInfo.type)"
+      >
+        <view class="unit" />
+        <uni-easyinput
+          :inputBorder="false"
+          class="ss-flex-1 ss-p-l-10"
+          v-model="state.accountInfo.userName"
+          placeholder="请输入收款真名"
+        />
+      </view>
+      <!-- 提现银行 -->
+      <view class="card-title" v-show="state.accountInfo.type === '2'">提现银行</view>
+      <view
+        class="input-box ss-flex ss-col-center border-bottom"
+        v-show="state.accountInfo.type === '2'"
+      >
+        <view class="unit" />
+        <!--银行改为下拉选择-->
+        <picker
+          @change="bankChange"
+          :value="state.bankListSelectedIndex"
+          :range="state.bankList"
+          range-key="label"
+          style="width: 100%"
+        >
+          <uni-easyinput
+            :inputBorder="false"
+            :value="state.accountInfo.bankName"
+            placeholder="请选择银行"
+            suffixIcon="right"
+            disabled
+            :styles="{ disableColor: '#fff', borderColor: '#fff', color: '#333!important' }"
+          />
+        </picker>
+      </view>
+      <!-- 开户地址 -->
+      <view class="card-title" v-show="state.accountInfo.type === '2'">开户地址</view>
+      <view
+        class="input-box ss-flex ss-col-center border-bottom"
+        v-show="state.accountInfo.type === '2'"
+      >
+        <view class="unit" />
+        <uni-easyinput
+          :inputBorder="false"
+          class="ss-flex-1 ss-p-l-10"
+          v-model="state.accountInfo.bankAddress"
+          placeholder="请输入开户地址"
+        />
+      </view>
+      <button class="ss-reset-button save-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onConfirm">
+        确认提现
+      </button>
+    </view>
+
+    <!-- 提现说明 -->
+    <view class="draw-notice">
+      <view class="title ss-m-b-30">提现说明</view>
+      <view class="draw-list"> 最低提现金额 {{ fen2yuan(state.minPrice) }} 元 </view>
+      <view class="draw-list">
+        冻结佣金：<text>￥{{ fen2yuan(state.brokerageInfo.frozenPrice) }}</text>
+        （每笔佣金的冻结期为 {{ state.frozenDays }} 天，到期后可提现）
+      </view>
+    </view>
+
+    <!-- 选择提现账户 -->
+    <account-type-select
+      :show="state.accountSelect"
+      @close="onAccountSelect(false)"
+      round="10"
+      v-model="state.accountInfo"
+      :methods="state.withdrawTypes"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import { onBeforeMount, reactive } from 'vue';
+  import sheep from '@/sheep';
+  import accountTypeSelect from './components/account-type-select.vue';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import TradeConfigApi from '@/sheep/api/trade/config';
+  import BrokerageApi from '@/sheep/api/trade/brokerage';
+  import DictApi from '@/sheep/api/system/dict';
+  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
+  import { getWeixinPayChannelCode, goBindWeixin } from '@/sheep/platform/pay';
+
+  const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+
+  const state = reactive({
+    accountInfo: {
+      // 提现表单
+      type: undefined,
+      userAccount: undefined,
+      userName: undefined,
+      qrCodeUrl: undefined,
+      bankName: undefined,
+      bankAddress: undefined,
+    },
+
+    accountSelect: false,
+
+    brokerageInfo: {}, // 分销信息
+
+    frozenDays: 0, // 冻结天数
+    minPrice: 0, // 最低提现金额
+    withdrawTypes: [], // 提现方式
+    bankList: [], // 银行字典数据
+    bankListSelectedIndex: '', // 选中银行 bankList 的 index
+  });
+
+  // 打开提现方式的弹窗
+  const onAccountSelect = (e) => {
+    state.accountSelect = e;
+  };
+
+  // 提交提现
+  const onConfirm = async () => {
+    // 参数校验
+    if (
+      !state.accountInfo.price ||
+      state.accountInfo.price > state.brokerageInfo.price ||
+      state.accountInfo.price <= 0
+    ) {
+      sheep.$helper.toast('请输入正确的提现金额');
+      return;
+    }
+    if (!state.accountInfo.type) {
+      sheep.$helper.toast('请选择提现方式');
+      return;
+    }
+    let openid;
+    if (state.accountInfo.type === '5') {
+      openid = await sheep.$platform.useProvider('wechat').getOpenid();
+      // 如果获取不到 openid，微信无法发起支付，此时需要引导
+      if (!openid) {
+        goBindWeixin();
+        return;
+      }
+    }
+
+    // 提交请求
+    const data = {
+      ...state.accountInfo,
+      price: state.accountInfo.price * 100,
+    };
+    if (state.accountInfo.type === '5') {
+      data.userAccount = openid;
+      data.transferChannelCode = getWeixinPayChannelCode();
+    } else if (state.accountInfo.type === '6' || state.accountInfo.type === '2') {
+      delete data.transferChannelCode;
+    } else {
+      delete data.userAccount;
+      delete data.transferChannelCode;
+    }
+    let { code } = await BrokerageApi.createBrokerageWithdraw(data);
+    if (code !== 0) {
+      return;
+    }
+    // 提示
+    uni.showModal({
+      title: '操作成功',
+      content: '您的提现申请已成功提交',
+      cancelText: '继续提现',
+      confirmText: '查看记录',
+      success: (res) => {
+        if (res.confirm) {
+          sheep.$router.go('/pages/commission/wallet', { type: 2 });
+          return;
+        }
+        getBrokerageUser();
+        state.accountInfo = {};
+      },
+    });
+  };
+
+  // 获得分销配置
+  async function getWithdrawRules() {
+    let { code, data } = await TradeConfigApi.getTradeConfig();
+    if (code !== 0) {
+      return;
+    }
+    if (data) {
+      state.minPrice = data.brokerageWithdrawMinPrice || 0;
+      state.frozenDays = data.brokerageFrozenDays || 0;
+      state.withdrawTypes = data.brokerageWithdrawTypes;
+    }
+  }
+
+  // 获得分销信息
+  async function getBrokerageUser() {
+    const { data, code } = await BrokerageApi.getBrokerageUser();
+    if (code === 0) {
+      state.brokerageInfo = data;
+    }
+  }
+
+  // 获取提现银行配置字典
+  async function getDictDataListByType() {
+    let { code, data } = await DictApi.getDictDataListByType('brokerage_bank_name');
+    if (code !== 0) {
+      return;
+    }
+    if (data && data.length > 0) {
+      state.bankList = data;
+    }
+  }
+
+  // 银行选择
+  function bankChange(e) {
+    const value = e.detail.value;
+    state.bankListSelectedIndex = value;
+    state.accountInfo.bankName = state.bankList[value].label;
+  }
+
+  onBeforeMount(() => {
+    getWithdrawRules();
+    getBrokerageUser();
+    getDictDataListByType(); //获取银行字典数据
+  });
+</script>
+
+<style lang="scss" scoped>
+  :deep() {
+    .uni-input-input {
+      font-family: OPPOSANS !important;
+    }
+  }
+
+  .wallet-num-box {
+    padding: 0 40rpx 80rpx;
+    background: var(--ui-BG-Main) v-bind(headerBg) center/750rpx 100% no-repeat;
+    border-radius: 0 0 5% 5%;
+
+    .num-title {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: $white;
+      margin-bottom: 20rpx;
+    }
+
+    .wallet-num {
+      font-size: 60rpx;
+      font-weight: 500;
+      color: $white;
+      font-family: OPPOSANS;
+    }
+
+    .log-btn {
+      width: 170rpx;
+      height: 60rpx;
+      line-height: 60rpx;
+      border: 1rpx solid $white;
+      border-radius: 30rpx;
+      padding: 0;
+      font-size: 26rpx;
+      font-weight: 500;
+      color: $white;
+    }
+  }
+
+  // 提现输入卡片
+  .draw-card {
+    background-color: $white;
+    border-radius: 20rpx;
+    width: 690rpx;
+    min-height: 560rpx;
+    margin: -60rpx 30rpx 30rpx 30rpx;
+    padding: 30rpx;
+    position: relative;
+    z-index: 3;
+    box-sizing: border-box;
+
+    .card-title {
+      font-size: 30rpx;
+      font-weight: 500;
+      margin-bottom: 30rpx;
+    }
+
+    .bank-box {
+      .name {
+        font-size: 28rpx;
+        font-weight: 500;
+      }
+
+      .bank-list {
+        .empty-text {
+          font-size: 28rpx;
+          font-weight: 400;
+          color: $dark-9;
+        }
+
+        .cicon-forward {
+          color: $dark-9;
+        }
+      }
+
+      .input-box {
+        width: 624rpx;
+        height: 100rpx;
+        margin-bottom: 40rpx;
+
+        .unit {
+          font-size: 48rpx;
+          color: #333;
+          font-weight: 500;
+        }
+
+        .uni-easyinput__placeholder-class {
+          font-size: 30rpx;
+          height: 36rpx;
+        }
+
+        :deep(.uni-easyinput__content-input) {
+          font-size: 48rpx;
+        }
+      }
+
+      .save-btn {
+        width: 616rpx;
+        height: 86rpx;
+        line-height: 86rpx;
+        border-radius: 40rpx;
+        margin-top: 80rpx;
+      }
+    }
+
+    .bind-box {
+      .placeholder-text {
+        font-size: 26rpx;
+        color: $dark-9;
+      }
+
+      .add-btn {
+        width: 100rpx;
+        height: 50rpx;
+        border-radius: 25rpx;
+        line-height: 50rpx;
+        font-size: 22rpx;
+        color: var(--ui-BG-Main);
+        background-color: var(--ui-BG-Main-light);
+      }
+    }
+
+    .input-box {
+      width: 624rpx;
+      height: 100rpx;
+      margin-bottom: 40rpx;
+
+      .unit {
+        font-size: 48rpx;
+        color: #333;
+        font-weight: 500;
+      }
+
+      .uni-easyinput__placeholder-class {
+        font-size: 30rpx;
+      }
+
+      :deep(.uni-easyinput__content-input) {
+        font-size: 48rpx;
+      }
+    }
+
+    .save-btn {
+      width: 616rpx;
+      height: 86rpx;
+      line-height: 86rpx;
+      border-radius: 40rpx;
+      margin-top: 80rpx;
+    }
+  }
+
+  // 提现说明
+  .draw-notice {
+    width: 684rpx;
+    background: #ffffff;
+    border: 2rpx solid #fffaee;
+    border-radius: 20rpx;
+    margin: 20rpx 32rpx 0 32rpx;
+    padding: 30rpx;
+    box-sizing: border-box;
+
+    .title {
+      font-weight: 500;
+      color: #333333;
+      font-size: 30rpx;
+    }
+
+    .draw-list {
+      font-size: 24rpx;
+      color: #999999;
+      line-height: 46rpx;
+    }
+  }
+</style>
diff --git a/src/pages/components/HighlightNumberText.vue b/src/pages/components/HighlightNumberText.vue
new file mode 100644
index 00000000..0b00f352
--- /dev/null
+++ b/src/pages/components/HighlightNumberText.vue
@@ -0,0 +1,81 @@
+<template>
+  <view class="content-container">
+    <span v-for="(part, index) in formattedContent" :key="index"
+          @click="handleClick(part)"
+          :class="{'highlight-number': part.isNumber, 'phone-number': part.isPhone}">
+      {{ part.text }}
+    </span>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'HighlightNumber',
+    props: {
+      content: {
+        type: String,
+        required: true
+      }
+    },
+    computed: {
+      formattedContent() {
+        const phoneRegex = /(1[3-9]\d{9})/g;
+        const numberRegex = /(\d+)/g;
+        let text = this.content;
+        let result = [];
+        let match;
+
+        // Step 1: 提取手机号
+        while ((match = phoneRegex.exec(text)) !== null) {
+          if (match.index > 0) {
+            const before = text.slice(0, match.index);
+            result.push(...this.splitAndPush(before, false, false));
+          }
+          result.push({ text: match[0], isNumber: true, isPhone: true });
+          text = text.slice(match.index + match[0].length);
+        }
+
+        // Step 2: 提取普通数字
+        while ((match = numberRegex.exec(text)) !== null) {
+          if (match.index > 0) {
+            const before = text.slice(0, match.index);
+            result.push(...this.splitAndPush(before, false, false));
+          }
+          result.push({ text: match[0], isNumber: true });
+          text = text.slice(match.index + match[0].length);
+        }
+
+        // Step 3: 添加剩余文本
+        if (text.length > 0) {
+          result.push(...this.splitAndPush(text, false, false));
+        }
+
+        return result;
+      }
+    },
+    methods: {
+      splitAndPush(str, isNumber = false, isPhone = false) {
+        return str.split('').map(char => ({ text: char, isNumber, isPhone }));
+      },
+      handleClick(part) {
+        if (part.isPhone) {
+          this.$emit('phone-click', { phoneNumber: part.text });
+        } else if (part.isNumber) {
+          this.$emit('number-click', { number: part.text });
+        }
+      }
+    }
+  };
+</script>
+
+<style scoped>
+  .highlight-number {
+    color: #ff5722;
+    font-weight: bold;
+  }
+
+  .phone-number {
+    color: #007AFF;
+    text-decoration: underline;
+  }
+</style>
diff --git a/src/pages/coupon/detail.vue b/src/pages/coupon/detail.vue
new file mode 100644
index 00000000..96114a3e
--- /dev/null
+++ b/src/pages/coupon/detail.vue
@@ -0,0 +1,390 @@
+<!-- 优惠券详情  -->
+<template>
+  <s-layout title="优惠券详情">
+    <view class="bg-white">
+      <!-- 详情卡片 -->
+      <view class="detail-wrap ss-p-20">
+        <view class="detail-box">
+          <view class="tag-box ss-flex ss-col-center ss-row-center">
+            <image
+              class="tag-image"
+              :src="sheep.$url.static('/static/img/shop/app/coupon_icon.png')"
+              mode="aspectFit"
+            />
+          </view>
+          <view class="top ss-flex-col ss-col-center">
+            <view class="title ss-m-t-50 ss-m-b-20 ss-m-x-20">{{ state.coupon.name }}</view>
+            <view class="subtitle ss-m-b-50">
+              满 {{ fen2yuan(state.coupon.usePrice) }} 元，
+              {{
+                state.coupon.discountType === 1
+                  ? '减 ' + fen2yuan(state.coupon.discountPrice) + ' 元'
+                  : '打 ' + state.coupon.discountPercent / 10.0 + ' 折'
+              }}
+            </view>
+            <button
+              class="ss-reset-button ss-m-b-30"
+              :class="
+                state.coupon.canTake || state.coupon.status === 1
+                  ? 'use-btn' // 优惠劵模版（可领取）、优惠劵（可使用）
+                  : 'disable-btn'
+              "
+              :disabled="!state.coupon.canTake"
+              @click="getCoupon"
+            >
+              <text v-if="state.id > 0">{{ state.coupon.canTake ? '立即领取' : '已领取' }}</text>
+              <text v-else>
+                {{
+                  state.coupon.status === 1
+                    ? '可使用'
+                    : state.coupon.status === 2
+                    ? '已使用'
+                    : '已过期'
+                }}
+              </text>
+            </button>
+            <view class="time ss-m-y-30" v-if="state.coupon.validityType === 2">
+              有效期：领取后 {{ state.coupon.fixedEndTerm }} 天内可用
+            </view>
+            <view class="time ss-m-y-30" v-else>
+              有效期: {{ sheep.$helper.timeFormat(state.coupon.validStartTime, 'yyyy-mm-dd') }} 至
+              {{ sheep.$helper.timeFormat(state.coupon.validEndTime, 'yyyy-mm-dd') }}
+            </view>
+            <view class="coupon-line ss-m-t-14"></view>
+          </view>
+          <view class="bottom">
+            <view class="type ss-flex ss-col-center ss-row-between ss-p-x-30">
+              <view>优惠券类型</view>
+              <view>{{ state.coupon.discountType === 1 ? '满减券' : '折扣券' }}</view>
+            </view>
+            <uni-collapse>
+              <uni-collapse-item title="优惠券说明" v-if="state.coupon.description">
+                <view class="content ss-p-b-20">
+                  <text class="des ss-p-l-30">{{ state.coupon.description }}</text>
+                </view>
+              </uni-collapse-item>
+            </uni-collapse>
+          </view>
+        </view>
+      </view>
+
+      <!-- 适用商品 -->
+      <view
+        class="all-user ss-flex ss-row-center ss-col-center"
+        v-if="state.coupon.productScope === 1"
+      >
+        全场通用
+      </view>
+
+      <su-sticky v-else bgColor="#fff">
+        <view class="goods-title ss-p-20">
+          {{ state.coupon.productScope === 2 ? '指定商品可用' : '指定分类可用' }}
+        </view>
+        <su-tabs
+          :scrollable="true"
+          :list="state.tabMaps"
+          @change="onTabsChange"
+          :current="state.currentTab"
+          v-if="state.coupon.productScope === 3"
+        />
+      </su-sticky>
+      <!-- 指定商品 -->
+      <view v-if="state.coupon.productScope === 2">
+        <view v-for="(item, index) in state.pagination.list" :key="index">
+          <s-goods-column
+            class="ss-m-20"
+            size="lg"
+            :data="item"
+            @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            :goodsFields="{
+              title: { show: true },
+              subtitle: { show: true },
+              price: { show: true },
+              original_price: { show: true },
+              sales: { show: true },
+              stock: { show: false },
+            }"
+          />
+        </view>
+      </view>
+      <!-- 指定分类 -->
+      <view v-if="state.coupon.productScope === 3">
+        <view v-for="(item, index) in state.pagination.list" :key="index">
+          <s-goods-column
+            class="ss-m-20"
+            size="lg"
+            :data="item"
+            @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            :goodsFields="{
+              title: { show: true },
+              subtitle: { show: true },
+              price: { show: true },
+              original_price: { show: true },
+              sales: { show: true },
+              stock: { show: false },
+            }"
+          ></s-goods-column>
+        </view>
+      </view>
+      <uni-load-more
+        v-if="state.pagination.total > 0 && state.coupon.productScope === 3"
+        :status="state.loadStatus"
+        :content-text="{
+          contentdown: '上拉加载更多',
+        }"
+        @tap="loadMore"
+      />
+      <s-empty
+        v-if="state.coupon.productScope === 3 && state.pagination.total === 0"
+        paddingTop="0"
+        icon="/static/soldout-empty.png"
+        text="暂无商品"
+      />
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import _ from 'lodash-es';
+  import CouponApi from '@/sheep/api/promotion/coupon';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import SpuApi from '@/sheep/api/product/spu';
+  import CategoryApi from '@/sheep/api/product/category';
+  import { resetPagination } from '@/sheep/helper/utils';
+
+  const state = reactive({
+    id: 0, // 优惠劵模版编号 templateId
+    couponId: 0, // 用户优惠劵编号 couponId
+    coupon: {}, // 优惠劵信息
+
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 8,
+    },
+    categoryId: 0, // 选中的商品分类编号
+    tabMaps: [], // 指定分类时，每个分类构成一个 tab
+    currentTab: 0, // 选中的 tabMaps 下标
+    loadStatus: '',
+  });
+
+  function onTabsChange(e) {
+    resetPagination(state.pagination);
+    state.currentTab = e.index;
+    state.categoryId = e.value;
+    getGoodsListByCategory();
+  }
+
+  async function getGoodsListByCategory() {
+    state.loadStatus = 'loading';
+    const { code, data } = await SpuApi.getSpuPage({
+      categoryId: state.categoryId,
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 获得商品列表，指定商品范围
+  async function getGoodsListById() {
+    const { data, code } = await SpuApi.getSpuListByIds(state.coupon.productScopeValues.join(','));
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = data;
+  }
+
+  // 获得分类列表
+  async function getCategoryList() {
+    const { data, code } = await CategoryApi.getCategoryListByIds(
+      state.coupon.productScopeValues.join(','),
+    );
+    if (code !== 0) {
+      return;
+    }
+    state.tabMaps = data.map((category) => ({ name: category.name, value: category.id }));
+    // 加载第一个分类的商品列表
+    if (state.tabMaps.length > 0) {
+      state.categoryId = state.tabMaps[0].value;
+      await getGoodsListByCategory();
+    }
+  }
+
+  // 领取优惠劵
+  async function getCoupon() {
+    const { code } = await CouponApi.takeCoupon(state.id);
+    if (code !== 0) {
+      return;
+    }
+    uni.showToast({
+      title: '领取成功',
+    });
+    setTimeout(() => {
+      getCouponContent();
+    }, 1000);
+  }
+
+  // 加载优惠劵信息
+  async function getCouponContent() {
+    const { code, data } =
+      state.id > 0
+        ? await CouponApi.getCouponTemplate(state.id)
+        : await CouponApi.getCoupon(state.couponId);
+    if (code !== 0) {
+      return;
+    }
+    state.coupon = data;
+    // 不同指定范围，加载不同数据
+    if (state.coupon.productScope === 2) {
+      await getGoodsListById();
+    } else if (state.coupon.productScope === 3) {
+      await getCategoryList();
+    }
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getGoodsListByCategory();
+  }
+
+  onLoad((options) => {
+    state.id = options.id;
+    state.couponId = options.couponId;
+    getCouponContent(state.id, state.couponId);
+  });
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .goods-title {
+    font-size: 34rpx;
+    font-weight: bold;
+    color: #333333;
+  }
+
+  .detail-wrap {
+    background: linear-gradient(
+      180deg,
+      var(--ui-BG-Main),
+      var(--ui-BG-Main-gradient),
+      var(--ui-BG-Main),
+      #fff
+    );
+  }
+
+  .detail-box {
+    // background-color: var(--ui-BG);
+    border-radius: 6rpx;
+    position: relative;
+    margin-top: 100rpx;
+    .tag-box {
+      width: 140rpx;
+      height: 140rpx;
+      background: var(--ui-BG);
+      border-radius: 50%;
+      position: absolute;
+      top: -70rpx;
+      left: 50%;
+      z-index: 6;
+      transform: translateX(-50%);
+
+      .tag-image {
+        width: 104rpx;
+        height: 104rpx;
+        border-radius: 50%;
+      }
+    }
+
+    .top {
+      background-color: #fff;
+      border-radius: 20rpx 20rpx 0 0;
+      -webkit-mask: radial-gradient(circle at 16rpx 100%, #0000 16rpx, red 0) -16rpx;
+      padding: 110rpx 0 0 0;
+      position: relative;
+      z-index: 5;
+
+      .title {
+        font-size: 40rpx;
+        color: #333;
+        font-weight: bold;
+      }
+
+      .subtitle {
+        font-size: 28rpx;
+        color: #333333;
+      }
+
+      .use-btn {
+        width: 386rpx;
+        height: 80rpx;
+        line-height: 80rpx;
+        background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+        border-radius: 40rpx;
+        color: $white;
+      }
+
+      .disable-btn {
+        width: 386rpx;
+        height: 80rpx;
+        line-height: 80rpx;
+        background: #e5e5e5;
+        border-radius: 40rpx;
+        color: $white;
+      }
+
+      .time {
+        font-size: 26rpx;
+        font-weight: 400;
+        color: #999999;
+      }
+
+      .coupon-line {
+        width: 95%;
+        border-bottom: 2rpx solid #eeeeee;
+      }
+    }
+
+    .bottom {
+      background-color: #fff;
+      border-radius: 0 0 20rpx 20rpx;
+      -webkit-mask: radial-gradient(circle at 16rpx 0%, #0000 16rpx, red 0) -16rpx;
+      padding: 40rpx 30rpx;
+
+      .type {
+        height: 96rpx;
+        border-bottom: 2rpx solid #eeeeee;
+      }
+    }
+
+    .des {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #666666;
+    }
+  }
+
+  .all-user {
+    width: 100%;
+    height: 300rpx;
+    font-size: 34rpx;
+    font-weight: bold;
+    color: #333333;
+  }
+</style>
diff --git a/src/pages/coupon/list.vue b/src/pages/coupon/list.vue
new file mode 100644
index 00000000..2afffd75
--- /dev/null
+++ b/src/pages/coupon/list.vue
@@ -0,0 +1,222 @@
+<!-- 优惠券中心  -->
+<template>
+  <s-layout :bgStyle="{ color: '#f2f2f2' }" title="优惠券">
+    <su-sticky bgColor="#fff">
+      <su-tabs
+        :list="tabMaps"
+        :scrollable="false"
+        @change="onTabsChange"
+        :current="state.currentTab"
+      />
+    </su-sticky>
+    <s-empty
+      v-if="state.pagination.total === 0"
+      icon="/static/coupon-empty.png"
+      text="暂无优惠券"
+    />
+    <!-- 情况一：领劵中心 -->
+    <template v-if="state.currentTab === 0">
+      <view v-for="item in state.pagination.list" :key="item.id">
+        <s-coupon-list
+          :data="item"
+          @tap="sheep.$router.go('/pages/coupon/detail', { id: item.id })"
+        >
+          <template #default>
+            <button
+              class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
+              :class="!item.canTake ? 'border-btn' : ''"
+              @click.stop="getBuy(item.id)"
+              :disabled="!item.canTake"
+            >
+              {{ item.canTake ? '立即领取' : '已领取' }}
+            </button>
+          </template>
+        </s-coupon-list>
+      </view>
+    </template>
+    <!-- 情况二：我的优惠劵 -->
+    <template v-else>
+      <view v-for="item in state.pagination.list" :key="item.id">
+        <s-coupon-list
+          :data="item"
+          type="user"
+          @tap="sheep.$router.go('/pages/coupon/detail', { couponId: item.id })"
+        >
+          <template #default>
+            <button
+              class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
+              :class="item.status !== 1 ? 'disabled-btn' : ''"
+              :disabled="item.status !== 1"
+              @click.stop="sheep.$router.go('/pages/coupon/detail', { couponId: item.id })"
+            >
+              {{ item.status === 1 ? '立即使用' : item.status === 2 ? '已使用' : '已过期' }}
+            </button>
+          </template>
+        </s-coupon-list>
+      </view>
+    </template>
+
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import _ from 'lodash-es';
+  import { resetPagination } from '@/sheep/helper/utils';
+  import CouponApi from '@/sheep/api/promotion/coupon';
+
+  // 数据
+  const state = reactive({
+    currentTab: 0, // 当前 tab
+    type: '1',
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 5,
+    },
+    loadStatus: '',
+  });
+
+  const tabMaps = [
+    {
+      name: '领券中心',
+      value: 'all',
+    },
+    {
+      name: '已领取',
+      value: '1',
+    },
+    {
+      name: '已使用',
+      value: '2',
+    },
+    {
+      name: '已失效',
+      value: '3',
+    },
+  ];
+
+  function onTabsChange(e) {
+    state.currentTab = e.index;
+    state.type = e.value;
+    resetPagination(state.pagination);
+    if (state.currentTab === 0) {
+      getData();
+    } else {
+      getCoupon();
+    }
+  }
+
+  // 获得优惠劵模版列表
+  async function getData() {
+    state.loadStatus = 'loading';
+    const { data, code } = await CouponApi.getCouponTemplatePage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 获得我的优惠劵
+  async function getCoupon() {
+    state.loadStatus = 'loading';
+    const { data, code } = await CouponApi.getCouponPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      status: state.type,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 领取优惠劵
+  async function getBuy(id) {
+    const { code } = await CouponApi.takeCoupon(id);
+    if (code !== 0) {
+      return;
+    }
+    uni.showToast({
+      title: '领取成功',
+    });
+    setTimeout(() => {
+      resetPagination(state.pagination);
+      getData();
+    }, 1000);
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    if (state.currentTab === 0) {
+      getData();
+    } else {
+      getCoupon();
+    }
+  }
+
+  onLoad((Option) => {
+    // 领劵中心
+    if (Option.type === 'all' || !Option.type) {
+      getData();
+      // 我的优惠劵
+    } else {
+      Option.type === 'geted'
+        ? (state.currentTab = 1)
+        : Option.type === 'used'
+        ? (state.currentTab = 2)
+        : (state.currentTab = 3);
+      state.type = state.currentTab;
+      getCoupon();
+    }
+  });
+
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+<style lang="scss" scoped>
+  .card-btn {
+    // width: 144rpx;
+    padding: 0 16rpx;
+    height: 50rpx;
+    border-radius: 40rpx;
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    color: #ffffff;
+    font-size: 24rpx;
+    font-weight: 400;
+  }
+
+  .border-btn {
+    background: linear-gradient(90deg, var(--ui-BG-Main-opacity-4), var(--ui-BG-Main-light));
+    color: #fff !important;
+  }
+
+  .disabled-btn {
+    background: #cccccc;
+    background-color: #cccccc !important;
+    color: #fff !important;
+  }
+</style>
diff --git a/src/pages/goods/comment/add.vue b/src/pages/goods/comment/add.vue
new file mode 100644
index 00000000..c52024c0
--- /dev/null
+++ b/src/pages/goods/comment/add.vue
@@ -0,0 +1,190 @@
+<!-- 评价  -->
+<template>
+  <s-layout title="评价">
+    <view>
+      <view v-for="(item, index) in state.orderInfo.items" :key="item.id">
+        <view>
+          <view class="commont-from-wrap">
+            <!-- 评价商品 -->
+            <s-goods-item
+              :img="item.picUrl"
+              :title="item.spuName"
+              :skuText="item.properties.map((property) => property.valueName).join(' ')"
+              :price="item.payPrice"
+              :num="item.count"
+            />
+          </view>
+
+          <view class="form-item">
+            <!-- 评分 -->
+            <view class="star-box ss-flex ss-col-center">
+              <view class="star-title ss-m-r-40">商品质量</view>
+              <uni-rate v-model="state.commentList[index].descriptionScores" />
+            </view>
+            <view class="star-box ss-flex ss-col-center">
+              <view class="star-title ss-m-r-40">服务态度</view>
+              <uni-rate v-model="state.commentList[index].benefitScores" />
+            </view>
+            <!-- 评价 -->
+            <view class="area-box">
+              <uni-easyinput
+                :inputBorder="false"
+                type="textarea"
+                maxlength="120"
+                autoHeight
+                v-model="state.commentList[index].content"
+                placeholder="宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧~"
+              />
+              <view class="img-box">
+                <s-uploader
+                  v-model:url="state.commentList[index].images"
+                  fileMediatype="image"
+                  limit="9"
+                  mode="grid"
+                  :imageStyles="{ width: '168rpx', height: '168rpx' }"
+                  @success="(payload) => uploadSuccess(payload, index)"
+                />
+              </view>
+            </view>
+            <view class="checkbox-container">
+              <checkbox-group @change="(event) => toggleAnonymous(index, event)">
+                <label>
+                  <checkbox value="anonymousChecked" />
+                  匿名评论
+                </label>
+              </checkbox-group>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <su-fixed bottom placeholder>
+      <view class="foot_box ss-flex ss-row-center ss-col-center">
+        <button class="ss-reset-button post-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onSubmit">
+          发布
+        </button>
+      </view>
+    </su-fixed>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import OrderApi from '@/sheep/api/trade/order';
+
+  const state = reactive({
+    orderInfo: {},
+    commentList: [],
+    id: null,
+  });
+
+  /**
+   * 切换是否匿名
+   *
+   * @param commentIndex  当前评论下标
+   * @param event 复选框事件
+   */
+  function toggleAnonymous(commentIndex, event) {
+    state.commentList[commentIndex].anonymous = event.detail.value[0] === 'anonymousChecked';
+  }
+
+  /**
+   * 发布评论
+   *
+   * @returns {Promise<void>}
+   */
+  async function onSubmit() {
+    // 顺序提交评论
+    for (const comment of state.commentList) {
+      await OrderApi.createOrderItemComment(comment);
+    }
+    // 都评论好，返回
+    sheep.$router.back();
+  }
+
+  /**
+   * 图片添加到表单
+   *
+   * @param payload 上传成功后的回调数据
+   * @param commentIndex  当前评论的下标
+   */
+  function uploadSuccess(payload, commentIndex) {
+    state.commentList[commentIndex].picUrls = payload.tempFilePaths;
+  }
+
+  onLoad(async (options) => {
+    if (!options.id) {
+      sheep.$helper.toast(`缺少订单信息，请检查`);
+      return;
+    }
+    state.id = options.id;
+
+    const { code, data } = await OrderApi.getOrderDetail(state.id);
+    if (code !== 0) {
+      sheep.$helper.toast('无待评价订单');
+      return;
+    }
+    // 处理评论
+    data.items.forEach((item) => {
+      state.commentList.push({
+        anonymous: false,
+        orderItemId: item.id,
+        descriptionScores: 5,
+        benefitScores: 5,
+        content: '',
+        picUrls: [],
+      });
+    });
+    state.orderInfo = data;
+  });
+</script>
+
+<style lang="scss" scoped>
+  // 评价商品
+  .goods-card {
+    margin: 10rpx 0;
+    padding: 20rpx;
+    background: #fff;
+  }
+
+  // 评论，选择图片
+  .form-item {
+    background: #fff;
+
+    .star-box {
+      height: 100rpx;
+      padding: 0 25rpx;
+    }
+
+    .star-title {
+      font-weight: 600;
+    }
+  }
+
+  .area-box {
+    width: 690rpx;
+    min-height: 306rpx;
+    background: rgba(249, 250, 251, 1);
+    border-radius: 20rpx;
+    padding: 28rpx;
+    margin: auto;
+
+    .img-box {
+      margin-top: 20rpx;
+    }
+  }
+
+  .checkbox-container {
+    padding: 10rpx;
+  }
+
+  .post-btn {
+    width: 690rpx;
+    line-height: 80rpx;
+    border-radius: 40rpx;
+    color: rgba(#fff, 0.9);
+    margin-bottom: 20rpx;
+  }
+</style>
diff --git a/src/pages/goods/comment/list.vue b/src/pages/goods/comment/list.vue
new file mode 100644
index 00000000..ed55988b
--- /dev/null
+++ b/src/pages/goods/comment/list.vue
@@ -0,0 +1,168 @@
+<!-- 商品评论的分页 -->
+<template>
+  <s-layout title="全部评论">
+    <su-tabs
+      :list="state.type"
+      :scrollable="false"
+      @change="onTabsChange"
+      :current="state.currentTab"
+    />
+    <!-- 评论列表 -->
+    <view class="ss-m-t-20">
+      <view class="list-item" v-for="item in state.pagination.list" :key="item">
+        <comment-item :item="item" />
+      </view>
+    </view>
+    <s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
+    <!-- 下拉 -->
+    <uni-load-more
+      icon-type="auto"
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import CommentApi from '@/sheep/api/product/comment';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import _ from 'lodash-es';
+  import commentItem from '../components/detail/comment-item.vue';
+
+  const state = reactive({
+    id: 0, // 商品 SPU 编号
+    type: [
+      { type: 0, name: '全部' },
+      { type: 1, name: '好评' },
+      { type: 2, name: '中评' },
+      { type: 3, name: '差评' },
+    ],
+    currentTab: 0, // 选中的 TAB
+    loadStatus: '',
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 8,
+    },
+  });
+
+  // 切换选项卡
+  function onTabsChange(e) {
+    state.currentTab = e.index;
+    // 加载列表
+    state.pagination.pageNo = 1;
+    state.pagination.list = [];
+    state.pagination.total = 0;
+    getList();
+  }
+
+  async function getList() {
+    // 加载列表
+    state.loadStatus = 'loading';
+    let res = await CommentApi.getCommentPage(
+      state.id,
+      state.pagination.pageNo,
+      state.pagination.pageSize,
+      state.type[state.currentTab].type,
+    );
+    if (res.code !== 0) {
+      return;
+    }
+    // 合并列表
+    state.pagination.list = _.concat(state.pagination.list, res.data.list);
+    state.pagination.total = res.data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getList();
+  }
+
+  onLoad((options) => {
+    state.id = options.id;
+    getList();
+  });
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .list-item {
+    padding: 32rpx 30rpx 20rpx 20rpx;
+    background: #fff;
+
+    .avatar {
+      width: 52rpx;
+      height: 52rpx;
+      border-radius: 50%;
+    }
+
+    .nickname {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #999999;
+    }
+
+    .create-time {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #c4c4c4;
+    }
+
+    .content-title {
+      font-size: 26rpx;
+      font-weight: 400;
+      color: #666666;
+      line-height: 42rpx;
+    }
+
+    .content-img {
+      width: 174rpx;
+      height: 174rpx;
+    }
+
+    .cicon-info-o {
+      font-size: 26rpx;
+      color: #c4c4c4;
+    }
+
+    .foot-title {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #999999;
+    }
+  }
+
+  .btn-box {
+    width: 100%;
+    height: 120rpx;
+    background: #fff;
+    border-top: 2rpx solid #eee;
+  }
+
+  .tab-btn {
+    width: 130rpx;
+    height: 62rpx;
+    background: #eeeeee;
+    border-radius: 31rpx;
+    font-size: 28rpx;
+    font-weight: 400;
+    color: #999999;
+    border: 1px solid #e5e5e5;
+    margin-right: 10rpx;
+  }
+</style>
diff --git a/src/pages/goods/components/detail/comment-item.vue b/src/pages/goods/components/detail/comment-item.vue
new file mode 100644
index 00000000..518db2a8
--- /dev/null
+++ b/src/pages/goods/components/detail/comment-item.vue
@@ -0,0 +1,94 @@
+<!-- 商品评论项 -->
+<template>
+  <view>
+    <!-- 用户评论 -->
+    <view class="user ss-flex ss-m-b-14">
+      <view class="ss-m-r-20 ss-flex">
+        <image class="avatar" :src="item.userAvatar"></image>
+      </view>
+      <view class="nickname ss-m-r-20">{{ item.userNickname }}</view>
+      <view class="">
+        <uni-rate :readonly="true" v-model="item.scores" size="18" />
+      </view>
+    </view>
+    <view class="content"> {{ item.content }} </view>
+    <view class="ss-m-t-24" v-if="item.picUrls?.length">
+      <scroll-view class="scroll-box" scroll-x scroll-anchoring>
+        <view class="ss-flex">
+          <view v-for="(picUrl, index) in item.picUrls" :key="picUrl" class="ss-m-r-10">
+            <su-image
+              class="content-img"
+              isPreview
+              :previewList="item.picUrls"
+              :current="index"
+              :src="picUrl"
+              :height="120"
+              :width="120"
+              mode="aspectFill"
+            />
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <!-- 商家回复 -->
+    <view class="ss-m-t-20 reply-box" v-if="item.replyTime">
+      <view class="reply-title">商家回复：</view>
+      <view class="reply-content">{{ item.replyContent }}</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  const props = defineProps({
+    item: {
+      type: Object,
+      default() {},
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .avatar {
+    width: 52rpx;
+    height: 52rpx;
+    border-radius: 50%;
+  }
+
+  .nickname {
+    font-size: 26rpx;
+    font-weight: 500;
+    color: #999999;
+  }
+
+  .content {
+    width: 636rpx;
+    font-size: 26rpx;
+    font-weight: 400;
+    color: #333333;
+  }
+
+  .reply-box {
+    position: relative;
+    background: #f8f8f8;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+
+  .reply-title {
+    position: absolute;
+    left: 16rpx;
+    top: 16rpx;
+    font-weight: 400;
+    font-size: 26rpx;
+    line-height: 40rpx;
+    color: #333333;
+  }
+
+  .reply-content {
+    text-indent: 128rpx;
+    font-weight: 400;
+    font-size: 26rpx;
+    line-height: 40rpx;
+    color: #333333;
+  }
+</style>
diff --git a/src/pages/goods/components/detail/detail-activity-tip.vue b/src/pages/goods/components/detail/detail-activity-tip.vue
new file mode 100644
index 00000000..e80fe392
--- /dev/null
+++ b/src/pages/goods/components/detail/detail-activity-tip.vue
@@ -0,0 +1,99 @@
+<template>
+  <su-fixed bottom placeholder :val="44">
+    <view>
+      <view v-for="activity in props.activityList" :key="activity.id">
+        <view
+          class="activity-box ss-p-x-38 ss-flex ss-row-between ss-col-center"
+          :class="activity.type === 1 ? 'seckill-box' : 'groupon-box'"
+        >
+          <view class="activity-title ss-flex">
+            <view class="ss-m-r-16">
+              <image
+                v-if="activity.type === 1"
+                :src="sheep.$url.static('/static/img/shop/goods/seckill-icon.png')"
+                class="activity-icon"
+              />
+              <image
+                v-else-if="activity.type === 3"
+                :src="sheep.$url.static('/static/img/shop/goods/groupon-icon.png')"
+                class="activity-icon"
+              />
+            </view>
+            <view>该商品正在参与{{ activity.name }}活动</view>
+          </view>
+          <button class="ss-reset-button activity-go" @tap="onActivity(activity)"> GO </button>
+        </view>
+      </view>
+    </view>
+  </su-fixed>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+
+  const seckillBg = sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png');
+  const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png');
+
+  const props = defineProps({
+    activityList: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  });
+
+  function onActivity(activity) {
+    const type = activity.type;
+    const typePath = type === 1 ? 'seckill' : type === 3 ? 'groupon' : undefined;
+    if (!typePath) {
+      return;
+    }
+    sheep.$router.go(`/pages/goods/${typePath}`, {
+      id: activity.id,
+    });
+  }
+</script>
+
+<style lang="scss" scoped>
+  .activity-box {
+    width: 100%;
+    height: 80rpx;
+    box-sizing: border-box;
+    margin-bottom: 10rpx;
+
+    .activity-title {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 42rpx;
+
+      .activity-icon {
+        width: 38rpx;
+        height: 38rpx;
+      }
+    }
+
+    .activity-go {
+      width: 70rpx;
+      height: 32rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      font-weight: 500;
+      color: #ff6000;
+      font-size: 24rpx;
+      line-height: normal;
+    }
+  }
+
+  //秒杀卡片
+  .seckill-box {
+    background: v-bind(seckillBg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .groupon-box {
+    background: v-bind(grouponBg) no-repeat;
+    background-size: 100% 100%;
+  }
+</style>
diff --git a/src/pages/goods/components/detail/detail-cell-sku.vue b/src/pages/goods/components/detail/detail-cell-sku.vue
new file mode 100644
index 00000000..11f1b204
--- /dev/null
+++ b/src/pages/goods/components/detail/detail-cell-sku.vue
@@ -0,0 +1,31 @@
+<template>
+  <!-- SKU 选择的提示框 -->
+  <detail-cell label="选择" :value="value" />
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import detailCell from './detail-cell.vue';
+
+  const props = defineProps({
+    modelValue: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    sku: {
+      type: Object
+    }
+  });
+  const value = computed(() => {
+    if (!props.sku?.id) {
+      return '请选择商品规格';
+    }
+    let str = '';
+    props.sku.properties.forEach(property => {
+      str += property.propertyName + ':' + property.valueName + ' ';
+    });
+    return str;
+  });
+</script>
diff --git a/src/pages/goods/components/detail/detail-cell.vue b/src/pages/goods/components/detail/detail-cell.vue
new file mode 100644
index 00000000..b4c56dd5
--- /dev/null
+++ b/src/pages/goods/components/detail/detail-cell.vue
@@ -0,0 +1,60 @@
+<!-- 商品详情：cell 组件 -->
+<template>
+  <view class="detail-cell-wrap ss-flex ss-col-center ss-row-between" @tap="onClick">
+    <view class="label-text">{{ label }}</view>
+    <view class="cell-content ss-line-1 ss-flex-1">{{ value }}</view>
+    <button class="ss-reset-button">
+      <text class="_icon-forward right-forwrad-icon"></text>
+    </button>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 详情 cell
+   *
+   */
+  const props = defineProps({
+    label: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const emits = defineEmits(['click']);
+
+  // 点击
+  const onClick = () => {
+    emits('click');
+  };
+</script>
+
+<style lang="scss" scoped>
+  .detail-cell-wrap {
+    padding: 10rpx 20rpx;
+    // min-height: 60rpx;
+
+    .label-text {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: $dark-9;
+      margin-right: 38rpx;
+    }
+
+    .cell-content {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: $dark-6;
+    }
+
+    .right-forwrad-icon {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: $dark-9;
+    }
+  }
+</style>
diff --git a/src/pages/goods/components/detail/detail-comment-card.vue b/src/pages/goods/components/detail/detail-comment-card.vue
new file mode 100644
index 00000000..cc48dfde
--- /dev/null
+++ b/src/pages/goods/components/detail/detail-comment-card.vue
@@ -0,0 +1,106 @@
+<!-- 商品评论的卡片 -->
+<template>
+  <view class="detail-comment-card bg-white">
+    <view class="card-header ss-flex ss-col-center ss-row-between ss-p-b-30">
+      <view class="ss-flex ss-col-center">
+        <view class="line"></view>
+        <view class="title ss-m-l-20 ss-m-r-10">评价</view>
+        <view class="des">({{ state.total }})</view>
+      </view>
+      <view
+        class="ss-flex ss-col-center"
+        @tap="sheep.$router.go('/pages/goods/comment/list', { id: goodsId })"
+        v-if="state.commentList.length > 0"
+      >
+        <button class="ss-reset-button more-btn">查看全部</button>
+        <text class="cicon-forward" />
+      </view>
+    </view>
+    <!-- 评论列表 -->
+    <view class="card-content">
+      <view class="comment-box ss-p-y-30" v-for="item in state.commentList" :key="item.id">
+        <comment-item :item="item" />
+      </view>
+      <s-empty
+        v-if="state.commentList.length === 0"
+        paddingTop="0"
+        icon="/static/comment-empty.png"
+        text="期待您的第一个评价"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { reactive, onBeforeMount } from 'vue';
+  import sheep from '@/sheep';
+  import CommentApi from '@/sheep/api/product/comment';
+  import commentItem from './comment-item.vue';
+
+  const props = defineProps({
+    goodsId: {
+      type: [Number, String],
+      default: 0,
+    },
+  });
+
+  const state = reactive({
+    commentList: [], // 评论列表，只展示最近的 3 条
+    total: 0, // 总评论数
+  });
+
+  async function getComment(id) {
+    const { data } = await CommentApi.getCommentPage(id, 1, 3, 0);
+    state.commentList = data.list;
+    state.total = data.total;
+  }
+
+  onBeforeMount(() => {
+    getComment(props.goodsId);
+  });
+</script>
+
+<style lang="scss" scoped>
+  .detail-comment-card {
+    margin: 0 20rpx 20rpx 20rpx;
+    padding: 20rpx 20rpx 0 20rpx;
+    .card-header {
+      .line {
+        width: 6rpx;
+        height: 30rpx;
+        background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
+        border-radius: 3rpx;
+      }
+
+      .title {
+        font-size: 30rpx;
+        font-weight: bold;
+        line-height: normal;
+      }
+
+      .des {
+        font-size: 24rpx;
+        color: $dark-9;
+      }
+
+      .more-btn {
+        font-size: 24rpx;
+        color: var(--ui-BG-Main);
+        line-height: normal;
+      }
+
+      .cicon-forward {
+        font-size: 24rpx;
+        line-height: normal;
+        color: var(--ui-BG-Main);
+        margin-top: 4rpx;
+      }
+    }
+  }
+  .comment-box {
+    border-bottom: 2rpx solid #eeeeee;
+    &:last-child {
+      border: none;
+    }
+  }
+</style>
diff --git a/src/pages/goods/components/detail/detail-content-card.vue b/src/pages/goods/components/detail/detail-content-card.vue
new file mode 100644
index 00000000..38d45f98
--- /dev/null
+++ b/src/pages/goods/components/detail/detail-content-card.vue
@@ -0,0 +1,54 @@
+<template>
+  <view class="detail-content-card bg-white ss-m-x-20 ss-p-t-20">
+    <view class="card-header ss-flex ss-col-center ss-m-b-30 ss-m-l-20">
+      <view class="line"></view>
+      <view class="title ss-m-l-20 ss-m-r-20">详情</view>
+    </view>
+    <view class="card-content">
+      <mp-html :content="content"></mp-html>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  const props = defineProps({
+    content: {
+      type: String,
+      default: '',
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .detail-content-card {
+    .card-header {
+      .line {
+        width: 6rpx;
+        height: 30rpx;
+        background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
+        border-radius: 3rpx;
+      }
+
+      .title {
+        font-size: 30rpx;
+        font-weight: bold;
+      }
+
+      .des {
+        font-size: 24rpx;
+        color: $dark-9;
+      }
+
+      .more-btn {
+        font-size: 24rpx;
+        color: var(--ui-BG-Main);
+      }
+    }
+  }
+
+  :deep() {
+    image {
+      display: block;
+    }
+  }
+</style>
diff --git a/src/pages/goods/components/detail/detail-navbar.vue b/src/pages/goods/components/detail/detail-navbar.vue
new file mode 100644
index 00000000..d454ec0f
--- /dev/null
+++ b/src/pages/goods/components/detail/detail-navbar.vue
@@ -0,0 +1,257 @@
+<!-- 商品详情：商品/评价/详情的 nav -->
+<template>
+  <su-fixed alway :bgStyles="{ background: '#fff' }" :val="0" noNav opacity :placeholder="false">
+    <su-status-bar />
+    <view
+      class="ui-bar ss-flex ss-col-center ss-row-between ss-p-x-20"
+      :style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
+    >
+      <!-- 左 -->
+      <view class="icon-box ss-flex">
+        <view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
+          <text class="sicon-back" v-if="hasHistory" />
+          <text class="sicon-home" v-else />
+        </view>
+        <view class="line"></view>
+        <view class="icon-button icon-button-right ss-flex ss-row-center" @tap="onClickRight">
+          <text class="sicon-more" />
+        </view>
+      </view>
+      <!-- 中 -->
+      <view class="detail-tab-card ss-flex-1" :style="[{ opacity: state.tabOpacityVal }]">
+        <view class="tab-box ss-flex ss-col-center ss-row-around">
+          <view
+            class="tab-item ss-flex-1 ss-flex ss-row-center ss-col-center"
+            v-for="item in state.tabList"
+            :key="item.value"
+            @tap="onTab(item)"
+          >
+            <view class="tab-title" :class="state.curTab === item.value ? 'cur-tab-title' : ''">
+              {{ item.label }}
+            </view>
+            <view v-show="state.curTab === item.value" class="tab-line"></view>
+          </view>
+        </view>
+      </view>
+      <!-- #ifdef MP -->
+      <view :style="[capsuleStyle]"></view>
+      <!-- #endif -->
+    </view>
+  </su-fixed>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import { onPageScroll } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import throttle from '@/sheep/helper/throttle.js';
+  import { showMenuTools } from '@/sheep/hooks/useModal';
+
+  const sys_statusBar = sheep.$platform.device.statusBarHeight;
+  const sys_navBar = sheep.$platform.navbar;
+  const capsuleStyle = {
+    width: sheep.$platform.capsule.width + 'px',
+    height: sheep.$platform.capsule.height + 'px',
+  };
+
+  const state = reactive({
+    tabOpacityVal: 0,
+    curTab: 'goods',
+    tabList: [
+      {
+        label: '商品',
+        value: 'goods',
+        to: 'detail-swiper-selector',
+      },
+      {
+        label: '评价',
+        value: 'comment',
+        to: 'detail-comment-selector',
+      },
+      {
+        label: '详情',
+        value: 'detail',
+        to: 'detail-content-selector',
+      },
+    ],
+  });
+  const emits = defineEmits(['clickLeft']);
+  const hasHistory = sheep.$router.hasHistory();
+
+  function onClickLeft() {
+    if (hasHistory) {
+      sheep.$router.back();
+    } else {
+      sheep.$router.go('/pages/index/index');
+    }
+    emits('clickLeft');
+  }
+
+  function onClickRight() {
+    showMenuTools();
+  }
+
+  let commentCard = {
+    top: 0,
+    bottom: 0,
+  };
+
+  function getCommentCardNode() {
+    return new Promise((res, rej) => {
+      uni
+        .createSelectorQuery()
+        .select('.detail-comment-selector')
+        .boundingClientRect((data) => {
+          if (data) {
+            commentCard.top = data.top;
+            commentCard.bottom = data.top + data.height;
+            res(data);
+          } else {
+            res(null);
+          }
+        })
+        .exec();
+    });
+  }
+
+  function onTab(tab) {
+    let scrollTop = 0;
+    if (tab.value === 'comment') {
+      scrollTop = commentCard.top - sys_navBar + 1;
+    } else if (tab.value === 'detail') {
+      scrollTop = commentCard.bottom - sys_navBar + 1;
+    }
+    uni.pageScrollTo({
+      scrollTop,
+      duration: 200,
+    });
+  }
+
+  onPageScroll((e) => {
+    state.tabOpacityVal = e.scrollTop > sheep.$platform.navbar ? 1 : e.scrollTop * 0.01;
+    if (commentCard.top === 0) {
+      throttle(() => {
+        getCommentCardNode();
+      }, 50);
+    }
+
+    if (e.scrollTop < commentCard.top - sys_navBar) {
+      state.curTab = 'goods';
+    } else if (
+      e.scrollTop >= commentCard.top - sys_navBar &&
+      e.scrollTop <= commentCard.bottom - sys_navBar
+    ) {
+      state.curTab = 'comment';
+    } else {
+      state.curTab = 'detail';
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .icon-box {
+    box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
+    border-radius: 30rpx;
+    width: 134rpx;
+    height: 56rpx;
+    margin-left: 8rpx;
+    border: 1px solid rgba(#fff, 0.4);
+    .line {
+      width: 2rpx;
+      height: 24rpx;
+      background: #e5e5e7;
+    }
+    .sicon-back {
+      font-size: 32rpx;
+      color: #000;
+    }
+    .sicon-home {
+      font-size: 32rpx;
+      color: #000;
+    }
+    .sicon-more {
+      font-size: 32rpx;
+      color: #000;
+    }
+    .icon-button {
+      width: 67rpx;
+      height: 56rpx;
+      &-left:hover {
+        background: rgba(0, 0, 0, 0.16);
+        border-radius: 30rpx 0px 0px 30rpx;
+      }
+      &-right:hover {
+        background: rgba(0, 0, 0, 0.16);
+        border-radius: 0px 30rpx 30rpx 0px;
+      }
+    }
+  }
+  .left-box {
+    position: relative;
+    width: 60rpx;
+    height: 60rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .circle {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 60rpx;
+      height: 60rpx;
+      background: rgba(#fff, 0.6);
+      border: 1rpx solid #ebebeb;
+      border-radius: 50%;
+      box-sizing: border-box;
+      z-index: -1;
+    }
+  }
+  .right {
+    position: relative;
+    width: 60rpx;
+    height: 60rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .circle {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 60rpx;
+      height: 60rpx;
+      background: rgba(#ffffff, 0.6);
+      border: 1rpx solid #ebebeb;
+      box-sizing: border-box;
+      border-radius: 50%;
+      z-index: -1;
+    }
+  }
+  .detail-tab-card {
+    width: 50%;
+    .tab-item {
+      height: 80rpx;
+      position: relative;
+      z-index: 11;
+
+      .tab-title {
+        font-size: 30rpx;
+      }
+
+      .cur-tab-title {
+        font-weight: $font-weight-bold;
+      }
+
+      .tab-line {
+        width: 60rpx;
+        height: 6rpx;
+        border-radius: 6rpx;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 10rpx;
+        background-color: var(--ui-BG-Main);
+        z-index: 12;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/goods/components/detail/detail-progress.vue b/src/pages/goods/components/detail/detail-progress.vue
new file mode 100644
index 00000000..a6210b16
--- /dev/null
+++ b/src/pages/goods/components/detail/detail-progress.vue
@@ -0,0 +1,40 @@
+<!-- 秒杀商品：抢购进度 -->
+<template>
+  <view class="ss-flex ss-col-center">
+    <view class="progress-title ss-m-r-10"> 已抢{{ percent }}% </view>
+    <view class="progress-box ss-flex ss-col-center">
+      <view class="progerss-active" :style="{ width: percent < 10 ? '10%' : percent + '%' }">
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  const props = defineProps({
+    percent: {
+      type: Number,
+      default: 0,
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .progress-title {
+    font-size: 20rpx;
+    font-weight: 500;
+    color: #ffffff;
+  }
+
+  .progress-box {
+    width: 168rpx;
+    height: 18rpx;
+    background: #f6f6f6;
+    border-radius: 9rpx;
+  }
+
+  .progerss-active {
+    height: 24rpx;
+    background: linear-gradient(86deg, #f60600, #d00500);
+    border-radius: 12rpx;
+  }
+</style>
diff --git a/src/pages/goods/components/detail/detail-skeleton.vue b/src/pages/goods/components/detail/detail-skeleton.vue
new file mode 100644
index 00000000..5eebf50c
--- /dev/null
+++ b/src/pages/goods/components/detail/detail-skeleton.vue
@@ -0,0 +1,177 @@
+<template>
+  <view
+    class="skeleton-wrap"
+    :class="['theme-' + sys.mode, 'main-' + sys.theme, 'font-' + sys.fontSize]"
+  >
+    <view class="skeleton-banner"></view>
+    <view class="container-box">
+      <view class="container-box-strip title ss-m-b-58"></view>
+      <view class="container-box-strip ss-m-b-20"></view>
+      <view class="container-box-strip ss-m-b-20"></view>
+      <view class="container-box-strip w-364"></view>
+    </view>
+    <view class="container-box">
+      <view class="ss-flex ss-row-between ss-m-b-34">
+        <view class="container-box-strip w-380"></view>
+        <view class="circle"></view>
+      </view>
+      <view class="ss-flex ss-row-between ss-m-b-34">
+        <view class="container-box-strip w-556"></view>
+        <view class="circle"></view>
+      </view>
+      <view class="ss-flex ss-row-between">
+        <view class="container-box-strip w-556"></view>
+        <view class="circle"></view>
+      </view>
+    </view>
+    <view class="container-box">
+      <view class="container-box-strip w-198 ss-m-b-42"></view>
+      <view class="ss-flex">
+        <view class="circle ss-m-r-12"></view>
+        <view class="container-box-strip w-252"></view>
+      </view>
+    </view>
+    <su-fixed bottom placeholder bg="bg-white">
+      <view class="ui-tabbar-box">
+        <view class="foot ss-flex ss-col-center">
+          <view class="ss-m-r-54 ss-m-l-32">
+            <view class="rec ss-m-b-8"></view>
+            <view class="oval"></view>
+          </view>
+          <view class="ss-m-r-54">
+            <view class="rec ss-m-b-8"></view>
+            <view class="oval"></view>
+          </view>
+          <view class="ss-m-r-50">
+            <view class="rec ss-m-b-8"></view>
+            <view class="oval"></view>
+          </view>
+          <button class="ss-reset-button add-btn ui-Shadow-Main"></button>
+          <button class="ss-reset-button buy-btn ui-Shadow-Main"></button>
+        </view>
+      </view>
+    </su-fixed>
+  </view>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import sheep from '@/sheep';
+
+  const sys = computed(() => sheep.$store('sys'));
+</script>
+
+<style lang="scss" scoped>
+  @keyframes loading {
+    0% {
+      opacity: 0.5;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0.5;
+    }
+  }
+
+  .skeleton-wrap {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+
+    .skeleton-banner {
+      width: 100%;
+      height: calc(100vh - 882rpx);
+      background: #f4f4f4;
+    }
+
+    .container-box {
+      padding: 24rpx 18rpx;
+      margin: 14rpx 20rpx;
+      background: var(--ui-BG);
+      animation: loading 1.4s ease infinite;
+
+      .container-box-strip {
+        height: 40rpx;
+        background: #f3f3f1;
+        border-radius: 20rpx;
+      }
+
+      .title {
+        width: 470rpx;
+        height: 50rpx;
+        border-radius: 25rpx;
+      }
+
+      .w-364 {
+        width: 364rpx;
+      }
+
+      .w-380 {
+        width: 380rpx;
+      }
+
+      .w-556 {
+        width: 556rpx;
+      }
+
+      .w-198 {
+        width: 198rpx;
+      }
+
+      .w-252 {
+        width: 252rpx;
+      }
+
+      .circle {
+        width: 40rpx;
+        height: 40rpx;
+        background: #f3f3f1;
+        border-radius: 50%;
+      }
+    }
+    .ui-tabbar-box {
+      box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
+    }
+
+    .foot {
+      height: 100rpx;
+      background: var(--ui-BG);
+      .rec {
+        width: 38rpx;
+        height: 38rpx;
+        background: #f3f3f1;
+        border-radius: 8rpx;
+      }
+
+      .oval {
+        width: 38rpx;
+        height: 22rpx;
+        background: #f3f3f1;
+        border-radius: 11rpx;
+      }
+      .add-btn {
+        width: 214rpx;
+        height: 72rpx;
+        font-weight: 500;
+        font-size: 28rpx;
+        border-radius: 40rpx 0 0 40rpx;
+        background-color: var(--ui-BG-Main-light);
+        color: var(--ui-BG-Main);
+      }
+
+      .buy-btn {
+        width: 214rpx;
+        height: 72rpx;
+        font-weight: 500;
+        font-size: 28rpx;
+
+        border-radius: 0 40rpx 40rpx 0;
+        background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+        color: $white;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/goods/components/detail/detail-tabbar.vue b/src/pages/goods/components/detail/detail-tabbar.vue
new file mode 100644
index 00000000..bcae5bef
--- /dev/null
+++ b/src/pages/goods/components/detail/detail-tabbar.vue
@@ -0,0 +1,169 @@
+<!-- 商品详情的底部导航 -->
+<template>
+  <su-fixed bottom placeholder bg="bg-white">
+    <view class="ui-tabbar-box">
+      <view class="ui-tabbar ss-flex ss-col-center ss-row-between">
+        <view
+          v-if="collectIcon"
+          class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
+          @tap="onFavorite"
+        >
+          <block v-if="modelValue.favorite">
+            <image
+              class="item-icon"
+              :src="sheep.$url.static('/static/img/shop/goods/collect_1.gif')"
+              mode="aspectFit"
+            />
+            <view class="item-title">已收藏</view>
+          </block>
+          <block v-else>
+            <image
+              class="item-icon"
+              :src="sheep.$url.static('/static/img/shop/goods/collect_0.png')"
+              mode="aspectFit"
+            />
+            <view class="item-title">收藏</view>
+          </block>
+        </view>
+        <view
+          v-if="serviceIcon"
+          class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
+          @tap="onChat"
+        >
+          <image
+            class="item-icon"
+            :src="sheep.$url.static('/static/img/shop/goods/message.png')"
+            mode="aspectFit"
+          />
+          <view class="item-title">客服</view>
+        </view>
+        <view
+          v-if="shareIcon"
+          class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
+          @tap="showShareModal"
+        >
+          <image
+            class="item-icon"
+            :src="sheep.$url.static('/static/img/shop/goods/share.png')"
+            mode="aspectFit"
+          />
+          <view class="item-title">分享</view>
+        </view>
+        <slot></slot>
+      </view>
+    </view>
+  </su-fixed>
+</template>
+
+<script setup>
+  /**
+   *
+   * 底部导航
+   *
+   * @property {String} bg 			 			- 背景颜色Class
+   * @property {String} ui 			 			- 自定义样式Class
+   * @property {Boolean} noFixed 		 			- 是否定位
+   * @property {Boolean} topRadius 		 		- 上圆角
+   */
+  import { reactive } from 'vue';
+  import sheep from '@/sheep';
+  import { showShareModal } from '@/sheep/hooks/useModal';
+  import FavoriteApi from '@/sheep/api/product/favorite';
+
+  // 数据
+  const state = reactive({});
+
+  // 接收参数
+  const props = defineProps({
+    modelValue: {
+      type: Object,
+      default() {},
+    },
+    bg: {
+      type: String,
+      default: 'bg-white',
+    },
+    bgStyles: {
+      type: Object,
+      default() {},
+    },
+    ui: {
+      type: String,
+      default: '',
+    },
+
+    noFixed: {
+      type: Boolean,
+      default: false,
+    },
+    topRadius: {
+      type: Number,
+      default: 0,
+    },
+    collectIcon: {
+      type: Boolean,
+      default: true,
+    },
+    serviceIcon: {
+      type: Boolean,
+      default: true,
+    },
+    shareIcon: {
+      type: Boolean,
+      default: true,
+    },
+  });
+
+  async function onFavorite() {
+    // 情况一：取消收藏
+    if (props.modelValue.favorite) {
+      const { code } = await FavoriteApi.deleteFavorite(props.modelValue.id);
+      if (code !== 0) {
+        return
+      }
+      sheep.$helper.toast('取消收藏');
+      props.modelValue.favorite = false;
+    // 情况二：添加收藏
+    } else {
+      const { code } = await FavoriteApi.createFavorite(props.modelValue.id);
+      if (code !== 0) {
+        return
+      }
+      sheep.$helper.toast('收藏成功');
+      props.modelValue.favorite = true;
+    }
+  }
+
+  const onChat = () => {
+    sheep.$router.go('/pages/chat/index', {
+      id: props.modelValue.id,
+    });
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ui-tabbar-box {
+    box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
+  }
+  .ui-tabbar {
+    display: flex;
+    height: 50px;
+    background: #fff;
+
+    .detail-tabbar-item {
+      width: 100rpx;
+
+      .item-icon {
+        width: 40rpx;
+        height: 40rpx;
+      }
+
+      .item-title {
+        font-size: 20rpx;
+        font-weight: 500;
+        line-height: 20rpx;
+        margin-top: 12rpx;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/goods/components/groupon/groupon-card-list.vue b/src/pages/goods/components/groupon/groupon-card-list.vue
new file mode 100644
index 00000000..2c752140
--- /dev/null
+++ b/src/pages/goods/components/groupon/groupon-card-list.vue
@@ -0,0 +1,140 @@
+<!-- 拼团活动参团记录卡片 -->
+<template>
+  <view v-if="state.list.length > 0" class="groupon-list detail-card ss-p-x-20">
+    <view class="join-activity ss-flex ss-row-between ss-m-t-30">
+      <view class="">已有{{ state.list.length }}人参与活动</view>
+      <text class="cicon-forward"></text>
+    </view>
+    <view
+      v-for="(record, index) in state.list"
+      @tap="sheep.$router.go('/pages/activity/groupon/detail', { id: record.id })"
+      :key="index"
+      class="ss-m-t-40 ss-flex ss-row-between border-bottom ss-p-b-30"
+    >
+      <view class="ss-flex ss-col-center">
+        <image :src="sheep.$url.cdn(record.avatar)" class="user-avatar"></image>
+        <view class="user-nickname ss-m-l-20 ss-line-1">{{ record.nickname }}</view>
+      </view>
+      <view class="ss-flex ss-col-center">
+        <view class="ss-flex-col ss-col-bottom ss-m-r-20">
+          <view class="title ss-flex ss-m-b-14">
+            还差
+            <view class="num">{{ record.userSize - record.userCount }}人</view>
+            成团
+          </view>
+          <view class="end-time">{{ endTime(record.expireTime) }}</view>
+        </view>
+        <view class="">
+          <button class="ss-reset-button go-btn" @tap.stop="onJoinGroupon(record)"> 去参团 </button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { onMounted, reactive } from 'vue';
+  import sheep from '@/sheep';
+  import { useDurationTime } from '@/sheep/hooks/useGoods';
+  import CombinationApi from '@/sheep/api/promotion/combination';
+
+  const props = defineProps({
+    modelValue: {
+      type: Object,
+      default() {},
+    },
+  });
+  const state = reactive({
+    list: [],
+  });
+
+  // 去参团
+  const emits = defineEmits(['join']);
+  function onJoinGroupon(record) {
+    emits('join', record);
+  }
+
+  // 结束时间或状态
+  function endTime(time) {
+    const durationTime = useDurationTime(time);
+
+    if (durationTime.ms <= 0) {
+      return '该团已解散';
+    }
+
+    let timeText = '剩余 ';
+    timeText += `${durationTime.h}时`;
+    timeText += `${durationTime.m}分`;
+    timeText += `${durationTime.s}秒`;
+    return timeText;
+  }
+
+  // 初始化
+  onMounted(async () => {
+    // 查询参团记录
+    // status = 0 表示未成团
+    const { data } = await CombinationApi.getHeadCombinationRecordList(props.modelValue.id, 0, 10);
+    state.list = data;
+  });
+</script>
+
+<style lang="scss" scoped>
+  .detail-card {
+    background-color: $white;
+    margin: 14rpx 20rpx;
+    border-radius: 10rpx;
+    overflow: hidden;
+  }
+  .groupon-list {
+    .join-activity {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #999999;
+
+      .cicon-forward {
+        font-weight: 400;
+      }
+    }
+
+    .user-avatar {
+      width: 60rpx;
+      height: 60rpx;
+      background: #ececec;
+      border-radius: 60rpx;
+    }
+
+    .user-nickname {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #333333;
+      width: 160rpx;
+    }
+
+    .title {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #666666;
+
+      .num {
+        color: #ff6000;
+      }
+    }
+
+    .end-time {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #999999;
+    }
+
+    .go-btn {
+      width: 140rpx;
+      height: 60rpx;
+      background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
+      border-radius: 30rpx;
+      color: #fff;
+      font-weight: 500;
+      font-size: 26rpx;
+      line-height: normal;
+    }
+  }
+</style>
diff --git a/src/pages/goods/components/list/list-goods-card.vue b/src/pages/goods/components/list/list-goods-card.vue
new file mode 100644
index 00000000..d02519ff
--- /dev/null
+++ b/src/pages/goods/components/list/list-goods-card.vue
@@ -0,0 +1,103 @@
+<!-- 页面；暂时没用到  -->
+<template>
+  <view class="list-goods-card ss-flex-col" @tap="onClick">
+    <view class="md-img-box">
+      <image class="goods-img md-img-box" :src="sheep.$url.cdn(img)" mode="aspectFill"></image>
+    </view>
+    <view class="md-goods-content ss-flex-col ss-row-around">
+      <view class="md-goods-title ss-line-2 ss-m-x-20 ss-m-t-6 ss-m-b-16">{{ title }}</view>
+      <view class="md-goods-subtitle ss-line-1 ss-p-y-10 ss-p-20">{{ subTitle }}</view>
+      <view class="ss-flex ss-col-center ss-row-between ss-m-b-16 ss-m-x-20">
+        <view class="md-goods-price text-price">{{ price }}</view>
+        <view class="goods-origin-price text-price">{{ originPrice }}</view>
+        <view class="sales-text">已售{{ sales }}件</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { computed, reactive } from 'vue';
+
+  const props = defineProps({
+    img: {
+      type: String,
+      default: '',
+    },
+    subTitle: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    price: {
+      type: [String, Number],
+      default: '',
+    },
+    originPrice: {
+      type: [String, Number],
+      default: '',
+    },
+    sales: {
+      type: [String, Number],
+      default: '',
+    },
+  });
+  const emits = defineEmits(['click']);
+  const onClick = () => {
+    emits('click');
+  };
+</script>
+
+<style lang="scss" scoped>
+  .goods-img {
+    width: 100%;
+    height: 100%;
+    background-color: #f5f5f5;
+  }
+
+  .sales-text {
+    font-size: 20rpx;
+    color: #c4c4c4;
+  }
+
+  .goods-origin-price {
+    font-size: 20rpx;
+    color: #c4c4c4;
+    text-decoration: line-through;
+  }
+
+  .list-goods-card {
+    overflow: hidden;
+    width: 344rpx;
+    position: relative;
+    z-index: 1;
+    background-color: $white;
+    box-shadow: 0 0 20rpx 4rpx rgba(199, 199, 199, 0.22);
+    border-radius: 20rpx;
+
+    .md-img-box {
+      width: 344rpx;
+      height: 344rpx;
+    }
+
+    .md-goods-title {
+      font-size: 26rpx;
+      color: #333;
+    }
+    .md-goods-subtitle {
+      background-color: var(--ui-BG-Main-tag);
+      color: var(--ui-BG-Main);
+      font-size: 20rpx;
+    }
+
+    .md-goods-price {
+      font-size: 30rpx;
+      color: $red;
+    }
+  }
+</style>
diff --git a/src/pages/goods/components/list/list-navbar.vue b/src/pages/goods/components/list/list-navbar.vue
new file mode 100644
index 00000000..c21e6793
--- /dev/null
+++ b/src/pages/goods/components/list/list-navbar.vue
@@ -0,0 +1,93 @@
+<!-- 页面；暂时没用到  -->
+<template>
+  <su-fixed
+    alway
+    :bgStyles="{ background: '#fff' }"
+    :val="0"
+    noNav
+    :opacity="false"
+    placeholder
+    index="10090"
+  >
+    <su-status-bar />
+    <view
+      class="ui-bar ss-flex ss-col-center ss-row-between ss-p-x-20"
+      :style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
+    >
+      <!-- 左 -->
+      <view class="left-box">
+        <text
+          class="_icon-back back-icon"
+          @tap="toBack"
+          :style="[{ color: state.iconColor }]"
+        ></text>
+      </view>
+      <!-- 中 -->
+      <uni-search-bar
+        class="ss-flex-1"
+        radius="33"
+        :placeholder="placeholder"
+        cancelButton="none"
+        :focus="true"
+        v-model="state.searchVal"
+        @confirm="onSearch"
+      />
+      <!-- 右 -->
+      <view class="right">
+        <text class="sicon-more" :style="[{ color: state.iconColor }]" @tap="showMenuTools" />
+      </view>
+      <!-- #ifdef MP -->
+      <view :style="[capsuleStyle]"></view>
+      <!-- #endif -->
+    </view>
+  </su-fixed>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import sheep from '@/sheep';
+  import { showMenuTools } from '@/sheep/hooks/useModal';
+
+  const sys_statusBar = sheep.$platform.device.statusBarHeight;
+  const sys_navBar = sheep.$platform.navbar;
+  const capsuleStyle = {
+    width: sheep.$platform.capsule.width + 'px',
+    height: sheep.$platform.capsule.height + 'px',
+    margin: '0 ' + (sheep.$platform.device.windowWidth - sheep.$platform.capsule.right) + 'px',
+  };
+
+  const state = reactive({
+    iconColor: '#000',
+    searchVal: '',
+  });
+
+  const props = defineProps({
+    placeholder: {
+      type: String,
+      default: '搜索内容',
+    },
+  });
+
+  const emits = defineEmits(['searchConfirm']);
+
+  // 返回
+  const toBack = () => {
+    sheep.$router.back();
+  };
+
+  // 搜索
+  const onSearch = () => {
+    emits('searchConfirm', state.searchVal);
+  };
+
+  const onTab = (item) => {};
+</script>
+
+<style lang="scss" scoped>
+  .back-icon {
+    font-size: 40rpx;
+  }
+  .sicon-more {
+    font-size: 48rpx;
+  }
+</style>
diff --git a/src/pages/goods/groupon.vue b/src/pages/goods/groupon.vue
new file mode 100644
index 00000000..0fc81cfd
--- /dev/null
+++ b/src/pages/goods/groupon.vue
@@ -0,0 +1,562 @@
+<!-- 拼团商品详情 -->
+<template>
+  <s-layout :onShareAppMessage="shareInfo" navbar="goods">
+    <!-- 标题栏 -->
+    <detailNavbar />
+    <!-- 骨架屏 -->
+    <detailSkeleton v-if="state.skeletonLoading" />
+    <!-- 下架/售罄提醒 -->
+    <s-empty
+      v-else-if="
+        state.goodsInfo === null ||
+        state.activity.status !== 0 ||
+        state.activity.endTime < new Date().getTime()
+      "
+      text="活动不存在或已结束"
+      icon="/static/soldout-empty.png"
+      showAction
+      actionText="返回上一页"
+      @clickAction="sheep.$router.back()"
+    />
+    <block v-else>
+      <view class="detail-swiper-selector">
+        <!-- 商品图轮播 -->
+        <su-swiper
+          class="ss-m-b-14"
+          isPreview
+          :list="state.goodsSwiper"
+          dotStyle="tag"
+          imageMode="widthFix"
+          dotCur="bg-mask-40"
+          :seizeHeight="750"
+        />
+
+        <!-- 价格+标题 -->
+        <view class="title-card detail-card ss-m-y-14 ss-m-x-20 ss-p-x-20 ss-p-y-34">
+          <view class="ss-flex ss-row-between ss-m-b-60">
+            <view>
+              <view class="price-box ss-flex ss-col-bottom ss-m-b-18">
+                <view class="price-text ss-m-r-16">
+                  {{ fen2yuan(state.activity.price || state.goodsInfo.price) }}
+                </view>
+                <view class="tig ss-flex ss-col-center">
+                  <view class="tig-icon ss-flex ss-col-center ss-row-center">
+                    <view class="groupon-tag">
+                      <image
+                        :src="sheep.$url.static('/static/img/shop/goods/groupon-tag.png')"
+                      ></image>
+                    </view>
+                  </view>
+                  <view class="tig-title">拼团价</view>
+                </view>
+              </view>
+              <view class="ss-flex ss-row-between">
+                <view class="origin-price ss-flex ss-col-center" v-if="state.goodsInfo.price">
+                  单买价：
+                  <view class="origin-price-text">
+                    {{ fen2yuan(state.goodsInfo.marketPrice) }}
+                  </view>
+                </view>
+              </view>
+            </view>
+
+            <view class="countdown-box" v-if="endTime.ms > 0">
+              <view class="countdown-title ss-m-b-20">距结束仅剩</view>
+              <view class="ss-flex countdown-time">
+                <view class="ss-flex countdown-h">{{ endTime.h }}</view>
+                <view class="ss-m-x-4">:</view>
+                <view class="countdown-num ss-flex ss-row-center">{{ endTime.m }}</view>
+                <view class="ss-m-x-4">:</view>
+                <view class="countdown-num ss-flex ss-row-center">{{ endTime.s }}</view>
+              </view>
+            </view>
+            <view class="countdown-title" v-else> 活动已结束 </view>
+          </view>
+
+          <view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.name }}</view>
+          <view class="subtitle-text ss-line-1">{{ state.goodsInfo.introduction }}</view>
+        </view>
+
+        <!-- 功能卡片 -->
+        <view class="detail-cell-card detail-card ss-flex-col">
+          <!-- 规格 -->
+          <detail-cell-sku :sku="state.selectedSku" @tap="state.showSelectSku = true" />
+        </view>
+
+        <!-- 参团列表 -->
+        <groupon-card-list v-model="state.activity" @join="onJoinGroupon" />
+
+        <!-- 规格与数量弹框 -->
+        <s-select-groupon-sku
+          :show="state.showSelectSku"
+          :goodsInfo="state.goodsInfo"
+          :grouponAction="state.grouponAction"
+          :grouponNum="state.grouponNum"
+          @buy="onBuy"
+          @change="onSkuChange"
+          @close="onSkuClose"
+        />
+      </view>
+
+      <!-- 评价 -->
+      <detail-comment-card class="detail-comment-selector" :goodsId="state.goodsId" />
+      <!-- 详情 -->
+      <detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
+
+      <!-- 商品tabbar -->
+      <detail-tabbar v-model="state.goodsInfo">
+        <view class="buy-box ss-flex ss-col-center ss-p-r-20">
+          <button
+            class="ss-reset-button origin-price-btn ss-flex-col"
+            @tap="sheep.$router.go('/pages/goods/index', { id: state.goodsInfo.id })"
+          >
+            <view class="btn-price">{{ fen2yuan(state.goodsInfo.marketPrice) }}</view>
+            <view>原价购买</view>
+          </button>
+          <button
+            class="ss-reset-button btn-tox ss-flex-col"
+            @tap="onCreateGroupon"
+            :class="
+              state.activity.status === 0 && state.goodsInfo.stock !== 0
+                ? 'check-btn-box'
+                : 'disabled-btn-box'
+            "
+            :disabled="state.goodsInfo.stock === 0 || state.activity.status !== 0"
+          >
+            <view class="btn-price">{{
+              fen2yuan(
+                state.selectedSku.price * state.selectedSku.count ||
+                  state.activity.price * state.selectedSku.count ||
+                  state.goodsInfo.price * state.selectedSku.count ||
+                  state.goodsInfo.price,
+              )
+            }}</view>
+            <view v-if="state.activity.startTime > new Date().getTime()">未开始</view>
+            <view v-else-if="state.activity.endTime <= new Date().getTime()">已结束</view>
+            <view v-else>
+              <view v-if="state.goodsInfo.stock === 0">已售罄</view>
+              <view v-else>立即开团</view>
+            </view>
+          </button>
+        </view>
+      </detail-tabbar>
+    </block>
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive, computed } from 'vue';
+  import { onLoad, onPageScroll } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import { isEmpty } from 'lodash-es';
+  import detailNavbar from './components/detail/detail-navbar.vue';
+  import detailCellSku from './components/detail/detail-cell-sku.vue';
+  import detailTabbar from './components/detail/detail-tabbar.vue';
+  import detailSkeleton from './components/detail/detail-skeleton.vue';
+  import detailCommentCard from './components/detail/detail-comment-card.vue';
+  import detailContentCard from './components/detail/detail-content-card.vue';
+  import grouponCardList from './components/groupon/groupon-card-list.vue';
+  import { useDurationTime, formatGoodsSwiper, fen2yuan } from '@/sheep/hooks/useGoods';
+  import CombinationApi from '@/sheep/api/promotion/combination';
+  import SpuApi from '@/sheep/api/product/spu';
+  import { SharePageEnum } from '@/sheep/helper/const';
+
+  const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-bg.png');
+  const btnBg = sheep.$url.css('/static/img/shop/goods/groupon-btn.png');
+  const disabledBtnBg = sheep.$url.css('/static/img/shop/goods/activity-btn-disabled.png');
+  const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png');
+
+  onPageScroll(() => {});
+  const state = reactive({
+    skeletonLoading: true, // 骨架屏
+    goodsId: 0, // 商品ID
+    goodsInfo: {}, // 商品信息
+    goodsSwiper: [], // 商品轮播图
+    showSelectSku: false, // 显示规格弹框
+    selectedSku: {}, // 选中的规格属性
+    activity: {}, // 团购活动
+    grouponId: 0, // 团购ID
+    grouponNum: 0, // 团购人数
+    grouponAction: 'create', // 团购操作
+    combinationHeadId: null, // 拼团团长编号
+  });
+
+  // 倒计时
+  const endTime = computed(() => {
+    return useDurationTime(state.activity.endTime);
+  });
+
+  // 规格变更
+  function onSkuChange(e) {
+    state.selectedSku = e;
+  }
+
+  function onSkuClose() {
+    state.showSelectSku = false;
+  }
+
+  // 发起拼团
+  function onCreateGroupon() {
+    state.grouponAction = 'create';
+    state.grouponId = 0;
+    state.showSelectSku = true;
+  }
+
+  /**
+   * 去参团
+   *
+   * @param record 团长的团购记录
+   */
+  function onJoinGroupon(record) {
+    state.grouponAction = 'join';
+    state.grouponId = record.activityId;
+    state.combinationHeadId = record.id;
+    state.grouponNum = record.userSize;
+    state.showSelectSku = true;
+  }
+
+  // 立即购买
+  function onBuy(sku) {
+    sheep.$router.go('/pages/order/confirm', {
+      data: JSON.stringify({
+        order_type: 'goods',
+        combinationActivityId: state.activity.id,
+        combinationHeadId: state.combinationHeadId,
+        items: [
+          {
+            skuId: sku.id,
+            count: sku.count,
+          },
+        ],
+      }),
+    });
+  }
+
+  // 分享信息
+  const shareInfo = computed(() => {
+    if (isEmpty(state.activity)) return {};
+    return sheep.$platform.share.getShareInfo(
+      {
+        title: state.activity.name,
+        image: sheep.$url.cdn(state.goodsInfo.picUrl),
+        params: {
+          page: SharePageEnum.GROUPON.value,
+          query: state.activity.id,
+        },
+      },
+      {
+        type: 'goods', // 商品海报
+        title: state.activity.name, // 商品标题
+        image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
+        price: fen2yuan(state.goodsInfo.price), // 商品价格
+        marketPrice: fen2yuan(state.goodsInfo.marketPrice), // 商品原价
+      },
+    );
+  });
+
+  onLoad(async (options) => {
+    // 非法参数
+    if (!options.id) {
+      state.goodsInfo = null;
+      state.skeletonLoading = false;
+      return;
+    }
+    state.grouponId = options.id;
+    // 加载活动信息
+    const { code, data: activity } = await CombinationApi.getCombinationActivity(state.grouponId);
+    if (code !== 0) {
+      state.goodsInfo = null;
+      state.skeletonLoading = false;
+      return;
+    }
+    state.activity = activity;
+    // 加载商品信息
+    const { data: spu } = await SpuApi.getSpuDetail(activity.spuId);
+    if (code !== 0) {
+      state.goodsInfo = null;
+      state.skeletonLoading = false;
+      return;
+    }
+    state.goodsId = spu.id;
+
+    // 默认显示最低价
+    spu.price = activity.products.reduce((min, product) => {
+      return Math.min(min, product.combinationPrice || Infinity);
+    }, Infinity);
+
+    // 价格、库存使用活动的
+    spu.skus.forEach((sku) => {
+      const product = activity.products.find((product) => product.skuId === sku.id);
+      if (product) {
+        sku.price = product.combinationPrice;
+      } else {
+        // 找不到可能是没配置，则不能发起秒杀
+        sku.stock = 0;
+      }
+    });
+
+    // 关闭骨架屏
+    state.skeletonLoading = false;
+    if (code === 0) {
+      state.goodsInfo = spu;
+      state.grouponNum = activity.userSize;
+      state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.sliderPicUrls);
+    } else {
+      // 未找到商品
+      state.goodsInfo = null;
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .detail-card {
+    background-color: $white;
+    margin: 14rpx 20rpx;
+    border-radius: 10rpx;
+    overflow: hidden;
+  }
+
+  // 价格标题卡片
+  .title-card {
+    width: 710rpx;
+    box-sizing: border-box;
+    // height: 320rpx;
+    background-size: 100% 100%;
+    border-radius: 10rpx;
+    background-image: v-bind(headerBg);
+    background-repeat: no-repeat;
+
+    .price-box {
+      .price-text {
+        font-size: 30rpx;
+        font-weight: 500;
+        color: #fff;
+        line-height: normal;
+        font-family: OPPOSANS;
+
+        &::before {
+          content: '￥';
+          font-size: 30rpx;
+        }
+      }
+    }
+    .origin-price {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #fff;
+      opacity: 0.7;
+
+      .origin-price-text {
+        text-decoration: line-through;
+
+        font-family: OPPOSANS;
+
+        &::before {
+          content: '￥';
+        }
+      }
+    }
+
+    .tig {
+      border: 2rpx solid #ffffff;
+      border-radius: 4rpx;
+      width: 126rpx;
+      height: 38rpx;
+
+      .tig-icon {
+        margin-left: -2rpx;
+        width: 40rpx;
+        height: 40rpx;
+        background: #ffffff;
+        border-radius: 4rpx 0 0 4rpx;
+
+        .groupon-tag {
+          width: 32rpx;
+          height: 32rpx;
+        }
+      }
+
+      .tig-title {
+        font-size: 24rpx;
+        font-weight: 500;
+        line-height: normal;
+        color: #ffffff;
+        width: 86rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    .countdown-title {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+    }
+
+    .countdown-time {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      .countdown-h {
+        font-size: 24rpx;
+        font-family: OPPOSANS;
+        font-weight: 500;
+        color: #ffffff;
+        padding: 0 4rpx;
+        height: 40rpx;
+        background: rgba(#000000, 0.1);
+        border-radius: 6rpx;
+      }
+      .countdown-num {
+        font-size: 24rpx;
+        font-family: OPPOSANS;
+        font-weight: 500;
+        color: #ffffff;
+        width: 40rpx;
+        height: 40rpx;
+        background: rgba(#000000, 0.1);
+        border-radius: 6rpx;
+      }
+    }
+
+    .title-text {
+      font-size: 30rpx;
+      font-weight: bold;
+      line-height: 42rpx;
+      color: #fff;
+    }
+
+    .subtitle-text {
+      font-size: 26rpx;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 42rpx;
+      opacity: 0.9;
+    }
+  }
+
+  // 购买
+  .buy-box {
+    .disabled-btn-box[disabled] {
+      background-color: transparent;
+    }
+    .check-btn-box {
+      width: 248rpx;
+      height: 80rpx;
+      font-size: 24rpx;
+      font-weight: 600;
+      margin-left: -36rpx;
+      background-image: v-bind(btnBg);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      color: #ffffff;
+      line-height: normal;
+      border-radius: 0px 40rpx 40rpx 0px;
+    }
+    .disabled-btn-box {
+      width: 248rpx;
+      height: 80rpx;
+      font-size: 24rpx;
+      font-weight: 600;
+      margin-left: -36rpx;
+      background-image: v-bind(disabledBtnBg);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      color: #999999;
+      line-height: normal;
+      border-radius: 0px 40rpx 40rpx 0px;
+    }
+
+    .origin-price-btn {
+      width: 236rpx;
+      height: 80rpx;
+      background: rgba(#ff5651, 0.1);
+      color: #ff6000;
+      border-radius: 40rpx 0px 0px 40rpx;
+      line-height: normal;
+      font-size: 24rpx;
+      font-weight: 500;
+
+      .btn-title {
+        font-size: 28rpx;
+      }
+    }
+    .btn-price {
+      font-family: OPPOSANS;
+
+      &::before {
+        content: '￥';
+      }
+    }
+    .more-item-box {
+      .more-item {
+        width: 156rpx;
+        height: 58rpx;
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #999999;
+        border-radius: 10rpx;
+      }
+      .more-item-hover {
+        background: rgba(#ffefe5, 0.32);
+        color: #ff6000;
+      }
+    }
+  }
+
+  .groupon-box {
+    background: v-bind(grouponBg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  //活动卡片
+  .activity-box {
+    width: 100%;
+    height: 80rpx;
+    box-sizing: border-box;
+    margin-bottom: 10rpx;
+
+    .activity-title {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 42rpx;
+
+      .activity-icon {
+        width: 38rpx;
+        height: 38rpx;
+      }
+    }
+
+    .activity-go {
+      width: 70rpx;
+      height: 32rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      font-weight: 500;
+      color: #ff6000;
+      font-size: 24rpx;
+      line-height: normal;
+    }
+  }
+
+  .model-box {
+    .title {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #333333;
+    }
+
+    .subtitle {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #333333;
+    }
+  }
+
+  image {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/src/pages/goods/index.vue b/src/pages/goods/index.vue
new file mode 100644
index 00000000..901c8919
--- /dev/null
+++ b/src/pages/goods/index.vue
@@ -0,0 +1,672 @@
+<template>
+  <view>
+    <s-layout :onShareAppMessage="shareInfo" navbar="goods">
+      <!-- 标题栏 -->
+      <detailNavbar />
+
+      <!-- 骨架屏 -->
+      <detailSkeleton v-if="state.skeletonLoading" />
+      <!-- 下架/售罄提醒 -->
+      <s-empty
+        v-else-if="state.goodsInfo === null"
+        text="商品不存在或已下架"
+        icon="/static/soldout-empty.png"
+        showAction
+        actionText="再逛逛"
+        actionUrl="/pages/goods/list"
+      />
+      <block v-else>
+        <view class="detail-swiper-selector">
+          <!-- 商品轮播图  -->
+          <su-swiper
+            class="ss-m-b-14"
+            isPreview
+            :list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)"
+            otStyle="tag"
+            imageMode="widthFix"
+            dotCur="bg-mask-40"
+            :seizeHeight="750"
+          />
+          <!-- 限时折扣/会员价的优惠信息 -->
+          <view
+            class="discount"
+            v-if="
+              state.settlementSku && state.settlementSku.id && state.settlementSku.promotionPrice
+            "
+          >
+            <image class="disImg" :src="sheep.$url.static('/static/img/shop/goods/dis.png')" />
+            <view class="discountCont">
+              <view class="disContT">
+                <view class="disContT1">
+                  <view class="disContT1P">
+                    ￥{{ fen2yuan(state.settlementSku.promotionPrice) }}
+                  </view>
+                  <view class="disContT1End">
+                    直降￥
+                    {{ fen2yuan(state.settlementSku.price - state.settlementSku.promotionPrice) }}
+                  </view>
+                </view>
+                <view class="disContT2" v-if="state.settlementSku.promotionType === 4">
+                  限时折扣
+                </view>
+                <view class="disContT2" v-else-if="state.settlementSku.promotionType === 6">
+                  会员折扣
+                </view>
+              </view>
+              <view class="disContB">
+                <view class="disContB1">
+                  价格：￥{{ fen2yuan(state.settlementSku.price) }} 丨 剩余：
+                  {{ state.settlementSku.stock }}
+                </view>
+                <view class="disContB2" v-if="state.settlementSku.promotionEndTime > 0">
+                  距结束仅剩
+                  <s-count-down
+                    :tipText="' '"
+                    :bgColor="bgColor"
+                    :dayText="':'"
+                    :hourText="':'"
+                    :minuteText="':'"
+                    :secondText="' '"
+                    :datatime="state.settlementSku.promotionEndTime / 1000"
+                    :isDay="false"
+                  />
+                </view>
+              </view>
+            </view>
+          </view>
+          <!-- 价格+标题 -->
+          <view class="title-card detail-card ss-p-y-30 ss-p-x-20">
+            <!-- 没有限时折扣/会员价的优惠信息时，展示的价格信息 -->
+            <view
+              class="ss-flex ss-row-between ss-col-center ss-m-b-26"
+              v-if="!state.settlementSku.promotionPrice"
+            >
+              <view class="price-box ss-flex ss-col-bottom">
+                <view class="price-text ss-m-r-16">
+                  {{ fen2yuan(state.selectedSku.price || state.goodsInfo.price) }}
+                </view>
+                <view
+                  class="origin-price-text"
+                  v-if="state.goodsInfo.marketPrice > state.goodsInfo.price"
+                >
+                  {{ fen2yuan(state.selectedSku.marketPrice || state.goodsInfo.marketPrice) }}
+                </view>
+              </view>
+              <view class="sales-text">
+                {{ formatSales('exact', state.goodsInfo.salesCount) }}
+              </view>
+            </view>
+            <view class="discounts-box ss-flex ss-row-between ss-m-b-28">
+              <!-- 查看优惠劵的描述 -->
+              <view
+                class="tag ss-m-r-10"
+                v-for="coupon in state.couponInfo.slice(0, 1)"
+                :key="coupon.id"
+                @tap="onOpenActivity"
+              >
+                [劵]满{{ fen2yuanSimple(coupon.usePrice) }}元{{
+                  coupon.discountType === 1
+                    ? '减' + fen2yuanSimple(coupon.discountPrice) + '元'
+                    : '打' + formatDiscountPercent(coupon.discountPercent) + '折'
+                }}
+              </view>
+              <!-- 查看满减送的描述 -->
+              <div class="tag-content">
+                <view class="tag-box ss-flex">
+                  <!-- 最多打印 3 条，所以需要扣除优惠劵已打印的 -->
+                  <view
+                    v-for="item in getRewardActivityRuleItemDescriptions(
+                      state.rewardActivity,
+                    ).slice(0, 3 - state.couponInfo.slice(0, 1).length)"
+                    :key="item"
+                    class="tag ss-m-r-10"
+                    @tap="onOpenActivity"
+                  >
+                    <text>{{ item }}</text>
+                  </view>
+                </view>
+              </div>
+              <!-- 领取优惠劵的按钮 -->
+              <view
+                class="get-coupon-box ss-flex ss-col-center ss-m-l-20"
+                @tap="onOpenActivity"
+                v-if="state.couponInfo.length"
+              >
+                <view class="discounts-title ss-m-r-8">领券</view>
+                <text class="cicon-forward"></text>
+              </view>
+            </view>
+            <view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.name }}</view>
+            <view class="subtitle-text ss-line-1">{{ state.goodsInfo.introduction }}</view>
+          </view>
+
+          <!-- 功能卡片 -->
+          <view class="detail-cell-card detail-card ss-flex-col">
+            <detail-cell-sku
+              v-model="state.selectedSku.goods_sku_text"
+              :sku="state.selectedSku"
+              @tap="state.showSelectSku = true"
+            />
+          </view>
+
+          <!-- 规格与数量弹框 -->
+          <s-select-sku
+            :goodsInfo="state.goodsInfo"
+            :show="state.showSelectSku"
+            @addCart="onAddCart"
+            @buy="onBuy"
+            @change="onSkuChange"
+            @close="state.showSelectSku = false"
+          />
+        </view>
+
+        <!-- 评价 -->
+        <detail-comment-card class="detail-comment-selector" :goodsId="state.goodsId" />
+        <!-- 详情 -->
+        <detail-content-card
+          class="detail-content-selector"
+          :content="state.goodsInfo.description"
+        />
+
+        <!-- 活动跳转：拼团/秒杀/砍价活动 -->
+        <detail-activity-tip
+          v-if="state.activityList.length > 0"
+          :activity-list="state.activityList"
+        />
+
+        <!-- 详情 tabbar -->
+        <detail-tabbar v-model="state.goodsInfo">
+          <view class="buy-box ss-flex ss-col-center ss-p-r-20" v-if="state.goodsInfo.stock > 0">
+            <button
+              class="ss-reset-button add-btn ui-Shadow-Main"
+              @tap="state.showSelectSku = true"
+            >
+              加入购物车
+            </button>
+            <button
+              class="ss-reset-button buy-btn ui-Shadow-Main"
+              @tap="state.showSelectSku = true"
+            >
+              立即购买
+            </button>
+          </view>
+          <view class="buy-box ss-flex ss-col-center ss-p-r-20" v-else>
+            <button class="ss-reset-button disabled-btn" disabled> 已售罄 </button>
+          </view>
+        </detail-tabbar>
+
+        <!-- 满减送/限时折扣活动弹窗 -->
+        <s-activity-pop
+          v-model="state"
+          :show="state.showActivityModel"
+          @close="state.showActivityModel = false"
+          @get="onTakeCoupon"
+        />
+      </block>
+    </s-layout>
+  </view>
+</template>
+
+<script setup>
+  import { reactive, computed } from 'vue';
+  import { onLoad, onPageScroll } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import CouponApi from '@/sheep/api/promotion/coupon';
+  import ActivityApi from '@/sheep/api/promotion/activity';
+  import FavoriteApi from '@/sheep/api/product/favorite';
+  import RewardActivityApi from '@/sheep/api/promotion/rewardActivity';
+  import {
+    formatSales,
+    formatGoodsSwiper,
+    fen2yuan,
+    fen2yuanSimple,
+    formatDiscountPercent,
+    getRewardActivityRuleItemDescriptions,
+  } from '@/sheep/hooks/useGoods';
+  import detailNavbar from './components/detail/detail-navbar.vue';
+  import detailCellSku from './components/detail/detail-cell-sku.vue';
+  import detailTabbar from './components/detail/detail-tabbar.vue';
+  import detailSkeleton from './components/detail/detail-skeleton.vue';
+  import detailCommentCard from './components/detail/detail-comment-card.vue';
+  import detailContentCard from './components/detail/detail-content-card.vue';
+  import detailActivityTip from './components/detail/detail-activity-tip.vue';
+  import { isEmpty } from 'lodash-es';
+  import SpuApi from '@/sheep/api/product/spu';
+
+  onPageScroll(() => {});
+  import OrderApi from '@/sheep/api/trade/order';
+  import { SharePageEnum } from '@/sheep/helper/const';
+
+  const bgColor = {
+    bgColor: '#E93323',
+    Color: '#fff',
+    width: '44rpx',
+    timeTxtwidth: '16rpx',
+    isDay: true,
+  };
+  const isLogin = computed(() => sheep.$store('user').isLogin);
+  const state = reactive({
+    goodsId: 0,
+    skeletonLoading: true, // SPU 加载中
+    goodsInfo: {}, // SPU 信息
+    showSelectSku: false, // 是否展示 SKU 选择弹窗
+    selectedSku: {}, // 选中的 SKU
+    settlementSku: {}, // 结算的 SKU：由于 selectedSku 不进行默认选中，所以初始使用结算价格最低的 SKU 作为基础展示
+    showModel: false, // 是否展示 Coupon 优惠劵的弹窗
+    couponInfo: [], // 可领取的 Coupon 优惠劵的列表
+    showActivityModel: false, // 【满减送/限时折扣】是否展示 Activity 营销活动的弹窗
+    rewardActivity: {}, // 【满减送】活动
+    activityList: [], // 【秒杀/拼团/砍价】可参与的 Activity 营销活动的列表
+  });
+
+  // 规格变更
+  function onSkuChange(e) {
+    state.selectedSku = e;
+    state.settlementSku = e;
+  }
+
+  // 添加购物车
+  function onAddCart(e) {
+    if (!e.id) {
+      sheep.$helper.toast('请选择商品规格');
+      return;
+    }
+    sheep.$store('cart').add(e);
+  }
+
+  // 立即购买
+  function onBuy(e) {
+    if (!e.id) {
+      sheep.$helper.toast('请选择商品规格');
+      return;
+    }
+    sheep.$router.go('/pages/order/confirm', {
+      data: JSON.stringify({
+        items: [
+          {
+            skuId: e.id,
+            count: e.goods_num,
+            categoryId: state.goodsInfo.categoryId,
+          },
+        ],
+      }),
+    });
+  }
+
+  // 打开营销弹窗
+  function onOpenActivity() {
+    state.showActivityModel = true;
+  }
+
+  // 立即领取优惠劵
+  async function onTakeCoupon(id) {
+    const { code } = await CouponApi.takeCoupon(id);
+    if (code !== 0) {
+      return;
+    }
+    uni.showToast({
+      title: '领取成功',
+    });
+    setTimeout(() => {
+      getCoupon();
+    }, 1000);
+  }
+
+  const shareInfo = computed(() => {
+    if (isEmpty(state.goodsInfo)) return {};
+    return sheep.$platform.share.getShareInfo(
+      {
+        title: state.goodsInfo.name,
+        image: sheep.$url.cdn(state.goodsInfo.picUrl),
+        desc: state.goodsInfo.introduction,
+        params: {
+          page: SharePageEnum.GOODS.value,
+          query: state.goodsInfo.id,
+        },
+      },
+      {
+        type: 'goods', // 商品海报
+        title: state.goodsInfo.name, // 商品名称
+        image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
+        price: fen2yuan(state.goodsInfo.price), // 商品价格
+        original_price: fen2yuan(state.goodsInfo.marketPrice), // 商品原价
+      },
+    );
+  });
+
+  async function getCoupon() {
+    const { code, data } = await CouponApi.getCouponTemplateList(state.goodsId, 2, 10);
+    if (code === 0) {
+      state.couponInfo = data;
+    }
+  }
+
+  async function getSettlementByIds(ids) {
+    let { data, code } = await OrderApi.getSettlementProduct(ids);
+    if (code !== 0 || data.length !== 1) {
+      return;
+    }
+    data = data[0];
+
+    // 补充 SKU 的价格信息
+    state.goodsInfo.skus.forEach((sku) => {
+      data.skus.forEach((item) => {
+        if (sku.id === item.id) {
+          sku.promotionType = item.promotionType;
+          sku.promotionPrice = item.promotionPrice;
+          sku.promotionId = item.promotionId;
+          sku.promotionEndTime = item.promotionEndTime;
+        }
+      });
+    });
+
+    // 选择有 promotionPrice 且最小的
+    state.settlementSku = state.goodsInfo.skus
+      .filter((sku) => sku.stock > 0 && sku.promotionPrice > 0)
+      .reduce((prev, curr) => (prev.promotionPrice < curr.promotionPrice ? prev : curr), []);
+
+    // 设置满减送活动
+    if (data.rewardActivity) {
+      state.rewardActivity = data.rewardActivity;
+      //获取活动时间
+      getActivityTime(state.rewardActivity.id);
+    }
+  }
+
+  //获取活动时间
+  async function getActivityTime(id) {
+    const { code, data } = await RewardActivityApi.getRewardActivity(id);
+    if (code === 0) {
+      // console.log('获取到的活动 数据', data)
+      state.rewardActivity.startTime = data.startTime;
+      state.rewardActivity.endTime = data.endTime;
+    }
+  }
+
+  onLoad((options) => {
+    // 非法参数
+    if (!options.id) {
+      state.goodsInfo = null;
+      state.skeletonLoading = false;
+      return;
+    }
+    state.goodsId = options.id;
+    // 1. 加载商品信息
+    SpuApi.getSpuDetail(state.goodsId).then((res) => {
+      if (res.code !== 0 || !res.data) {
+        state.goodsInfo = null;
+        state.skeletonLoading = false;
+        return;
+      }
+      // 加载到商品
+      state.skeletonLoading = false;
+      state.goodsInfo = res.data;
+      // 获取结算信息
+      getSettlementByIds(state.goodsId);
+      // 加载是否收藏
+      if (isLogin.value) {
+        FavoriteApi.isFavoriteExists(state.goodsId, 'goods').then((res) => {
+          if (res.code !== 0) {
+            return;
+          }
+          state.goodsInfo.favorite = res.data;
+        });
+      }
+    });
+
+    // 2. 加载优惠劵信息
+    getCoupon();
+
+    // 3. 加载营销活动信息
+    ActivityApi.getActivityListBySpuId(state.goodsId).then((res) => {
+      if (res.code !== 0) {
+        return;
+      }
+      state.activityList = res.data;
+    });
+  });
+</script>
+
+<style lang="scss" scoped>
+  .detail-card {
+    background-color: #ffff;
+    margin: 14rpx 20rpx;
+    border-radius: 10rpx;
+    overflow: hidden;
+  }
+
+  // 价格标题卡片
+  .title-card {
+    .price-box {
+      .price-text {
+        font-size: 42rpx;
+        font-weight: 500;
+        color: #ff3000;
+        line-height: 30rpx;
+        font-family: OPPOSANS;
+
+        &::before {
+          content: '￥';
+          font-size: 30rpx;
+        }
+      }
+
+      .origin-price-text {
+        font-size: 26rpx;
+        font-weight: 400;
+        text-decoration: line-through;
+        color: $gray-c;
+        font-family: OPPOSANS;
+
+        &::before {
+          content: '￥';
+        }
+      }
+    }
+
+    .sales-text {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: $gray-c;
+    }
+
+    .discounts-box {
+      .tag-content {
+        flex: 1;
+        min-width: 0;
+        white-space: nowrap;
+      }
+
+      .tag-box {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .tag {
+        flex-shrink: 0;
+        padding: 4rpx 10rpx;
+        font-size: 24rpx;
+        font-weight: 500;
+        border-radius: 4rpx;
+        color: var(--ui-BG-Main);
+        background: var(--ui-BG-Main-tag);
+      }
+
+      .discounts-title {
+        font-size: 24rpx;
+        font-weight: 500;
+        color: var(--ui-BG-Main);
+        line-height: normal;
+      }
+
+      .cicon-forward {
+        color: var(--ui-BG-Main);
+        font-size: 24rpx;
+        line-height: normal;
+        margin-top: 4rpx;
+      }
+    }
+
+    .title-text {
+      font-size: 30rpx;
+      font-weight: bold;
+      line-height: 42rpx;
+    }
+
+    .subtitle-text {
+      font-size: 26rpx;
+      font-weight: 400;
+      color: $dark-9;
+      line-height: 42rpx;
+    }
+  }
+
+  // 购买
+  .buy-box {
+    .add-btn {
+      width: 214rpx;
+      height: 72rpx;
+      font-weight: 500;
+      font-size: 28rpx;
+      border-radius: 40rpx 0 0 40rpx;
+      background-color: var(--ui-BG-Main-light);
+      color: var(--ui-BG-Main);
+    }
+
+    .buy-btn {
+      width: 214rpx;
+      height: 72rpx;
+      font-weight: 500;
+      font-size: 28rpx;
+
+      border-radius: 0 40rpx 40rpx 0;
+      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+      color: $white;
+    }
+
+    .disabled-btn {
+      width: 428rpx;
+      height: 72rpx;
+      border-radius: 40rpx;
+      background: #999999;
+      color: $white;
+    }
+  }
+
+  .model-box {
+    height: 60vh;
+
+    .model-content {
+      height: 56vh;
+    }
+
+    .title {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #333333;
+    }
+
+    .subtitle {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #333333;
+    }
+  }
+
+  // 限时折扣
+  .discount {
+    width: 750rpx;
+    height: 100rpx;
+    // background-color: red;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .disImg {
+    width: 750rpx;
+    height: 100rpx;
+    position: absolute;
+    top: 0;
+    z-index: -1;
+  }
+
+  .discountCont {
+    width: 680rpx;
+    height: 90rpx;
+    margin: 10rpx auto 0 auto;
+    // background-color: gold;
+  }
+
+  .disContT {
+    width: 680rpx;
+    height: 50rpx;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .disContT1 {
+    width: 400rpx;
+    height: 50rpx;
+    // background-color: green;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .disContT2 {
+    width: 200rpx;
+    height: 50rpx;
+    line-height: 50rpx;
+    // background-color: gold;
+    font-size: 30rpx;
+    text-align: end;
+    color: white;
+    font-weight: bolder;
+    font-style: oblique 20deg;
+    letter-spacing: 0.1rem;
+  }
+
+  .disContT1P {
+    color: white;
+    font-weight: bold;
+    font-size: 28rpx;
+  }
+
+  .disContT1End {
+    // width: 180rpx;
+    padding: 0 10rpx;
+    height: 30rpx;
+    line-height: 28rpx;
+    text-align: center;
+    font-weight: bold;
+    background-color: white;
+    color: #ff3000;
+    font-size: 23rpx;
+    border-radius: 20rpx;
+    margin-left: 10rpx;
+  }
+
+  .disContB {
+    width: 680rpx;
+    height: 40rpx;
+    display: flex;
+    justify-content: space-between;
+    font-size: 20rpx;
+    color: white;
+    align-items: center;
+  }
+
+  .disContB1 {
+    width: 300rpx;
+    height: 40rpx;
+    line-height: 40rpx;
+  }
+
+  .disContB2 {
+    width: 300rpx;
+    height: 40rpx;
+    line-height: 40rpx;
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>
diff --git a/src/pages/goods/list.vue b/src/pages/goods/list.vue
new file mode 100644
index 00000000..8a5259a2
--- /dev/null
+++ b/src/pages/goods/list.vue
@@ -0,0 +1,407 @@
+<template>
+  <s-layout
+    navbar="normal"
+    :leftWidth="0"
+    :rightWidth="0"
+    tools="search"
+    :defaultSearch="state.keyword"
+    @search="onSearch"
+  >
+    <!-- 筛选 -->
+    <su-sticky bgColor="#fff">
+      <view class="ss-flex">
+        <view class="ss-flex-1">
+          <su-tabs
+            :list="state.tabList"
+            :scrollable="false"
+            @change="onTabsChange"
+            :current="state.currentTab"
+          />
+        </view>
+        <view class="list-icon" @tap="state.iconStatus = !state.iconStatus">
+          <text v-if="state.iconStatus" class="sicon-goods-list" />
+          <text v-else class="sicon-goods-card" />
+        </view>
+      </view>
+    </su-sticky>
+
+    <!-- 弹窗 -->
+    <su-popup
+      :show="state.showFilter"
+      type="top"
+      round="10"
+      :space="sys_navBar + 38"
+      backgroundColor="#F6F6F6"
+      :zIndex="10"
+      @close="state.showFilter = false"
+    >
+      <view class="filter-list-box">
+        <view
+          class="filter-item"
+          v-for="(item, index) in state.tabList[state.currentTab].list"
+          :key="item.value"
+          :class="[{ 'filter-item-active': index === state.curFilter }]"
+          @tap="onFilterItem(index)"
+        >
+          {{ item.label }}
+        </view>
+      </view>
+    </su-popup>
+
+    <!-- 情况一：单列布局 -->
+    <view v-if="state.iconStatus && state.pagination.total > 0" class="goods-list ss-m-t-20">
+      <view
+        class="ss-p-l-20 ss-p-r-20 ss-m-b-20"
+        v-for="item in state.pagination.list"
+        :key="item.id"
+      >
+        <s-goods-column
+          class=""
+          size="lg"
+          :data="item"
+          :topRadius="10"
+          :bottomRadius="10"
+          @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+        />
+      </view>
+    </view>
+    <!-- 情况二：双列布局 -->
+    <view
+      v-if="!state.iconStatus && state.pagination.total > 0"
+      class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top"
+    >
+      <view class="goods-list-box">
+        <view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
+          <s-goods-column
+            class="goods-md-box"
+            size="md"
+            :data="item"
+            :topRadius="10"
+            :bottomRadius="10"
+            @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            @getHeight="mountMasonry($event, 'left')"
+          >
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn" />
+            </template>
+          </s-goods-column>
+        </view>
+      </view>
+      <view class="goods-list-box">
+        <view class="right-list" v-for="item in state.rightGoodsList" :key="item.id">
+          <s-goods-column
+            class="goods-md-box"
+            size="md"
+            :topRadius="10"
+            :bottomRadius="10"
+            :data="item"
+            @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            @getHeight="mountMasonry($event, 'right')"
+          >
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn" />
+            </template>
+          </s-goods-column>
+        </view>
+      </view>
+    </view>
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+    <s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品" />
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive, ref } from 'vue';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import _ from 'lodash-es';
+  import { resetPagination } from '@/sheep/helper/utils';
+  import SpuApi from '@/sheep/api/product/spu';
+  import OrderApi from '@/sheep/api/trade/order';
+  import { appendSettlementProduct } from '@/sheep/hooks/useGoods';
+
+  const sys_navBar = sheep.$platform.navbar;
+  const emits = defineEmits(['close', 'change']);
+
+  const state = reactive({
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 6,
+    },
+    currentSort: undefined,
+    currentOrder: undefined,
+    currentTab: 0, // 当前选中的 tab
+    curFilter: 0, // 当前选中的 list 筛选项
+    showFilter: false,
+    iconStatus: false, // true - 单列布局；false - 双列布局
+    keyword: '',
+    categoryId: 0,
+    tabList: [
+      {
+        name: '综合推荐',
+        list: [
+          {
+            label: '综合推荐',
+          },
+          {
+            label: '价格升序',
+            sort: 'price',
+            order: true,
+          },
+          {
+            label: '价格降序',
+            sort: 'price',
+            order: false,
+          },
+        ],
+      },
+      {
+        name: '销量',
+        sort: 'salesCount',
+        order: false,
+      },
+      {
+        name: '新品优先',
+        value: 'createTime',
+        order: false,
+      },
+    ],
+    loadStatus: '',
+    leftGoodsList: [], // 双列布局 - 左侧商品
+    rightGoodsList: [], // 双列布局 - 右侧商品
+  });
+
+  // 加载瀑布流
+  let count = 0;
+  let leftHeight = 0;
+  let rightHeight = 0;
+
+  // 处理双列布局 leftGoodsList + rightGoodsList
+  function mountMasonry(height = 0, where = 'left') {
+    if (where === 'left') {
+      leftHeight += height;
+    } else {
+      rightHeight += height;
+    }
+    if (!state.pagination.list[count]) {
+      return;
+    }
+
+    if (leftHeight <= rightHeight) {
+      state.leftGoodsList.push(state.pagination.list[count]);
+    } else {
+      state.rightGoodsList.push(state.pagination.list[count]);
+    }
+    count++;
+  }
+
+  // 清空列表
+  function emptyList() {
+    resetPagination(state.pagination);
+    state.leftGoodsList = [];
+    state.rightGoodsList = [];
+    count = 0;
+    leftHeight = 0;
+    rightHeight = 0;
+  }
+
+  // 搜索
+  function onSearch(e) {
+    state.keyword = e;
+    emptyList();
+    getList(state.currentSort, state.currentOrder);
+  }
+
+  // 点击
+  function onTabsChange(e) {
+    // 如果点击的是【综合推荐】，则直接展开或者收起筛选项
+    if (state.tabList[e.index].list) {
+      state.currentTab = e.index;
+      state.showFilter = !state.showFilter;
+      return;
+    }
+    state.showFilter = false;
+
+    // 如果点击的是【销量】或者【新品优先】，则直接切换 tab
+    if (e.index === state.currentTab) {
+      return;
+    }
+
+    state.currentTab = e.index;
+    state.currentSort = e.sort;
+    state.currentOrder = e.order;
+    emptyList();
+    getList(e.sort, e.order);
+  }
+
+  // 点击 tab 的 list 筛选项
+  const onFilterItem = (val) => {
+    // 如果点击的是当前的筛选项，则直接收起筛选项，不要加载数据
+    // 这里选择 tabList[0] 的原因，是目前只有它有 list
+    if (
+      state.currentSort === state.tabList[0].list[val].sort &&
+      state.currentOrder === state.tabList[0].list[val].order
+    ) {
+      state.showFilter = false;
+      return;
+    }
+    state.showFilter = false;
+
+    // 设置筛选条件
+    state.curFilter = val;
+    state.tabList[0].name = state.tabList[0].list[val].label;
+    state.currentSort = state.tabList[0].list[val].sort;
+    state.currentOrder = state.tabList[0].list[val].order;
+    // 清空 + 加载数据
+    emptyList();
+    getList();
+  };
+
+  async function getList() {
+    state.loadStatus = 'loading';
+    const { code, data } = await SpuApi.getSpuPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      sortField: state.currentSort,
+      sortAsc: state.currentOrder,
+      categoryId: state.categoryId,
+      keyword: state.keyword,
+    });
+    if (code !== 0) {
+      return;
+    }
+    // 拼接结算信息（营销）
+    await OrderApi.getSettlementProduct(data.list.map((item) => item.id).join(',')).then((res) => {
+      if (res.code !== 0) {
+        return;
+      }
+      appendSettlementProduct(data.list, res.data);
+    });
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+    mountMasonry();
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getList(state.currentSort, state.currentOrder);
+  }
+
+  onLoad((options) => {
+    state.categoryId = options.categoryId;
+    state.keyword = options.keyword;
+    getList(state.currentSort, state.currentOrder);
+  });
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .goods-list-box {
+    width: 50%;
+    box-sizing: border-box;
+
+    .left-list {
+      margin-right: 10rpx;
+      margin-bottom: 20rpx;
+    }
+
+    .right-list {
+      margin-left: 10rpx;
+      margin-bottom: 20rpx;
+    }
+  }
+
+  .goods-box {
+    &:nth-last-of-type(1) {
+      margin-bottom: 0 !important;
+    }
+
+    &:nth-child(2n) {
+      margin-right: 0;
+    }
+  }
+
+  .list-icon {
+    width: 80rpx;
+
+    .sicon-goods-card {
+      font-size: 40rpx;
+    }
+
+    .sicon-goods-list {
+      font-size: 40rpx;
+    }
+  }
+
+  .goods-card {
+    margin-left: 20rpx;
+  }
+
+  .list-filter-tabs {
+    background-color: #fff;
+  }
+
+  .filter-list-box {
+    padding: 28rpx 52rpx;
+
+    .filter-item {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #333333;
+      line-height: normal;
+      margin-bottom: 24rpx;
+
+      &:nth-last-child(1) {
+        margin-bottom: 0;
+      }
+    }
+
+    .filter-item-active {
+      color: var(--ui-BG-Main);
+    }
+  }
+
+  .tab-item {
+    height: 50px;
+    position: relative;
+    z-index: 11;
+
+    .tab-title {
+      font-size: 30rpx;
+    }
+
+    .cur-tab-title {
+      font-weight: $font-weight-bold;
+    }
+
+    .tab-line {
+      width: 60rpx;
+      height: 6rpx;
+      border-radius: 6rpx;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 10rpx;
+      background-color: var(--ui-BG-Main);
+      z-index: 12;
+    }
+  }
+</style>
diff --git a/src/pages/goods/point.vue b/src/pages/goods/point.vue
new file mode 100644
index 00000000..631d9404
--- /dev/null
+++ b/src/pages/goods/point.vue
@@ -0,0 +1,483 @@
+<!-- 秒杀商品详情 -->
+<template>
+  <s-layout :onShareAppMessage="shareInfo" navbar="goods">
+    <!-- 标题栏 -->
+    <detailNavbar />
+    <!-- 骨架屏 -->
+    <detailSkeleton v-if="state.skeletonLoading" />
+    <!-- 下架/售罄提醒 -->
+    <s-empty
+      v-else-if="
+        state.goodsInfo === null ||
+        state.goodsInfo.activity_type !== PromotionActivityTypeEnum.POINT.type
+      "
+      text="活动不存在或已结束"
+      icon="/static/soldout-empty.png"
+      showAction
+      actionText="再逛逛"
+      actionUrl="/pages/goods/list"
+    />
+    <block v-else>
+      <view class="detail-swiper-selector">
+        <!-- 商品图轮播 -->
+        <su-swiper
+          class="ss-m-b-14"
+          isPreview
+          :list="state.goodsSwiper"
+          dotStyle="tag"
+          imageMode="widthFix"
+          dotCur="bg-mask-40"
+          :seizeHeight="750"
+        />
+
+        <!-- 价格+标题 -->
+        <view class="title-card detail-card ss-p-y-40 ss-p-x-20">
+          <view class="ss-flex ss-row-between ss-col-center ss-m-b-18">
+            <view class="price-box ss-flex ss-col-bottom">
+              <image
+                :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
+                class="point-img"
+              ></image>
+              <text class="point-text ss-m-r-16">
+                {{ getShowPrice.point }}
+                {{
+                  !getShowPrice.price || getShowPrice.price === 0 ? '' : `+￥${getShowPrice.price}`
+                }}
+              </text>
+            </view>
+            <view class="sales-text">
+              {{ formatExchange(state.goodsInfo.sales_show_type, state.goodsInfo.sales) }}
+            </view>
+          </view>
+          <view class="origin-price-text ss-m-b-60" v-if="state.goodsInfo.marketPrice">
+            原价：￥{{ fen2yuan(state.selectedSku.marketPrice || state.goodsInfo.marketPrice) }}
+          </view>
+          <view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.name || '' }}</view>
+          <view class="subtitle-text ss-line-1">{{ state.goodsInfo.introduction }}</view>
+        </view>
+
+        <!-- 功能卡片 -->
+        <view class="detail-cell-card detail-card ss-flex-col">
+          <detail-cell-sku :sku="state.selectedSku" @tap="state.showSelectSku = true" />
+        </view>
+        <!-- 规格与数量弹框 -->
+        <s-select-seckill-sku
+          v-model="state.goodsInfo"
+          :show="state.showSelectSku"
+          :single-limit-count="activity.singleLimitCount"
+          @buy="onBuy"
+          @change="onSkuChange"
+          @close="state.showSelectSku = false"
+        />
+      </view>
+
+      <!-- 评价 -->
+      <detail-comment-card class="detail-comment-selector" :goodsId="state.goodsInfo.id" />
+      <!-- 详情 -->
+      <detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
+
+      <!-- 详情tabbar -->
+      <detail-tabbar v-model="state.goodsInfo">
+        <view class="buy-box ss-flex ss-col-center ss-p-r-20">
+          <button
+            class="ss-reset-button origin-price-btn ss-flex-col"
+            v-if="state.goodsInfo.marketPrice"
+            @tap="sheep.$router.go('/pages/goods/index', { id: state.goodsInfo.id })"
+          >
+            <view>
+              <view class="btn-price">{{ fen2yuan(state.goodsInfo.marketPrice) }}</view>
+              <view>原价购买</view>
+            </view>
+          </button>
+          <button
+            class="ss-reset-button btn-box ss-flex-col"
+            @tap="state.showSelectSku = true"
+            :class="state.goodsInfo.stock != 0 ? 'check-btn-box' : 'disabled-btn-box'"
+            :disabled="state.goodsInfo.stock === 0"
+          >
+            <view class="price-box ss-flex">
+              <image
+                :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
+                style="width: 36rpx; height: 36rpx; margin: 0 4rpx"
+              ></image>
+              <text class="point-text ss-m-r-16">
+                {{ getShowPrice.point }}
+                {{
+                  !getShowPrice.price || getShowPrice.price === 0 ? '' : `+￥${getShowPrice.price}`
+                }}
+              </text>
+            </view>
+            <view v-if="state.goodsInfo.stock === 0">已售罄</view>
+            <view v-else>立即兑换</view>
+          </button>
+        </view>
+      </detail-tabbar>
+    </block>
+  </s-layout>
+</template>
+
+<script setup>
+  import { computed, reactive, ref, unref } from 'vue';
+  import { onLoad, onPageScroll } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import { isEmpty } from 'lodash-es';
+  import { fen2yuan, formatExchange, formatGoodsSwiper } from '@/sheep/hooks/useGoods';
+  import detailNavbar from './components/detail/detail-navbar.vue';
+  import detailCellSku from './components/detail/detail-cell-sku.vue';
+  import detailTabbar from './components/detail/detail-tabbar.vue';
+  import detailSkeleton from './components/detail/detail-skeleton.vue';
+  import detailCommentCard from './components/detail/detail-comment-card.vue';
+  import detailContentCard from './components/detail/detail-content-card.vue';
+  import SpuApi from '@/sheep/api/product/spu';
+  import { PromotionActivityTypeEnum, SharePageEnum } from '@/sheep/helper/const';
+  import PointApi from '@/sheep/api/promotion/point';
+
+  const headerBg = sheep.$url.css('/static/img/shop/goods/score-bg.png');
+  const btnBg = sheep.$url.css('/static/img/shop/goods/seckill-btn.png');
+  const disabledBtnBg = sheep.$url.css('/static/img/shop/goods/activity-btn-disabled.png');
+  const seckillBg = sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png');
+  const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png');
+
+  onPageScroll(() => {});
+  const state = reactive({
+    skeletonLoading: true,
+    goodsInfo: {},
+    showSelectSku: false,
+    goodsSwiper: [],
+    selectedSku: {},
+    showModel: false,
+    total: 0,
+    price: '',
+  });
+
+  // 规格变更
+  function onSkuChange(e) {
+    state.selectedSku = e;
+  }
+
+  // 立即购买
+  function onBuy(sku) {
+    sheep.$router.go('/pages/order/confirm', {
+      data: JSON.stringify({
+        order_type: 'goods',
+        buy_type: 'point',
+        pointActivityId: activity.value.id,
+        items: [
+          {
+            skuId: sku.id,
+            count: sku.count,
+          },
+        ],
+      }),
+    });
+  }
+
+  // 分享信息
+  const shareInfo = computed(() => {
+    if (isEmpty(unref(activity))) return {};
+    return sheep.$platform.share.getShareInfo(
+      {
+        title: activity.value.name,
+        image: sheep.$url.cdn(state.goodsInfo.picUrl),
+        params: {
+          page: SharePageEnum.POINT.value,
+          query: activity.value.id,
+        },
+      },
+      {
+        type: 'goods', // 商品海报
+        title: activity.value.name, // 商品标题
+        image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
+        price: (getShowPrice.value.price || 0) + ` + ${getShowPrice.value.point} 积分`, // 积分价格
+        marketPrice: fen2yuan(state.goodsInfo.marketPrice), // 商品原价
+      },
+    );
+  });
+
+  const activity = ref();
+
+  const getShowPrice = computed(() => {
+    if (!isEmpty(state.selectedSku)) {
+      const sku = state.selectedSku;
+      return {
+        point: sku.point,
+        price: !sku.pointPrice ? '' : fen2yuan(sku.pointPrice),
+      };
+    }
+    return {
+      point: activity.value.point,
+      price: !activity.value.price ? '' : fen2yuan(activity.value.price),
+    };
+  });
+
+  // 查询活动
+  const getActivity = async (id) => {
+    const { data } = await PointApi.getPointActivity(id);
+    if (!data) {
+      state.goodsInfo = null;
+      state.skeletonLoading = false;
+      return;
+    }
+    activity.value = data;
+    // 查询商品
+    await getSpu(data.spuId);
+  };
+
+  // 查询商品
+  const getSpu = async (id) => {
+    const { data } = await SpuApi.getSpuDetail(id);
+    if (!data) {
+      state.goodsInfo = null;
+      state.skeletonLoading = false;
+      return;
+    }
+    data.activity_type = PromotionActivityTypeEnum.POINT.type;
+    state.goodsInfo = data;
+    state.goodsInfo.stock = Math.min(data.stock, activity.value.stock);
+    // 处理轮播图
+    state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.sliderPicUrls);
+
+    // 价格、库存使用活动的
+    data.skus.forEach((sku) => {
+      const product = activity.value.products.find((product) => product.skuId === sku.id);
+      if (product) {
+        sku.point = product.point;
+        sku.pointPrice = product.price;
+        sku.stock = Math.min(sku.stock, product.stock);
+        // 设置限购数量
+        sku.limitCount = product.count;
+      } else {
+        // 找不到可能是没配置
+        sku.stock = 0;
+      }
+    });
+
+    state.skeletonLoading = false;
+  };
+
+  onLoad((options) => {
+    // 非法参数
+    if (!options.id) {
+      state.goodsInfo = null;
+      state.skeletonLoading = false;
+      return;
+    }
+
+    // 查询活动
+    getActivity(options.id);
+  });
+</script>
+
+<style lang="scss" scoped>
+  .disabled-btn-box[disabled] {
+    background-color: transparent;
+  }
+
+  .detail-card {
+    background-color: $white;
+    margin: 14rpx 20rpx;
+    border-radius: 10rpx;
+    overflow: hidden;
+  }
+
+  // 价格标题卡片
+  .title-card {
+    width: 710rpx;
+    box-sizing: border-box;
+    background-size: 100% 100%;
+    border-radius: 10rpx;
+    background-image: v-bind(headerBg);
+    background-repeat: no-repeat;
+
+    .price-box {
+      .point-img {
+        width: 36rpx;
+        height: 36rpx;
+        margin: 0 4rpx;
+      }
+
+      .point-text {
+        font-size: 42rpx;
+        font-weight: 500;
+        color: #ff3000;
+        line-height: 36rpx;
+        font-family: OPPOSANS;
+      }
+
+      .price-text {
+        font-size: 42rpx;
+        font-weight: 500;
+        color: #ff3000;
+        line-height: 36rpx;
+        font-family: OPPOSANS;
+      }
+    }
+
+    .origin-price-text {
+      font-size: 26rpx;
+      font-weight: 400;
+      text-decoration: line-through;
+      color: $gray-c;
+      font-family: OPPOSANS;
+    }
+
+    .sales-text {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: $gray-c;
+    }
+
+    .discounts-box {
+      .discounts-tag {
+        padding: 4rpx 10rpx;
+        font-size: 24rpx;
+        font-weight: 500;
+        border-radius: 4rpx;
+        color: var(--ui-BG-Main);
+        // background: rgba(#2aae67, 0.05);
+        background: var(--ui-BG-Main-tag);
+      }
+
+      .discounts-title {
+        font-size: 24rpx;
+        font-weight: 500;
+        color: var(--ui-BG-Main);
+        line-height: normal;
+      }
+
+      .cicon-forward {
+        color: var(--ui-BG-Main);
+        font-size: 24rpx;
+        line-height: normal;
+        margin-top: 4rpx;
+      }
+    }
+
+    .title-text {
+      font-size: 30rpx;
+      font-weight: bold;
+      line-height: 42rpx;
+    }
+
+    .subtitle-text {
+      font-size: 26rpx;
+      font-weight: 400;
+      color: $dark-9;
+      line-height: 42rpx;
+    }
+  }
+
+  // 购买
+  .buy-box {
+    .check-btn-box {
+      width: 248rpx;
+      height: 80rpx;
+      font-size: 24rpx;
+      font-weight: 600;
+      margin-left: -36rpx;
+      background-image: v-bind(btnBg);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      color: #ffffff;
+      line-height: normal;
+      border-radius: 0px 40rpx 40rpx 0px;
+    }
+
+    .disabled-btn-box {
+      width: 248rpx;
+      height: 80rpx;
+      font-size: 24rpx;
+      font-weight: 600;
+      margin-left: -36rpx;
+      background-image: v-bind(disabledBtnBg);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      color: #999999;
+      line-height: normal;
+      border-radius: 0px 40rpx 40rpx 0px;
+    }
+
+    .btn-price {
+      font-family: OPPOSANS;
+
+      &::before {
+        content: '￥';
+      }
+    }
+
+    .origin-price-btn {
+      width: 236rpx;
+      height: 80rpx;
+      background: rgba(#ff5651, 0.1);
+      color: #ff6000;
+      border-radius: 40rpx 0px 0px 40rpx;
+      line-height: normal;
+      font-size: 24rpx;
+      font-weight: 500;
+
+      .no-original {
+        font-size: 28rpx;
+      }
+
+      .btn-title {
+        font-size: 28rpx;
+      }
+    }
+  }
+
+  //秒杀卡片
+  .seckill-box {
+    background: v-bind(seckillBg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .groupon-box {
+    background: v-bind(grouponBg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  //活动卡片
+  .activity-box {
+    width: 100%;
+    height: 80rpx;
+    box-sizing: border-box;
+    margin-bottom: 10rpx;
+
+    .activity-title {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 42rpx;
+
+      .activity-icon {
+        width: 38rpx;
+        height: 38rpx;
+      }
+    }
+
+    .activity-go {
+      width: 70rpx;
+      height: 32rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      font-weight: 500;
+      color: #ff6000;
+      font-size: 24rpx;
+      line-height: normal;
+    }
+  }
+
+  .model-box {
+    .title {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #333333;
+    }
+
+    .subtitle {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #333333;
+    }
+  }
+</style>
diff --git a/src/pages/goods/seckill.vue b/src/pages/goods/seckill.vue
new file mode 100644
index 00000000..c76e9487
--- /dev/null
+++ b/src/pages/goods/seckill.vue
@@ -0,0 +1,575 @@
+<!-- 秒杀商品详情 -->
+<template>
+  <s-layout :onShareAppMessage="shareInfo" navbar="goods">
+    <!-- 标题栏 -->
+    <detailNavbar />
+    <!-- 骨架屏 -->
+    <detailSkeleton v-if="state.skeletonLoading" />
+    <!-- 下架/售罄提醒 -->
+    <s-empty
+      v-else-if="
+        state.goodsInfo === null || state.goodsInfo.activity_type !== 'seckill' || endTime.ms <= 0
+      "
+      text="活动不存在或已结束"
+      icon="/static/soldout-empty.png"
+      showAction
+      actionText="再逛逛"
+      actionUrl="/pages/goods/list"
+    />
+    <block v-else>
+      <view class="detail-swiper-selector">
+        <!-- 商品图轮播 -->
+        <su-swiper
+          class="ss-m-b-14"
+          isPreview
+          :list="state.goodsSwiper"
+          dotStyle="tag"
+          imageMode="widthFix"
+          dotCur="bg-mask-40"
+          :seizeHeight="750"
+        />
+
+        <!-- 价格+标题 -->
+        <view class="title-card ss-m-y-14 ss-m-x-20 ss-p-x-20 ss-p-y-34">
+          <view class="price-box ss-flex ss-row-between ss-m-b-18">
+            <view class="ss-flex">
+              <view class="price-text ss-m-r-16">
+                {{ fen2yuan(state.selectedSku.price || state.goodsInfo.price) }}
+              </view>
+              <view class="tig ss-flex ss-col-center">
+                <view class="tig-icon ss-flex ss-col-center ss-row-center">
+                  <text class="cicon-alarm"></text>
+                </view>
+                <view class="tig-title">秒杀价</view>
+              </view>
+            </view>
+            <view class="countdown-box" v-if="endTime.ms > 0">
+              <view class="countdown-title ss-m-b-20">距结束仅剩</view>
+              <view class="ss-flex countdown-time">
+                <view class="ss-flex countdown-h">{{ endTime.h }}</view>
+                <view class="ss-m-x-4">:</view>
+                <view class="countdown-num ss-flex ss-row-center">{{ endTime.m }}</view>
+                <view class="ss-m-x-4">:</view>
+                <view class="countdown-num ss-flex ss-row-center">{{ endTime.s }}</view>
+              </view>
+            </view>
+            <view class="countdown-title" v-else> 活动已结束 </view>
+          </view>
+          <view class="ss-flex ss-row-between ss-m-b-60">
+            <view class="origin-price ss-flex ss-col-center" v-if="state.goodsInfo.marketPrice">
+              原价
+              <view class="origin-price-text">
+                {{ fen2yuan(state.selectedSku.marketPrice || state.goodsInfo.marketPrice) }}
+              </view>
+            </view>
+            <detail-progress :percent="state.percent" />
+          </view>
+
+          <view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.name || '' }}</view>
+          <view class="subtitle-text ss-line-1">{{ state.goodsInfo.introduction }}</view>
+        </view>
+
+        <!-- 功能卡片 -->
+        <view class="detail-cell-card detail-card ss-flex-col">
+          <detail-cell-sku :sku="state.selectedSku" @tap="state.showSelectSku = true" />
+        </view>
+        <!-- 规格与数量弹框 -->
+        <s-select-seckill-sku
+          v-model="state.goodsInfo"
+          :show="state.showSelectSku"
+          :single-limit-count="activity.singleLimitCount"
+          @buy="onBuy"
+          @change="onSkuChange"
+          @close="state.showSelectSku = false"
+        />
+      </view>
+
+      <!-- 评价 -->
+      <detail-comment-card class="detail-comment-selector" :goodsId="state.goodsInfo.id" />
+      <!-- 详情 -->
+      <detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
+
+      <!-- 详情tabbar -->
+      <detail-tabbar v-model="state.goodsInfo">
+        <!-- TODO: 缺货中 已售罄 判断 设计-->
+        <view class="buy-box ss-flex ss-col-center ss-p-r-20">
+          <button
+            class="ss-reset-button origin-price-btn ss-flex-col"
+            v-if="state.goodsInfo.marketPrice"
+            @tap="sheep.$router.go('/pages/goods/index', { id: state.goodsInfo.id })"
+          >
+            <view>
+              <view class="btn-price">{{ fen2yuan(state.goodsInfo.marketPrice) }}</view>
+              <view>原价购买</view>
+            </view>
+          </button>
+          <button v-else class="ss-reset-button origin-price-btn ss-flex-col">
+            <view
+              class="no-original"
+              :class="
+                state.goodsInfo.stock === 0 || timeStatusEnum !== TimeStatusEnum.STARTED ? '' : ''
+              "
+            >
+              秒杀价
+            </view>
+          </button>
+          <button
+            class="ss-reset-button btn-box ss-flex-col"
+            @tap="state.showSelectSku = true"
+            :class="
+              timeStatusEnum === TimeStatusEnum.STARTED && state.goodsInfo.stock != 0
+                ? 'check-btn-box'
+                : 'disabled-btn-box'
+            "
+            :disabled="state.goodsInfo.stock === 0 || timeStatusEnum !== TimeStatusEnum.STARTED"
+          >
+            <view class="btn-price">{{ fen2yuan(state.goodsInfo.price) }}</view>
+            <view v-if="timeStatusEnum === TimeStatusEnum.STARTED">
+              <view v-if="state.goodsInfo.stock === 0">已售罄</view>
+              <view v-else>立即秒杀</view>
+            </view>
+            <view v-else>{{ timeStatusEnum }}</view>
+          </button>
+        </view>
+      </detail-tabbar>
+    </block>
+  </s-layout>
+</template>
+
+<script setup>
+  import { computed, reactive, ref, unref } from 'vue';
+  import { onLoad, onPageScroll } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import { isEmpty, min } from 'lodash-es';
+  import { fen2yuan, formatGoodsSwiper, useDurationTime } from '@/sheep/hooks/useGoods';
+  import detailNavbar from './components/detail/detail-navbar.vue';
+  import detailCellSku from './components/detail/detail-cell-sku.vue';
+  import detailTabbar from './components/detail/detail-tabbar.vue';
+  import detailSkeleton from './components/detail/detail-skeleton.vue';
+  import detailCommentCard from './components/detail/detail-comment-card.vue';
+  import detailContentCard from './components/detail/detail-content-card.vue';
+  import detailProgress from './components/detail/detail-progress.vue';
+  import SeckillApi from '@/sheep/api/promotion/seckill';
+  import SpuApi from '@/sheep/api/product/spu';
+  import { getTimeStatusEnum, SharePageEnum, TimeStatusEnum } from '@/sheep/helper/const';
+
+  const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-bg.png');
+  const btnBg = sheep.$url.css('/static/img/shop/goods/seckill-btn.png');
+  const disabledBtnBg = sheep.$url.css('/static/img/shop/goods/activity-btn-disabled.png');
+  const seckillBg = sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png');
+  const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png');
+
+  onPageScroll(() => {});
+  const state = reactive({
+    skeletonLoading: true,
+    goodsInfo: {},
+    showSelectSku: false,
+    goodsSwiper: [],
+    selectedSku: {},
+    showModel: false,
+    total: 0,
+    percent: 0,
+    price: '',
+  });
+
+  const endTime = computed(() => {
+    return useDurationTime(activity.value.endTime);
+  });
+
+  // 规格变更
+  function onSkuChange(e) {
+    state.selectedSku = e;
+  }
+
+  // 立即购买
+  function onBuy(sku) {
+    sheep.$router.go('/pages/order/confirm', {
+      data: JSON.stringify({
+        order_type: 'goods',
+        buy_type: 'seckill',
+        seckillActivityId: activity.value.id,
+        items: [
+          {
+            skuId: sku.id,
+            count: sku.count,
+          },
+        ],
+      }),
+    });
+  }
+
+  // 分享信息
+  const shareInfo = computed(() => {
+    if (isEmpty(unref(activity))) return {};
+    return sheep.$platform.share.getShareInfo(
+      {
+        title: activity.value.name,
+        image: sheep.$url.cdn(state.goodsInfo.picUrl),
+        params: {
+          page: SharePageEnum.SECKILL.value,
+          query: activity.value.id,
+        },
+      },
+      {
+        type: 'goods', // 商品海报
+        title: activity.value.name, // 商品标题
+        image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
+        price: fen2yuan(state.goodsInfo.price), // 商品价格
+        marketPrice: fen2yuan(state.goodsInfo.marketPrice), // 商品原价
+      },
+    );
+  });
+
+  const activity = ref();
+  const timeStatusEnum = ref('');
+
+  // 查询活动
+  const getActivity = async (id) => {
+    const { data } = await SeckillApi.getSeckillActivity(id);
+    if (!data) {
+      state.goodsInfo = null;
+      state.skeletonLoading = false;
+      return;
+    }
+    activity.value = data;
+    timeStatusEnum.value = getTimeStatusEnum(activity.value.startTime, activity.value.endTime);
+    state.percent = 100 - (data.stock / data.totalStock) * 100;
+    // 查询商品
+    await getSpu(data.spuId);
+  };
+
+  // 查询商品
+  const getSpu = async (id) => {
+    const { data } = await SpuApi.getSpuDetail(id);
+    if (!data) {
+      state.goodsInfo = null;
+      state.skeletonLoading = false;
+      return;
+    }
+    data.activity_type = 'seckill';
+    state.goodsInfo = data;
+    // 处理轮播图
+    state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.sliderPicUrls);
+
+    // 默认显示最低价
+    state.goodsInfo.price = min([
+      state.goodsInfo.price,
+      ...activity.value.products.map((spu) => spu.seckillPrice),
+    ]);
+
+    // 价格、库存使用活动的
+    data.skus.forEach((sku) => {
+      const product = activity.value.products.find((product) => product.skuId === sku.id);
+      if (product) {
+        sku.price = product.seckillPrice;
+        sku.stock = Math.min(sku.stock, product.stock);
+      } else {
+        // 找不到可能是没配置，则不能发起秒杀
+        sku.stock = 0;
+      }
+      // 设置限购数量
+      if (activity.value.totalLimitCount > 0 && activity.value.singleLimitCount > 0) {
+        sku.limitCount = Math.min(activity.value.totalLimitCount, activity.value.singleLimitCount);
+      } else if (activity.value.totalLimitCount > 0) {
+        sku.limitCount = activity.value.totalLimitCount;
+      } else if (activity.value.singleLimitCount > 0) {
+        sku.limitCount = activity.value.singleLimitCount;
+      }
+    });
+
+    state.skeletonLoading = false;
+  };
+
+  onLoad((options) => {
+    // 非法参数
+    if (!options.id) {
+      state.goodsInfo = null;
+      state.skeletonLoading = false;
+      return;
+    }
+
+    // 查询活动
+    getActivity(options.id);
+  });
+</script>
+
+<style lang="scss" scoped>
+  .disabled-btn-box[disabled] {
+    background-color: transparent;
+  }
+
+  .detail-card {
+    background-color: $white;
+    margin: 14rpx 20rpx;
+    border-radius: 10rpx;
+    overflow: hidden;
+  }
+
+  // 价格标题卡片
+  .title-card {
+    width: 710rpx;
+    box-sizing: border-box;
+    // height: 320rpx;
+    background-size: 100% 100%;
+    border-radius: 10rpx;
+    background-image: v-bind(headerBg);
+    background-repeat: no-repeat;
+
+    .price-box {
+      .price-text {
+        font-size: 30rpx;
+        font-weight: 500;
+        color: #fff;
+        line-height: normal;
+        font-family: OPPOSANS;
+
+        &::before {
+          content: '￥';
+          font-size: 30rpx;
+        }
+      }
+    }
+
+    .origin-price {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #fff;
+      opacity: 0.7;
+
+      .origin-price-text {
+        text-decoration: line-through;
+
+        font-family: OPPOSANS;
+
+        &::before {
+          content: '￥';
+        }
+      }
+    }
+
+    .tig {
+      border: 2rpx solid #ffffff;
+      border-radius: 4rpx;
+      width: 126rpx;
+      height: 38rpx;
+
+      .tig-icon {
+        width: 40rpx;
+        height: 40rpx;
+        margin-left: -2rpx;
+        background: #ffffff;
+        border-radius: 4rpx 0 0 4rpx;
+
+        .cicon-alarm {
+          font-size: 32rpx;
+          color: #fc6e6f;
+        }
+      }
+
+      .tig-title {
+        width: 86rpx;
+        font-size: 24rpx;
+        font-weight: 500;
+        line-height: normal;
+        color: #ffffff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    .countdown-title {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+    }
+
+    .countdown-time {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+
+      .countdown-h {
+        font-size: 24rpx;
+        font-family: OPPOSANS;
+        font-weight: 500;
+        color: #ffffff;
+        padding: 0 4rpx;
+        height: 40rpx;
+        background: rgba(#000000, 0.1);
+        border-radius: 6rpx;
+      }
+
+      .countdown-num {
+        font-size: 24rpx;
+        font-family: OPPOSANS;
+        font-weight: 500;
+        color: #ffffff;
+        width: 40rpx;
+        height: 40rpx;
+        background: rgba(#000000, 0.1);
+        border-radius: 6rpx;
+      }
+    }
+
+    .discounts-box {
+      .discounts-tag {
+        padding: 4rpx 10rpx;
+        font-size: 24rpx;
+        font-weight: 500;
+        border-radius: 4rpx;
+        color: var(--ui-BG-Main);
+        // background: rgba(#2aae67, 0.05);
+        background: var(--ui-BG-Main-tag);
+      }
+
+      .discounts-title {
+        font-size: 24rpx;
+        font-weight: 500;
+        color: var(--ui-BG-Main);
+        line-height: normal;
+      }
+
+      .cicon-forward {
+        color: var(--ui-BG-Main);
+        font-size: 24rpx;
+        line-height: normal;
+        margin-top: 4rpx;
+      }
+    }
+
+    .title-text {
+      font-size: 30rpx;
+      font-weight: bold;
+      line-height: 42rpx;
+      color: #fff;
+    }
+
+    .subtitle-text {
+      font-size: 26rpx;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 42rpx;
+      opacity: 0.9;
+    }
+  }
+
+  // 购买
+  .buy-box {
+    .check-btn-box {
+      width: 248rpx;
+      height: 80rpx;
+      font-size: 24rpx;
+      font-weight: 600;
+      margin-left: -36rpx;
+      background-image: v-bind(btnBg);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      color: #ffffff;
+      line-height: normal;
+      border-radius: 0px 40rpx 40rpx 0px;
+    }
+
+    .disabled-btn-box {
+      width: 248rpx;
+      height: 80rpx;
+      font-size: 24rpx;
+      font-weight: 600;
+      margin-left: -36rpx;
+      background-image: v-bind(disabledBtnBg);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      color: #999999;
+      line-height: normal;
+      border-radius: 0px 40rpx 40rpx 0px;
+    }
+
+    .btn-price {
+      font-family: OPPOSANS;
+
+      &::before {
+        content: '￥';
+      }
+    }
+
+    .origin-price-btn {
+      width: 236rpx;
+      height: 80rpx;
+      background: rgba(#ff5651, 0.1);
+      color: #ff6000;
+      border-radius: 40rpx 0px 0px 40rpx;
+      line-height: normal;
+      font-size: 24rpx;
+      font-weight: 500;
+
+      .no-original {
+        font-size: 28rpx;
+      }
+
+      .btn-title {
+        font-size: 28rpx;
+      }
+    }
+  }
+
+  //秒杀卡片
+  .seckill-box {
+    background: v-bind(seckillBg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .groupon-box {
+    background: v-bind(grouponBg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  //活动卡片
+  .activity-box {
+    width: 100%;
+    height: 80rpx;
+    box-sizing: border-box;
+    margin-bottom: 10rpx;
+
+    .activity-title {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 42rpx;
+
+      .activity-icon {
+        width: 38rpx;
+        height: 38rpx;
+      }
+    }
+
+    .activity-go {
+      width: 70rpx;
+      height: 32rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      font-weight: 500;
+      color: #ff6000;
+      font-size: 24rpx;
+      line-height: normal;
+    }
+  }
+
+  .model-box {
+    .title {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #333333;
+    }
+
+    .subtitle {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #333333;
+    }
+  }
+
+  image {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/src/pages/home/city.vue b/src/pages/home/city.vue
index 5588890b..dd2ca882 100644
--- a/src/pages/home/city.vue
+++ b/src/pages/home/city.vue
@@ -1,15 +1,11 @@
 <template>
-  <wd-config-provider theme="dark">
+  <wd-config-provider class="h-full flex flex-col" theme="dark">
     <wd-navbar title="城市" safeAreaInsetTop :bordered="false">
       <template #left>
         <uni-icons type="back" size="30" color="#ffcd32" @click="back"></uni-icons>
       </template>
     </wd-navbar>
 
-    <!-- <view class="mt-100rpx">
-      <wd-search v-model="cityName" shape="round" background="#222222" placeholder="搜索" />
-    </view> -->
-
     <view class="px-3 text-sm">热门城市</view>
     <view class="flex flex-wrap gap-3 my-3 mx-4">
       <text
@@ -48,22 +44,24 @@
 </script>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
-  import cityIndexList, { type cityItem } from './city-index';
+  import { getCurrentInstance } from 'vue';
+  import cityIndex, { type cityItem } from './city-index';
   // @ts-ignore
   import sheep from '@/sheep';
 
-  const cityIndex = cityIndexList;
-  const cityName = ref('');
+  const instance: any = getCurrentInstance()?.proxy;
+  const eventChannel = instance.getOpenerEventChannel();
 
   // 选择热门城市
   const selectHot = (v: cityItem) => {
     sheep.$store('user').setUserCity(v);
+    eventChannel.emit('changeCity');
     uni.navigateBack();
   };
 
   const select = (v: cityItem) => {
     sheep.$store('user').setUserCity(v);
+    eventChannel.emit('changeCity');
     uni.navigateBack();
   };
 
@@ -71,3 +69,9 @@
     uni.navigateBack();
   }
 </script>
+
+<style>
+  page {
+    height: 100%;
+  }
+</style>
diff --git a/src/pages/home/detail.vue b/src/pages/home/detail.vue
index 28093de2..ba44e290 100644
--- a/src/pages/home/detail.vue
+++ b/src/pages/home/detail.vue
@@ -4,14 +4,18 @@
       <template #left>
         <uni-icons type="back" size="30" color="#ffcd32" @click="back"></uni-icons>
         <view class="flex items-center" :style="navUserInfoStyle">
-          <image class="size-70rpx bg-#333 rounded-full mr-1" src="" mode="scaleToFill" />
-          <text class="truncate text-sm">稍后发非麻烦咖啡</text>
+          <image
+            class="size-70rpx bg-#333 rounded-full mr-1"
+            :src="userDetail.member?.memberAvatar"
+            mode="aspectFill"
+          />
+          <text class="truncate text-sm">{{ userDetail.member?.memberNickname }}</text>
         </view>
       </template>
       <template #right>
         <view class="flex items-center">
           <view class="py-1 px-2 text-xs bg-color-theme-dark rounded-full mr-3">
-            365.56km · 在线
+            {{ userDetail.issueCity }}km · 在线
           </view>
           <uni-icons type="more-filled" size="28" color="#ffcd32"></uni-icons>
         </view>
@@ -19,7 +23,7 @@
     </wd-navbar>
 
     <scroll-view
-      style="height: calc(100vh - 100rpx)"
+      style="height: calc(100vh - 88px)"
       scroll-y
       refresher-enabled
       refresher-background="#222"
@@ -33,22 +37,28 @@
       <view class="w-full h-600rpx relative">
         <image
           class="w-full h-full absolute inset-0"
-          src="http://dummyimage.com/100x100/ac0ee3"
+          :src="userDetail.coverPic"
           mode="aspectFill"
         />
         <view class="absolute bottom-40rpx left-0 right-0 flex flex-col items-center z-100 w-full">
           <image
             class="text-center size-150rpx rounded-full bg-#333 mb-20rpx"
-            src="http://dummyimage.com/100x100/ac0ee3"
+            :src="userDetail.member?.memberAvatar"
             mode="aspectFill"
           />
-          <view class="text-sm mb-20rpx">{{ '啊发发' }}</view>
+          <view class="text-sm mb-20rpx">{{ userDetail.member?.memberNickname }}</view>
           <view class="bg-color-theme text-sm c-black px-2 rounded-1 mb-20rpx">真人认证</view>
           <view class="flex flex-wrap justify-center mb-20rpx">
-            <text class="px-2 rounded-1 mr-2 text-sm bg-#222 text-color-theme">女·23岁</text>
-            <text class="px-2 rounded-1 mr-2 text-sm bg-#222 text-color-theme">170cm</text>
+            <text class="px-2 rounded-1 mr-2 text-sm bg-#222 text-color-theme">
+              {{ '未知性别 · ' + userDetail.member?.memberAge + '岁' }}
+            </text>
+            <text class="px-2 rounded-1 mr-2 text-sm bg-#222 text-color-theme">
+              {{ userDetail.member?.memberHeight + 'cm' }}
+            </text>
+          </view>
+          <view class="text-sm px-8">
+            {{ userDetail.description }}
           </view>
-          <view class="text-sm">{{ '发哈夫哈佛哈维合法i凤凰网你' }}</view>
         </view>
         <view class="absolute z-10 top-0 left-0 size-full bg-#33333333" :style="filterStyle"></view>
       </view>
@@ -59,7 +69,8 @@
           class="size-140rpx rounded-1 mr-2 mb-1"
           v-for="(item, index) in 5"
           :key="index"
-          src="http://dummyimage.com/100x100/ac0ee3"
+          :src="userDetail.member?.memberAvatar"
+          mode="aspectFill"
         />
       </view>
       <view class="m-4">
@@ -95,7 +106,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed } from 'vue';
+  import { ref, computed, getCurrentInstance, onMounted } from 'vue';
   import moment from '@/sheep/components/moment/moment.vue';
   import useScroll from '@/sheep/hooks/use-scroll';
   import RecentApi from '@/sheep/api/member/recent';
@@ -109,9 +120,24 @@
     onRefresherAbort,
     onScrollToLower,
     onClickLoadMore,
-  } = useScroll(RecentApi.quickPage);
+  } = useScroll(RecentApi.quickPage, {
+    scene: 'DYNAMIC_RECOMMEND',
+    province: '',
+    city: '',
+    memberId: '',
+  });
 
   const scrollTop = ref(0);
+  const userDetail = ref<any>({});
+
+  onMounted(() => {
+    const instance: any = getCurrentInstance()?.proxy;
+    const eventChannel = instance.getOpenerEventChannel();
+
+    eventChannel.on('recentDetail', function (user: any) {
+      userDetail.value = user;
+    });
+  });
 
   const filterStyle = computed(() => {
     let blur = 0;
diff --git a/src/pages/home/home.vue b/src/pages/home/home.vue
index dc22a9c0..7dfb4041 100644
--- a/src/pages/home/home.vue
+++ b/src/pages/home/home.vue
@@ -2,9 +2,9 @@
   <wd-config-provider theme="dark">
     <wd-navbar title="" safeAreaInsetTop :bordered="false">
       <template #left>
-        <view class="flex items-center text-size-base" @click="selectAddress">
+        <view class="flex items-center w-220rpx" @click="selectAddress">
           <uni-icons type="location" size="22" color="#ffcd32"></uni-icons>
-          <text class="truncate">{{ userCity.t || '未选择' }}</text>
+          <text class="truncate text-xs">{{ userCity?.t || '未选择' }}</text>
         </view>
       </template>
       <template #title>
@@ -15,8 +15,9 @@
     </wd-navbar>
 
     <scroll-view
-      style="height: calc(100vh - 100rpx - 100rpx)"
+      style="height: calc(100vh - 44px - 50px)"
       scroll-y
+      scroll-with-animation
       refresher-enabled
       refresher-background="#222"
       :refresher-triggered="refresherTriggered"
@@ -25,7 +26,7 @@
       @refresherabort="onRefresherAbort"
       @scrolltolower="onScrollToLower"
     >
-      <view class="flex px-6 py-2" v-for="user in listData" :key="user.id" @click="detail">
+      <view class="flex px-6 py-2" v-for="user in listData" :key="user.id" @click="detail(user)">
         <image
           class="w-200rpx h-300rpx mr-3 rounded-2 bg-#777"
           :src="user.member.memberAvatar"
@@ -34,7 +35,7 @@
         <view class="flex-1">
           <view class="flex justify-between items-center">
             <text class="text-size-base">{{ user.member.memberNickname }}</text>
-            <text class="px-2 rounded-full text-size-sm bg-color-theme-dark">{{ '在线' }}</text>
+            <text class="px-2 rounded-full text-xs bg-color-theme-dark">{{ '在线' }}</text>
           </view>
           <view class="mt-2">
             <text class="px-2 text-xs c-black rounded-full bg-color-theme-dark">真人认证</text>
@@ -65,9 +66,9 @@
       />
       <view style="height: 100rpx"></view>
     </scroll-view>
-
-    <wd-backtop :scrollTop="0"></wd-backtop>
   </wd-config-provider>
+
+  <s-auth-modal />
 </template>
 
 <script setup lang="ts">
@@ -93,20 +94,30 @@
     city: '',
     memberId: '',
   });
-  const userCity = computed(() => sheep.$store('user').userCity);
 
   const current = ref(0);
   const segmentedItems = ['广场', '最近', '新人'];
+  const userCity = computed(() => {
+    return sheep.$store('user').userCity;
+  });
 
   const selectAddress = () => {
     uni.navigateTo({
       url: '/pages/home/city',
+      events: {
+        changeCity: () => {
+          onRefresherRefresh();
+        },
+      },
     });
   };
 
-  const detail = () => {
+  const detail = (user: any) => {
     uni.navigateTo({
       url: '/pages/home/detail',
+      success: function (res) {
+        res.eventChannel.emit('recentDetail', user);
+      },
     });
   };
 
diff --git a/src/pages/index/cart.vue b/src/pages/index/cart.vue
new file mode 100644
index 00000000..210b936b
--- /dev/null
+++ b/src/pages/index/cart.vue
@@ -0,0 +1,315 @@
+<template>
+  <s-layout :bgStyle="{ color: '#fff' }" tabbar="/pages/index/cart" title="购物车">
+    <s-empty
+      v-if="state.list.length === 0"
+      icon="/static/cart-empty.png"
+      text="购物车空空如也,快去逛逛吧~"
+    />
+
+    <!-- 头部 -->
+    <view v-if="state.list.length" class="cart-box ss-flex ss-flex-col ss-row-between">
+      <view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
+        <view class="header-left ss-flex ss-col-center ss-font-26">
+          共
+          <text class="goods-number ui-TC-Main ss-flex">{{ state.list.length }}</text>
+          件商品
+        </view>
+        <view class="header-right">
+          <button v-if="state.editMode" class="ss-reset-button" @tap="onChangeEditMode(false)">
+            取消
+          </button>
+          <button v-else class="ss-reset-button ui-TC-Main" @tap="onChangeEditMode(true)">
+            编辑
+          </button>
+        </view>
+      </view>
+      <!-- 内容 -->
+      <view class="cart-content ss-flex-1 ss-p-x-30 ss-m-b-40">
+        <view v-for="item in state.list" :key="item.id" class="goods-box ss-r-10 ss-m-b-14">
+          <view class="ss-flex ss-col-center">
+            <label class="check-box ss-flex ss-col-center ss-p-l-10" @tap="onSelectSingle(item.id)">
+              <radio
+                :checked="state.selectedIds.includes(item.id)"
+                color="var(--ui-BG-Main)"
+                style="transform: scale(0.8)"
+                @tap.stop="onSelectSingle(item.id)"
+              />
+            </label>
+            <view v-if="item.spu?.status !== 1 && !state.editMode" class="down-box">
+              该商品已下架
+            </view>
+            <view v-else-if="item.spu?.stock <= 0 && !state.editMode" class="down-box">
+              该商品无库存
+            </view>
+            <s-goods-item
+              :img="item.spu.picUrl || item.goods.image"
+              :price="item.sku.price"
+              :skuText="
+                item.sku.properties.length > 1
+                  ? item.sku.properties.reduce(
+                      (items2, items) => items2.valueName + ' ' + items.valueName,
+                    )
+                  : item.sku.properties[0].valueName
+              "
+              :title="item.spu.name"
+              :titleWidth="400"
+              priceColor="#FF3000"
+            >
+              <template v-if="!state.editMode" v-slot:tool>
+                <su-number-box
+                  v-model="item.count"
+                  :max="item.sku.stock"
+                  :min="0"
+                  :step="1"
+                  @change="onNumberChange($event, item)"
+                />
+              </template>
+            </s-goods-item>
+          </view>
+        </view>
+      </view>
+      <!-- 底部 -->
+      <su-fixed v-if="state.list.length > 0" :isInset="false" :val="48" bottom placeholder>
+        <view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
+          <view class="footer-left ss-flex ss-col-center">
+            <label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
+              <radio
+                :checked="state.isAllSelected"
+                color="var(--ui-BG-Main)"
+                style="transform: scale(0.8)"
+                @tap.stop="onSelectAll"
+              />
+              <view class="ss-m-l-8"> 全选</view>
+            </label>
+            <text>合计：</text>
+            <view class="text-price price-text">
+              {{ fen2yuan(state.totalPriceSelected) }}
+            </view>
+          </view>
+          <view class="footer-right">
+            <button
+              v-if="state.editMode"
+              class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
+              @tap="onDelete"
+            >
+              删除
+            </button>
+            <button
+              v-else
+              class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
+              @tap="onConfirm"
+            >
+              去结算
+              {{ state.selectedIds?.length ? `(${state.selectedIds.length})` : '' }}
+            </button>
+          </view>
+        </view>
+      </su-fixed>
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onShow } from '@dcloudio/uni-app';
+  import SpuApi from '@/sheep/api/product/spu';
+  import { computed, reactive } from 'vue';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import { isEmpty } from '@/sheep/helper/utils';
+
+  // 隐藏原生tabBar
+  // uni.hideTabBar({
+  //   fail: () => {},
+  // });
+
+  const sys_navBar = sheep.$platform.navbar;
+  const cart = sheep.$store('cart');
+
+  const state = reactive({
+    editMode: computed(() => cart.editMode),
+    list: computed(() => cart.list),
+    selectedList: [],
+    selectedIds: computed(() => cart.selectedIds),
+    isAllSelected: computed(() => cart.isAllSelected),
+    totalPriceSelected: computed(() => cart.totalPriceSelected),
+  });
+
+  // 单选选中
+  function onSelectSingle(id) {
+    cart.selectSingle(id);
+  }
+
+  // 编辑、取消
+  function onChangeEditMode(flag) {
+    cart.onChangeEditMode(flag);
+  }
+
+  // 全选
+  function onSelectAll() {
+    cart.selectAll(!state.isAllSelected);
+  }
+
+  // 结算
+  async function onConfirm() {
+    const items = [];
+    state.selectedList = state.list.filter((item) => state.selectedIds.includes(item.id));
+    state.selectedList.map((item) => {
+      // 此处前端做出修改
+      items.push({
+        skuId: item.sku.id,
+        count: item.count,
+        cartId: item.id,
+        categoryId: item.spu.categoryId,
+      });
+    });
+    if (isEmpty(items)) {
+      sheep.$helper.toast('请先选择商品');
+      return;
+    }
+    await validateDeliveryType(state.selectedList.map((item) => item.spu).map((spu) => spu.id));
+    sheep.$router.go('/pages/order/confirm', {
+      data: JSON.stringify({
+        items,
+      }),
+    });
+  }
+
+  /**
+   * 校验配送方式冲突
+   *
+   * @param {string[]} spuIds - 商品ID数组
+   * @returns {Promise<void>}
+   * @throws {Error} 当配送方式冲突或获取商品信息失败时抛出错误
+   */
+  async function validateDeliveryType(spuIds) {
+    // 获取商品信息
+    const { data: spuList } = await SpuApi.getSpuListByIds(spuIds.join(','));
+    if (isEmpty(spuList)) {
+      sheep.$helper.toast('未找到商品信息');
+      throw new Error('未找到商品信息');
+    }
+    // 获取所有商品的配送方式列表
+    const deliveryTypesList = spuList.map((item) => item.deliveryTypes);
+    // 检查配送方式冲突
+    const hasConflict = checkDeliveryConflicts(deliveryTypesList);
+    if (hasConflict) {
+      sheep.$helper.toast('选中商品支持的配送方式冲突，不允许提交');
+      throw new Error('选中商品支持的配送方式冲突，不允许提交');
+    }
+  }
+
+  /**
+   * 检查配送方式列表中是否存在冲突
+   * @description
+   * 示例场景:
+   * A 商品支持：[快递, 自提]
+   * B 商品支持：[快递]
+   * C 商品支持：[自提]
+   *
+   * 对比结果:
+   * A 和 B：不冲突 (有交集：快递)
+   * A 和 C：不冲突 (有交集：自提)
+   * B 和 C：冲突 (无交集)
+   * @param {Array<Array<number>>} deliveryTypesList - 配送方式列表的数组
+   * @returns {boolean} 是否存在冲突
+   */
+  function checkDeliveryConflicts(deliveryTypesList) {
+    for (let i = 0; i < deliveryTypesList.length - 1; i++) {
+      const currentTypes = deliveryTypesList[i];
+      for (let j = i + 1; j < deliveryTypesList.length; j++) {
+        const nextTypes = deliveryTypesList[j];
+        // 检查是否没有交集（即冲突）
+        const hasNoIntersection = !currentTypes.some((type) => nextTypes.includes(type));
+        if (hasNoIntersection) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  function onNumberChange(e, cartItem) {
+    if (e === 0) {
+      cart.delete(cartItem.id);
+      return;
+    }
+    if (cartItem.goods_num === e) return;
+    cartItem.goods_num = e;
+    cart.update({
+      goods_id: cartItem.id,
+      goods_num: e,
+      goods_sku_price_id: cartItem.goods_sku_price_id,
+    });
+  }
+
+  async function onDelete() {
+    cart.delete(state.selectedIds);
+  }
+
+  function getCartList() {
+    cart.getList();
+  }
+
+  onShow(() => {
+    getCartList();
+  });
+</script>
+
+<style lang="scss" scoped>
+  :deep(.ui-fixed) {
+    height: 72rpx;
+  }
+
+  .cart-box {
+    width: 100%;
+
+    .cart-header {
+      height: 70rpx;
+      background-color: #f6f6f6;
+      width: 100%;
+      position: fixed;
+      left: 0;
+      top: v-bind('sys_navBar') rpx;
+      z-index: 1000;
+      box-sizing: border-box;
+    }
+
+    .cart-footer {
+      height: 100rpx;
+      background-color: #fff;
+
+      .pay-btn {
+        width: 180rpx;
+        height: 70rpx;
+        font-size: 28rpx;
+        line-height: 28rpx;
+        font-weight: 500;
+        border-radius: 40rpx;
+      }
+    }
+
+    .cart-content {
+      margin-top: 70rpx;
+
+      .goods-box {
+        background-color: #fff;
+        position: relative;
+      }
+      // 下架商品
+      .down-box {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(#fff, 0.8);
+        z-index: 2;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #999;
+        font-size: 32rpx;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/index/category.vue b/src/pages/index/category.vue
new file mode 100644
index 00000000..1dfa5d8a
--- /dev/null
+++ b/src/pages/index/category.vue
@@ -0,0 +1,240 @@
+<!-- 商品分类列表 -->
+<template>
+  <s-layout :bgStyle="{ color: '#fff' }" tabbar="/pages/index/category" title="分类">
+    <view class="s-category">
+      <view class="three-level-wrap ss-flex ss-col-top">
+        <!-- 商品分类（左） -->
+        <view class="side-menu-wrap" :style="[{ top: Number(statusBarHeight + 88) + 'rpx' }]">
+          <scroll-view scroll-y :style="[{ height: pageHeight + 'px' }]">
+            <view
+              class="menu-item ss-flex"
+              v-for="(item, index) in state.categoryList"
+              :key="item.id"
+              :class="[{ 'menu-item-active': index === state.activeMenu }]"
+              @tap="onMenu(index)"
+            >
+              <view class="menu-title ss-line-1">
+                {{ item.name }}
+              </view>
+            </view>
+          </scroll-view>
+        </view>
+        <!-- 商品分类（右） -->
+        <view class="goods-list-box" v-if="state.categoryList?.length">
+          <scroll-view scroll-y :style="[{ height: pageHeight + 'px' }]">
+            <image
+              v-if="state.categoryList[state.activeMenu].picUrl"
+              class="banner-img"
+              :src="sheep.$url.cdn(state.categoryList[state.activeMenu].picUrl)"
+              mode="widthFix"
+            />
+            <first-one v-if="state.style === 'first_one'" :pagination="state.pagination" />
+            <first-two v-if="state.style === 'first_two'" :pagination="state.pagination" />
+            <second-one
+              v-if="state.style === 'second_one'"
+              :data="state.categoryList"
+              :activeMenu="state.activeMenu"
+            />
+            <uni-load-more
+              v-if="
+                (state.style === 'first_one' || state.style === 'first_two') &&
+                state.pagination.total > 0
+              "
+              :status="state.loadStatus"
+              :content-text="{
+                contentdown: '点击查看更多',
+              }"
+              @tap="loadMore"
+            />
+          </scroll-view>
+        </view>
+      </view>
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import secondOne from './components/second-one.vue';
+  import firstOne from './components/first-one.vue';
+  import firstTwo from './components/first-two.vue';
+  import sheep from '@/sheep';
+  import CategoryApi from '@/sheep/api/product/category';
+  import SpuApi from '@/sheep/api/product/spu';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { computed, reactive } from 'vue';
+  import _ from 'lodash-es';
+  import { handleTree } from '@/sheep/helper/utils';
+
+  const state = reactive({
+    style: 'second_one', // first_one（一级 - 样式一）, first_two（二级 - 样式二）, second_one（二级）
+    categoryList: [], // 商品分类树
+    activeMenu: 0, // 选中的一级菜单，在 categoryList 的下标
+
+    pagination: {
+      // 商品分页
+      list: [], // 商品列表
+      total: [], // 商品总数
+      pageNo: 1,
+      pageSize: 6,
+    },
+    loadStatus: '',
+  });
+
+  const { safeArea } = sheep.$platform.device;
+  const pageHeight = computed(() => safeArea.height - 44 - 50);
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+
+  // 加载商品分类
+  async function getList() {
+    const { code, data } = await CategoryApi.getCategoryList();
+    if (code !== 0) {
+      return;
+    }
+    state.categoryList = handleTree(data);
+  }
+
+  // 选中菜单
+  const onMenu = (val) => {
+    state.activeMenu = val;
+    if (state.style === 'first_one' || state.style === 'first_two') {
+      state.pagination.pageNo = 1;
+      state.pagination.list = [];
+      state.pagination.total = 0;
+      getGoodsList();
+    }
+  };
+
+  // 加载商品列表
+  async function getGoodsList() {
+    // 加载列表
+    state.loadStatus = 'loading';
+    const res = await SpuApi.getSpuPage({
+      categoryId: state.categoryList[state.activeMenu].id,
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+    });
+    if (res.code !== 0) {
+      return;
+    }
+    // 合并列表
+    state.pagination.list = _.concat(state.pagination.list, res.data.list);
+    state.pagination.total = res.data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 加载更多商品
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getGoodsList();
+  }
+
+  onLoad(async (params) => {
+    await getList();
+
+    // 首页点击分类的处理：查找满足条件的分类
+    const foundCategory = state.categoryList.find((category) => category.id === Number(params.id));
+    // 如果找到则调用 onMenu 自动勾选相应分类，否则调用 onMenu(0) 勾选第一个分类
+    onMenu(foundCategory ? state.categoryList.indexOf(foundCategory) : 0);
+  });
+
+  function handleScrollToLower() {
+    loadMore();
+  }
+</script>
+
+<style lang="scss" scoped>
+  .s-category {
+    :deep() {
+      .side-menu-wrap {
+        width: 200rpx;
+        height: 100%;
+        padding-left: 12rpx;
+        background-color: #f6f6f6;
+        position: fixed;
+        left: 0;
+
+        .menu-item {
+          width: 100%;
+          height: 88rpx;
+          position: relative;
+          transition: all linear 0.2s;
+
+          .menu-title {
+            line-height: 32rpx;
+            font-size: 30rpx;
+            font-weight: 400;
+            color: #333;
+            margin-left: 28rpx;
+            position: relative;
+            z-index: 0;
+
+            &::before {
+              content: '';
+              width: 64rpx;
+              height: 12rpx;
+              background: linear-gradient(
+                90deg,
+                var(--ui-BG-Main-gradient),
+                var(--ui-BG-Main-light)
+              ) !important;
+              position: absolute;
+              left: -64rpx;
+              bottom: 0;
+              z-index: -1;
+              transition: all linear 0.2s;
+            }
+          }
+
+          &.menu-item-active {
+            background-color: #fff;
+            border-radius: 20rpx 0 0 20rpx;
+
+            &::before {
+              content: '';
+              position: absolute;
+              right: 0;
+              bottom: -20rpx;
+              width: 20rpx;
+              height: 20rpx;
+              background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
+            }
+
+            &::after {
+              content: '';
+              position: absolute;
+              top: -20rpx;
+              right: 0;
+              width: 20rpx;
+              height: 20rpx;
+              background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
+            }
+
+            .menu-title {
+              font-weight: 600;
+
+              &::before {
+                left: 0;
+              }
+            }
+          }
+        }
+      }
+
+      .goods-list-box {
+        background-color: #fff;
+        width: calc(100vw - 200rpx);
+        padding: 10px;
+        margin-left: 200rpx;
+      }
+
+      .banner-img {
+        width: calc(100vw - 130px);
+        border-radius: 5px;
+        margin-bottom: 20rpx;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/index/components/first-one.vue b/src/pages/index/components/first-one.vue
new file mode 100644
index 00000000..2decc86f
--- /dev/null
+++ b/src/pages/index/components/first-one.vue
@@ -0,0 +1,26 @@
+<!-- 分类展示：first-one 风格  -->
+<template>
+  <view class="ss-flex-col">
+    <view class="goods-box" v-for="item in pagination.list" :key="item.id">
+      <s-goods-column
+        size="sl"
+        :data="item"
+        @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+
+  const props = defineProps({
+    pagination: Object,
+  });
+</script>
+
+<style lang="scss" scoped>
+  .goods-box {
+    width: 100%;
+  }
+</style>
diff --git a/src/pages/index/components/first-two.vue b/src/pages/index/components/first-two.vue
new file mode 100644
index 00000000..801cb8da
--- /dev/null
+++ b/src/pages/index/components/first-two.vue
@@ -0,0 +1,66 @@
+<!-- 分类展示：first-two 风格  -->
+<template>
+  <view>
+    <view class="ss-flex flex-wrap">
+      <view class="goods-box" v-for="item in pagination?.list" :key="item.id">
+        <view @click="sheep.$router.go('/pages/goods/index', { id: item.id })">
+          <view class="goods-img">
+            <image class="goods-img" :src="item.picUrl" mode="aspectFit" />
+          </view>
+          <view class="goods-content">
+            <view class="goods-title ss-line-1 ss-m-b-28">{{ item.name }}</view>
+            <view class="goods-price">￥{{ fen2yuan(item.price) }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+
+  const props = defineProps({
+    pagination: Object,
+  });
+</script>
+
+<style lang="scss" scoped>
+  .goods-box {
+    width: calc((100% - 20rpx) / 2);
+    margin-bottom: 20rpx;
+
+    .goods-img {
+      width: 100%;
+      height: 246rpx;
+      border-radius: 10rpx 10rpx 0px 0px;
+    }
+
+    .goods-content {
+      width: 100%;
+      background: #ffffff;
+      box-shadow: 0px 0px 20rpx 4rpx rgba(199, 199, 199, 0.22);
+      padding: 20rpx 0 32rpx 16rpx;
+      box-sizing: border-box;
+      border-radius: 0 0 10rpx 10rpx;
+
+      .goods-title {
+        font-size: 26rpx;
+        font-weight: bold;
+        color: #333333;
+      }
+
+      .goods-price {
+        font-size: 24rpx;
+        font-family: OPPOSANS;
+        font-weight: 500;
+        color: #e1212b;
+      }
+    }
+
+    &:nth-child(2n + 1) {
+      margin-right: 20rpx;
+    }
+  }
+</style>
diff --git a/src/pages/index/components/second-one.vue b/src/pages/index/components/second-one.vue
new file mode 100644
index 00000000..86b70782
--- /dev/null
+++ b/src/pages/index/components/second-one.vue
@@ -0,0 +1,80 @@
+<!-- 分类展示：second-one 风格  -->
+<template>
+  <view>
+    <!-- 一级分类的名字 -->
+    <view class="title-box ss-flex ss-col-center ss-row-center ss-p-b-30">
+      <view class="title-line-left" />
+      <view class="title-text ss-p-x-20">{{ props.data[activeMenu].name }}</view>
+      <view class="title-line-right" />
+    </view>
+    <!-- 二级分类的名字 -->
+    <view class="goods-item-box ss-flex ss-flex-wrap ss-p-b-20">
+      <view
+        class="goods-item"
+        v-for="item in props.data[activeMenu].children"
+        :key="item.id"
+        @tap="
+          sheep.$router.go('/pages/goods/list', {
+            categoryId: item.id,
+          })
+        "
+      >
+        <image class="goods-img" :src="item.picUrl" mode="aspectFill" />
+        <view class="ss-p-10">
+          <view class="goods-title ss-line-1">{{ item.name }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    activeMenu: [Number, String],
+  });
+</script>
+
+<style lang="scss" scoped>
+  .title-box {
+    .title-line-left,
+    .title-line-right {
+      width: 15px;
+      height: 1px;
+      background: #d2d2d2;
+    }
+  }
+
+  .goods-item {
+    width: calc((100% - 20px) / 3);
+    margin-right: 10px;
+    margin-bottom: 10px;
+
+    &:nth-of-type(3n) {
+      margin-right: 0;
+    }
+
+    .goods-img {
+      width: calc((100vw - 140px) / 3);
+      height: calc((100vw - 140px) / 3);
+    }
+
+    .goods-title {
+      font-size: 26rpx;
+      font-weight: bold;
+      color: #333333;
+      line-height: 40rpx;
+      text-align: center;
+    }
+
+    .goods-price {
+      color: $red;
+      line-height: 40rpx;
+    }
+  }
+</style>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
new file mode 100644
index 00000000..4d01f80c
--- /dev/null
+++ b/src/pages/index/index.vue
@@ -0,0 +1,93 @@
+<!-- 首页，支持店铺装修 -->
+<template>
+  <view v-if="template">
+    <s-layout
+      title="首页"
+      navbar="custom"
+      tabbar="/pages/index/index"
+      :bgStyle="template.page"
+      :navbarStyle="template.navigationBar"
+      onShareAppMessage
+    >
+      <s-block
+        v-for="(item, index) in template.components"
+        :key="index"
+        :styles="item.property.style"
+      >
+        <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
+      </s-block>
+    </s-layout>
+  </view>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import $share from '@/sheep/platform/share';
+  // 隐藏原生tabBar
+  // uni.hideTabBar({
+  //   fail: () => {},
+  // });
+
+  const template = computed(() => sheep.$store('app').template?.home);
+  // 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
+  // (async function() {
+  // console.log('原代码首页定制化数据',template)
+  // let {
+  // 	data
+  // } = await index2Api.decorate();
+  // console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
+  // 改变首页底部数据 但是没有通过数组id获取商品数据接口
+  // let {
+  // 	data: datas
+  // } = await index2Api.spids();
+  // template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
+  // template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
+  // 	return {
+  // 		src: item.picUrl,
+  // 		url: item.url,
+  // 		title: item.name,
+  // 		type: "image"
+  // 	}
+  // })
+  // }())
+
+  onLoad((options) => {
+    // #ifdef MP
+    // 小程序识别二维码
+    if (options.scene) {
+      const sceneParams = decodeURIComponent(options.scene).split('=');
+      console.log('sceneParams=>', sceneParams);
+      options[sceneParams[0]] = sceneParams[1];
+    }
+    // #endif
+
+    // 预览模板
+    if (options.templateId) {
+      sheep.$store('app').init(options.templateId);
+    }
+
+    // 解析分享信息
+    if (options.spm) {
+      $share.decryptSpm(options.spm);
+    }
+
+    // 进入指定页面(完整页面路径)
+    if (options.page) {
+      sheep.$router.go(decodeURIComponent(options.page));
+    }
+  });
+
+  // 下拉刷新
+  onPullDownRefresh(() => {
+    sheep.$store('app').init();
+    setTimeout(function () {
+      uni.stopPullDownRefresh();
+    }, 800);
+  });
+
+  onPageScroll(() => {});
+</script>
+
+<style></style>
diff --git a/src/pages/index/login.vue b/src/pages/index/login.vue
new file mode 100644
index 00000000..e4988702
--- /dev/null
+++ b/src/pages/index/login.vue
@@ -0,0 +1,39 @@
+<!-- 微信公众号的登录回调页 -->
+<template>
+  <!-- 空登陆页 -->
+  <view />
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+
+  onLoad(async (options) => {
+    // #ifdef H5
+    // 将 search 参数赋值到 options 中，方便下面解析
+    new URLSearchParams(location.search).forEach((value, key) => {
+      options[key] = value;
+    });
+    // 执行登录 or 绑定，注意需要 await 绑定
+    const event = options.event;
+    const code = options.code;
+    const state = options.state;
+    if (event === 'login') { // 场景一：登录
+      await sheep.$platform.useProvider().login(code, state);
+    } else if (event === 'bind') { // 场景二：绑定
+      await sheep.$platform.useProvider().bind(code, state);
+    }
+
+    // 检测 H5 登录回调
+    let returnUrl = uni.getStorageSync('returnUrl');
+    if (returnUrl) {
+      uni.removeStorage({key:'returnUrl'});
+      location.replace(returnUrl);
+    } else {
+      uni.switchTab({
+        url: '/',
+      });
+    }
+    // #endif
+  });
+</script>
diff --git a/src/pages/index/page.vue b/src/pages/index/page.vue
new file mode 100644
index 00000000..b5d8ef32
--- /dev/null
+++ b/src/pages/index/page.vue
@@ -0,0 +1,51 @@
+<!-- 自定义页面：支持装修 -->
+<template>
+  <s-layout
+    :title="state.name"
+    navbar="custom"
+    :bgStyle="state.page"
+    :navbarStyle="state.navigationBar"
+    onShareAppMessage
+    showLeftButton
+  >
+    <s-block v-for="(item, index) in state.components" :key="index" :styles="item.property.style">
+      <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
+    </s-block>
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import { onLoad, onPageScroll } from '@dcloudio/uni-app';
+  import DiyApi from '@/sheep/api/promotion/diy';
+
+  const state = reactive({
+    name: '',
+    components: [],
+    navigationBar: {},
+    page: {},
+  });
+  onLoad(async (options) => {
+    let id = options.id
+
+    // #ifdef MP
+    // 小程序预览自定义页面
+    if (options.scene) {
+      const sceneParams = decodeURIComponent(options.scene).split('=');
+      id = sceneParams[1];
+    }
+    // #endif
+
+    const { code, data } = await DiyApi.getDiyPage(id);
+    if (code === 0) {
+      state.name = data.name;
+      state.components = data.property?.components;
+      state.navigationBar = data.property?.navigationBar;
+      state.page = data.property?.page;
+    }
+  });
+
+  onPageScroll(() => {});
+</script>
+
+<style></style>
diff --git a/src/pages/index/search.vue b/src/pages/index/search.vue
new file mode 100644
index 00000000..def16ccf
--- /dev/null
+++ b/src/pages/index/search.vue
@@ -0,0 +1,119 @@
+<!-- 搜索界面 -->
+<template>
+  <s-layout :bgStyle="{ color: '#FFF' }" class="set-wrap" title="搜索">
+    <view class="ss-p-x-24">
+      <view class="ss-flex ss-col-center">
+        <uni-search-bar
+          class="ss-flex-1"
+          radius="33"
+          placeholder="请输入关键字"
+          cancelButton="none"
+          :focus="true"
+          @confirm="onSearch($event.value)"
+        />
+      </view>
+      <view class="ss-flex ss-row-between ss-col-center">
+        <view class="serach-history">搜索历史</view>
+        <button class="clean-history ss-reset-button" @tap="onDelete"> 清除搜索历史 </button>
+      </view>
+      <view class="ss-flex ss-col-center ss-row-left ss-flex-wrap">
+        <button
+          class="history-btn ss-reset-button"
+          @tap="onSearch(item)"
+          v-for="(item, index) in state.historyList"
+          :key="index"
+        >
+          {{ item }}
+        </button>
+      </view>
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+
+  const state = reactive({
+    historyList: [],
+  });
+
+  // 搜索
+  function onSearch(keyword) {
+    if (!keyword) {
+      return;
+    }
+    saveSearchHistory(keyword);
+    // 前往商品列表（带搜索条件）
+    sheep.$router.go('/pages/goods/list', { keyword });
+  }
+
+  // 保存搜索历史
+  function saveSearchHistory(keyword) {
+    // 如果关键词在搜索历史中，则把此关键词先移除
+    if (state.historyList.includes(keyword)) {
+      state.historyList.splice(state.historyList.indexOf(keyword), 1);
+    }
+    // 置顶关键词
+    state.historyList.unshift(keyword);
+
+    // 最多保留 10 条记录
+    if (state.historyList.length >= 10) {
+      state.historyList.length = 10;
+    }
+    uni.setStorageSync('searchHistory', state.historyList);
+  }
+
+  function onDelete() {
+    uni.showModal({
+      title: '提示',
+      content: '确认清除搜索历史吗？',
+      success: function (res) {
+        if (res.confirm) {
+          state.historyTag = [];
+          uni.removeStorageSync('searchHistory');
+        }
+      },
+    });
+  }
+
+  onLoad(() => {
+    state.historyList = uni.getStorageSync('searchHistory') || [];
+  });
+</script>
+
+<style lang="scss" scoped>
+  .serach-title {
+    font-size: 30rpx;
+    font-weight: 500;
+    color: #333333;
+  }
+
+  .uni-searchbar {
+    padding-left: 0;
+  }
+
+  .serach-history {
+    font-weight: bold;
+    color: #333333;
+    font-size: 30rpx;
+  }
+
+  .clean-history {
+    font-weight: 500;
+    color: #999999;
+    font-size: 28rpx;
+  }
+
+  .history-btn {
+    padding: 0 38rpx;
+    height: 60rpx;
+    background: #f5f6f8;
+    border-radius: 30rpx;
+    font-size: 28rpx;
+    color: #333333;
+    max-width: 690rpx;
+    margin: 0 20rpx 20rpx 0;
+  }
+</style>
diff --git a/src/pages/index/user.vue b/src/pages/index/user.vue
new file mode 100644
index 00000000..9e49257a
--- /dev/null
+++ b/src/pages/index/user.vue
@@ -0,0 +1,47 @@
+<!-- 个人中心：支持装修 -->
+<template>
+  <s-layout
+    title="我的"
+    tabbar="/pages/index/user"
+    navbar="custom"
+    :bgStyle="template.page"
+    :navbarStyle="template.navigationBar"
+    onShareAppMessage
+  >
+    <s-block
+      v-for="(item, index) in template.components"
+      :key="index"
+      :styles="item.property.style"
+    >
+      <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
+    </s-block>
+  </s-layout>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import { onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+
+  // 隐藏原生tabBar
+  // uni.hideTabBar({
+  //   fail: () => {},
+  // });
+
+  const template = computed(() => sheep.$store('app').template.user);
+
+  onShow(() => {
+    sheep.$store('user').updateUserData();
+  });
+
+  onPullDownRefresh(() => {
+    sheep.$store('user').updateUserData();
+    setTimeout(function () {
+      uni.stopPullDownRefresh();
+    }, 800);
+  });
+
+  onPageScroll(() => {});
+</script>
+
+<style></style>
diff --git a/src/pages/login/login.vue b/src/pages/login/login.vue
index b150b3c5..04ed5072 100644
--- a/src/pages/login/login.vue
+++ b/src/pages/login/login.vue
@@ -120,7 +120,7 @@
 
     const { code } = await AuthUtil.smsRegister({ mobile: phone.value, code: smsCode.value });
     if (code === 0) {
-      uni.switchTab({ url: '/pages/home/home' });
+      uni.reLaunch({ url: '/pages/home/home' });
     }
   };
 
@@ -130,7 +130,7 @@
 
     const { code } = await AuthUtil.smsLogin({ mobile: phone.value, code: smsCode.value });
     if (code === 0) {
-      uni.switchTab({ url: '/pages/home/home' });
+      uni.reLaunch({ url: '/pages/home/home' });
     }
   };
 
diff --git a/src/pages/order/addressSelection.vue b/src/pages/order/addressSelection.vue
new file mode 100644
index 00000000..4adf2585
--- /dev/null
+++ b/src/pages/order/addressSelection.vue
@@ -0,0 +1,282 @@
+<!-- 下单界面，收货地址 or 自提门店的选择组件 -->
+<template>
+  <view class="allAddress" :style="state.isPickUp ? '' : 'padding-top:10rpx;'">
+    <view class="nav flex flex-wrap">
+      <view
+        class="item font-color"
+        :class="state.deliveryType === 1 ? 'on' : 'on2'"
+        @tap="switchDeliveryType(1)"
+        v-if="state.isPickUp"
+      />
+      <view
+        class="item font-color"
+        :class="state.deliveryType === 2 ? 'on' : 'on2'"
+        @tap="switchDeliveryType(2)"
+        v-if="state.isPickUp"
+      />
+    </view>
+    <!-- 情况一：收货地址的选择 -->
+    <view
+      class="address flex flex-wrap flex-center ss-row-between"
+      @tap="onSelectAddress"
+      v-if="state.deliveryType === 1"
+      :style="state.isPickUp ? '' : 'border-top-left-radius: 14rpx;border-top-right-radius: 14rpx;'"
+    >
+      <view class="addressCon" v-if="state.addressInfo.name">
+        <view class="name"
+          >{{ state.addressInfo.name }}
+          <text class="phone">{{ state.addressInfo.mobile }}</text>
+        </view>
+        <view class="flex flex-wrap">
+          <text class="default font-color" v-if="state.addressInfo.defaultStatus">[默认]</text>
+          <text class="line2">
+            {{ state.addressInfo.areaName }} {{ state.addressInfo.detailAddress }}
+          </text>
+        </view>
+      </view>
+      <view class="addressCon" v-else>
+        <view class="setaddress">设置收货地址</view>
+      </view>
+      <view class="iconfont">
+        <view class="ss-rest-button">
+          <text class="_icon-forward" />
+        </view>
+      </view>
+    </view>
+    <!-- 情况二：门店的选择 -->
+    <view
+      class="address flex flex-wrap flex-center ss-row-between"
+      v-if="state.deliveryType === 2"
+      @tap="onSelectAddress"
+    >
+      <view class="addressCon" v-if="state.pickUpInfo.name">
+        <view class="name"
+          >{{ state.pickUpInfo.name }}
+          <text class="phone">{{ state.pickUpInfo.phone }}</text>
+        </view>
+        <view class="line1">
+          {{ state.pickUpInfo.areaName }}{{ ', ' + state.pickUpInfo.detailAddress }}
+        </view>
+      </view>
+      <view class="addressCon" v-else>
+        <view class="setaddress">选择自提门店</view>
+      </view>
+      <view class="iconfont">
+        <view class="ss-rest-button">
+          <text class="_icon-forward" />
+        </view>
+      </view>
+    </view>
+    <view class="line">
+      <image :src="sheep.$url.static('/static/img/shop/line.png')" />
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import sheep from '@/sheep';
+  import { isEmpty } from 'lodash-es';
+
+  const props = defineProps({
+    modelValue: {
+      type: Object,
+      default() {},
+    },
+  });
+  const emits = defineEmits(['update:modelValue']);
+
+  // computed 解决父子组件双向数据同步
+  const state = computed({
+    get() {
+      return new Proxy(props.modelValue, {
+        set(obj, name, val) {
+          emits('update:modelValue', {
+            ...obj,
+            [name]: val,
+          });
+          return true;
+        },
+      });
+    },
+    set(val) {
+      emits('update:modelValue', val);
+    },
+  });
+
+  // 选择地址
+  function onSelectAddress() {
+    let emitName = 'SELECT_ADDRESS';
+    let addressPage = '/pages/user/address/list?type=select';
+    if (state.value.deliveryType === 2) {
+      emitName = 'SELECT_PICK_UP_INFO';
+      addressPage = '/pages/user/goods_details_store/index';
+    }
+    uni.$once(emitName, (e) => {
+      changeConsignee(e.addressInfo);
+    });
+    sheep.$router.go(addressPage);
+  }
+
+  // 更改收货人地址&计算订单信息
+  async function changeConsignee(addressInfo = {}) {
+    if (!isEmpty(addressInfo)) {
+      if (state.value.deliveryType === 1) {
+        state.value.addressInfo = addressInfo;
+      }
+      if (state.value.deliveryType === 2) {
+        state.value.pickUpInfo = addressInfo;
+      }
+    }
+  }
+
+  // 收货方式切换
+  const switchDeliveryType = (type) => {
+    state.value.deliveryType = type;
+  };
+</script>
+
+<style scoped lang="scss">
+  .allAddress .font-color {
+    color: #e93323 !important;
+  }
+  .line2 {
+    width: 504rpx;
+  }
+  .textR {
+    text-align: right;
+  }
+
+  .line {
+    width: 100%;
+    height: 3rpx;
+  }
+
+  .line image {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .address {
+    padding: 28rpx;
+    background-color: #fff;
+    box-sizing: border-box;
+  }
+
+  .address .addressCon {
+    width: 596rpx;
+    font-size: 26rpx;
+    color: #666;
+  }
+
+  .address .addressCon .name {
+    font-size: 30rpx;
+    color: #282828;
+    font-weight: bold;
+    margin-bottom: 10rpx;
+  }
+
+  .address .addressCon .name .phone {
+    margin-left: 50rpx;
+  }
+
+  .address .addressCon .default {
+    margin-right: 12rpx;
+  }
+
+  .address .addressCon .setaddress {
+    color: #333;
+    font-size: 28rpx;
+  }
+
+  .address .iconfont {
+    font-size: 35rpx;
+    color: #707070;
+  }
+
+  .allAddress {
+    width: 100%;
+    background: linear-gradient(to bottom, #e93323 0%, #f5f5f5 100%);
+    // background-image: linear-gradient(to bottom, #e93323 0%, #f5f5f5 100%);
+    // background-image: -webkit-linear-gradient(to bottom, #e93323 0%, #f5f5f5 100%);
+    // background-image: -moz-linear-gradient(to bottom, #e93323 0%, #f5f5f5 100%);
+    //padding: 100rpx 30rpx 0 30rpx;
+    padding-top: 100rpx;
+    padding-bottom: 10rpx;
+  }
+
+  .allAddress .nav {
+    width: 690rpx;
+    margin: 0 auto;
+  }
+
+  .allAddress .nav .item {
+    width: 334rpx;
+  }
+
+  .allAddress .nav .item.on {
+    position: relative;
+    width: 230rpx;
+  }
+
+  .allAddress .nav .item.on::before {
+    position: absolute;
+    bottom: 0;
+    content: '快递配送';
+    font-size: 28rpx;
+    display: block;
+    height: 0;
+    width: 336rpx;
+    border-width: 0 20rpx 80rpx 0;
+    border-style: none solid solid;
+    border-color: transparent transparent #fff;
+    z-index: 2;
+    border-radius: 14rpx 36rpx 0 0;
+    text-align: center;
+    line-height: 80rpx;
+  }
+
+  .allAddress .nav .item:nth-of-type(2).on::before {
+    content: '到店自提';
+    border-width: 0 0 80rpx 20rpx;
+    border-radius: 36rpx 14rpx 0 0;
+  }
+
+  .allAddress .nav .item.on2 {
+    position: relative;
+  }
+
+  .allAddress .nav .item.on2::before {
+    position: absolute;
+    bottom: 0;
+    content: '到店自提';
+    font-size: 28rpx;
+    display: block;
+    height: 0;
+    width: 401rpx;
+    border-width: 0 0 60rpx 60rpx;
+    border-style: none solid solid;
+    border-color: transparent transparent #f7c1bd;
+    border-radius: 36rpx 14rpx 0 0;
+    text-align: center;
+    line-height: 60rpx;
+  }
+
+  .allAddress .nav .item:nth-of-type(1).on2::before {
+    content: '快递配送';
+    border-width: 0 60rpx 60rpx 0;
+    border-radius: 14rpx 36rpx 0 0;
+  }
+
+  .allAddress .address {
+    width: 690rpx;
+    max-height: 180rpx;
+    margin: 0 auto;
+  }
+
+  .allAddress .line {
+    width: 100%;
+    margin: 0 auto;
+  }
+</style>
diff --git a/src/pages/order/aftersale/apply.vue b/src/pages/order/aftersale/apply.vue
new file mode 100644
index 00000000..635b7ddb
--- /dev/null
+++ b/src/pages/order/aftersale/apply.vue
@@ -0,0 +1,349 @@
+<!-- 售后申请 -->
+<template>
+  <s-layout title="申请售后">
+    <!-- 售后商品 -->
+    <view class="goods-box">
+      <s-goods-item
+        :img="state.item.picUrl"
+        :title="state.item.spuName"
+        :skuText="state.item.properties?.map((property) => property.valueName).join(' ')"
+        :price="state.item.price"
+        :num="state.item.count"
+      />
+    </view>
+
+    <uni-forms ref="form" v-model="formData" :rules="rules" label-position="top">
+      <!-- 售后类型 -->
+      <view class="refund-item">
+        <view class="item-title ss-m-b-20">售后类型</view>
+        <view class="ss-flex-col">
+          <radio-group @change="onRefundChange">
+            <label
+              class="ss-flex ss-col-center ss-p-y-10"
+              v-for="(item, index) in state.wayList"
+              :key="index"
+            >
+              <radio
+                :checked="formData.type === item.value"
+                color="var(--ui-BG-Main)"
+                style="transform: scale(0.8)"
+                :value="item.value"
+              />
+              <view class="item-value ss-m-l-8">{{ item.text }}</view>
+            </label>
+          </radio-group>
+        </view>
+      </view>
+      <!-- 退款金额 -->
+      <view class="refund-item ss-flex ss-col-center ss-row-between" @tap="state.showModal = true">
+        <text class="item-title">退款金额</text>
+        <view class="ss-flex refund-cause ss-col-center">
+          <text class="ss-m-r-20">￥{{ fen2yuan(state.item.payPrice) }}</text>
+        </view>
+      </view>
+      <!-- 申请原因 -->
+      <view class="refund-item ss-flex ss-col-center ss-row-between" @tap="state.showModal = true">
+        <text class="item-title">申请原因</text>
+        <view class="ss-flex refund-cause ss-col-center">
+          <text class="ss-m-r-20" v-if="formData.applyReason">{{ formData.applyReason }}</text>
+          <text class="ss-m-r-20" v-else>请选择申请原因~</text>
+          <text class="cicon-forward" style="height: 28rpx"></text>
+        </view>
+      </view>
+
+      <!-- 留言 -->
+      <view class="refund-item">
+        <view class="item-title ss-m-b-20">相关描述</view>
+        <view class="describe-box">
+          <uni-easyinput
+            :inputBorder="false"
+            class="describe-content"
+            type="textarea"
+            maxlength="120"
+            autoHeight
+            v-model="formData.applyDescription"
+            placeholder="客官~请描述您遇到的问题，建议上传照片"
+          />
+          <view class="upload-img">
+            <s-uploader
+              v-model:url="formData.applyPicUrls"
+              fileMediatype="image"
+              limit="9"
+              mode="grid"
+              :imageStyles="{ width: '168rpx', height: '168rpx' }"
+            />
+          </view>
+        </view>
+      </view>
+    </uni-forms>
+
+    <!-- 底部按钮 -->
+    <su-fixed bottom placeholder>
+      <view class="foot-wrap">
+        <view class="foot_box ss-flex ss-col-center ss-row-between ss-p-x-30">
+          <button class="ss-reset-button contcat-btn" @tap="sheep.$router.go('/pages/chat/index')">
+            联系客服
+          </button>
+          <button class="ss-reset-button ui-BG-Main-Gradient sub-btn" @tap="submit">提交</button>
+        </view>
+      </view>
+    </su-fixed>
+
+    <!-- 申请原因弹窗 -->
+    <su-popup :show="state.showModal" round="10" :showClose="true" @close="state.showModal = false">
+      <view class="modal-box page_box">
+        <view class="modal-head item-title head_box ss-flex ss-row-center ss-col-center">
+          申请原因
+        </view>
+        <view class="modal-content content_box">
+          <radio-group @change="onChange">
+            <label class="radio ss-flex ss-col-center" v-for="item in state.reasonList" :key="item">
+              <view class="ss-flex-1 ss-p-20">{{ item }}</view>
+              <radio
+                :value="item"
+                color="var(--ui-BG-Main)"
+                :checked="item === state.currentValue"
+              />
+            </label>
+          </radio-group>
+        </view>
+        <view class="modal-foot foot_box ss-flex ss-row-center ss-col-center">
+          <button class="ss-reset-button close-btn ui-BG-Main-Gradient" @tap="onReason">
+            确定
+          </button>
+        </view>
+      </view>
+    </su-popup>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { reactive, ref } from 'vue';
+  import OrderApi from '@/sheep/api/trade/order';
+  import TradeConfigApi from '@/sheep/api/trade/config';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import AfterSaleApi from '@/sheep/api/trade/afterSale';
+
+  const form = ref(null);
+  const state = reactive({
+    orderId: 0, // 订单编号
+    itemId: 0, // 订单项编号
+    order: {}, // 订单
+    item: {}, // 订单项
+    config: {}, // 交易配置
+
+    // 售后类型
+    wayList: [
+      {
+        text: '仅退款',
+        value: '10',
+      },
+      {
+        text: '退款退货',
+        value: '20',
+      },
+    ],
+    reasonList: [], // 可选的申请原因数组
+    showModal: false, // 是否显示申请原因弹窗
+    currentValue: '', // 当前选择的售后原因
+  });
+  let formData = reactive({
+    way: '',
+    applyReason: '',
+    applyDescription: '',
+    applyPicUrls: [],
+  });
+  const rules = reactive({});
+
+  // 提交表单
+  async function submit() {
+    let data = {
+      orderItemId: state.itemId,
+      refundPrice: state.item.payPrice,
+      ...formData,
+    };
+    const { code } = await AfterSaleApi.createAfterSale(data);
+    if (code === 0) {
+      uni.showToast({
+        title: '申请成功',
+      });
+      sheep.$router.redirect('/pages/order/aftersale/list');
+    }
+  }
+
+  // 选择售后类型
+  function onRefundChange(e) {
+    formData.way = e.detail.value;
+    // 清理理由
+    state.reasonList =
+      formData.way === '10'
+        ? state.config.afterSaleRefundReasons || []
+        : state.config.afterSaleReturnReasons || [];
+    formData.applyReason = '';
+    state.currentValue = '';
+  }
+
+  // 选择申请原因
+  function onChange(e) {
+    state.currentValue = e.detail.value;
+  }
+
+  // 确定
+  function onReason() {
+    formData.applyReason = state.currentValue;
+    state.showModal = false;
+  }
+
+  onLoad(async (options) => {
+    // 解析参数
+    if (!options.orderId || !options.itemId) {
+      sheep.$helper.toast(`缺少订单信息，请检查`);
+      return;
+    }
+    state.orderId = options.orderId;
+    state.itemId = parseInt(options.itemId);
+
+    // 读取订单信息
+    const { code, data } = await OrderApi.getOrderDetail(state.orderId);
+    if (code !== 0) {
+      return;
+    }
+    state.order = data;
+    state.item = data.items.find((item) => item.id === state.itemId) || {};
+
+    // 设置选项
+    if (state.order.status === 10) {
+      state.wayList.splice(1, 1);
+    }
+
+    // 读取配置
+    state.config = (await TradeConfigApi.getTradeConfig()).data;
+  });
+</script>
+
+<style lang="scss" scoped>
+  .item-title {
+    font-size: 30rpx;
+    font-weight: bold;
+    color: rgba(51, 51, 51, 1);
+    // margin-bottom: 20rpx;
+  }
+
+  // 售后项目
+  .refund-item {
+    background-color: #fff;
+    border-bottom: 1rpx solid #f5f5f5;
+    padding: 30rpx;
+
+    &:last-child {
+      border: none;
+    }
+
+    // 留言
+    .describe-box {
+      width: 690rpx;
+      background: rgba(249, 250, 251, 1);
+      padding: 30rpx;
+      box-sizing: border-box;
+      border-radius: 20rpx;
+
+      .describe-content {
+        height: 200rpx;
+        font-size: 24rpx;
+        font-weight: 400;
+        color: #333;
+      }
+    }
+
+    // 联系方式
+    .input-box {
+      height: 84rpx;
+      background: rgba(249, 250, 251, 1);
+      border-radius: 20rpx;
+    }
+  }
+
+  .goods-box {
+    background: #fff;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+  }
+
+  .foot-wrap {
+    height: 100rpx;
+    width: 100%;
+  }
+
+  .foot_box {
+    height: 100rpx;
+    background-color: #fff;
+
+    .sub-btn {
+      width: 336rpx;
+      line-height: 74rpx;
+      border-radius: 38rpx;
+      color: rgba(#fff, 0.9);
+      font-size: 28rpx;
+    }
+
+    .contcat-btn {
+      width: 336rpx;
+      line-height: 74rpx;
+      background: rgba(238, 238, 238, 1);
+      border-radius: 38rpx;
+      font-size: 28rpx;
+      font-weight: 400;
+      color: rgba(51, 51, 51, 1);
+    }
+  }
+
+  .modal-box {
+    width: 750rpx;
+    // height: 680rpx;
+    border-radius: 30rpx 30rpx 0 0;
+    background: #fff;
+
+    .modal-head {
+      height: 100rpx;
+      font-size: 30rpx;
+    }
+
+    .modal-content {
+      font-size: 28rpx;
+    }
+
+    .modal-foot {
+      .close-btn {
+        width: 710rpx;
+        line-height: 80rpx;
+        border-radius: 40rpx;
+        color: rgba(#fff, 0.9);
+      }
+    }
+  }
+
+  .success-box {
+    width: 600rpx;
+    padding: 90rpx 0 64rpx 0;
+
+    .cicon-check-round {
+      font-size: 96rpx;
+      color: #04b750;
+    }
+
+    .success-title {
+      font-weight: 500;
+      color: #333333;
+      font-size: 32rpx;
+    }
+
+    .success-btn {
+      width: 492rpx;
+      height: 70rpx;
+      background: linear-gradient(90deg, var(--ui-BG-Main-gradient), var(--ui-BG-Main));
+      border-radius: 35rpx;
+    }
+  }
+</style>
diff --git a/src/pages/order/aftersale/detail.vue b/src/pages/order/aftersale/detail.vue
new file mode 100644
index 00000000..6b7bfcce
--- /dev/null
+++ b/src/pages/order/aftersale/detail.vue
@@ -0,0 +1,379 @@
+<!-- 售后详情 -->
+<template>
+  <s-layout title="售后详情" :navbar="!isEmpty(state.info) && state.loading ? 'inner' : 'normal'">
+    <view class="content_box" v-if="!isEmpty(state.info) && state.loading">
+      <!-- 步骤条 -->
+      <view
+        class="steps-box ss-flex"
+        :style="[
+          {
+            marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+            paddingTop: Number(statusBarHeight + 88) + 'rpx',
+          },
+        ]"
+      >
+        <view class="ss-flex">
+          <view class="steps-item" v-for="(item, index) in state.list" :key="index">
+            <view class="ss-flex">
+              <text
+                class="sicon-circleclose"
+                v-if="state.list.length - 1 === index && [61, 62, 63].includes(state.info.status)"
+              />
+              <text
+                class="sicon-circlecheck"
+                v-else
+                :class="state.active >= index ? 'activity-color' : 'info-color'"
+              />
+
+              <view
+                v-if="state.list.length - 1 !== index"
+                class="line"
+                :class="state.active >= index ? 'activity-bg' : 'info-bg'"
+              />
+            </view>
+            <view
+              class="steps-item-title"
+              :class="state.active >= index ? 'activity-color' : 'info-color'"
+            >
+              {{ item.title }}
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 服务状态 -->
+      <view
+        class="status-box ss-flex ss-col-center ss-row-between ss-m-x-20"
+        @tap="sheep.$router.go('/pages/order/aftersale/log', { id: state.id })"
+      >
+        <view class="">
+          <view class="status-text">
+            {{ formatAfterSaleStatusDescription(state.info) }}
+          </view>
+          <view class="status-time">
+            {{ sheep.$helper.timeFormat(state.info.updateTime, 'yyyy-mm-dd hh:MM:ss') }}
+          </view>
+        </view>
+        <text class="ss-iconfont _icon-forward" style="color: #666" />
+      </view>
+
+      <!-- 退款金额 -->
+      <view class="aftersale-money ss-flex ss-col-center ss-row-between">
+        <view class="aftersale-money--title">退款总额</view>
+        <view class="aftersale-money--num">￥{{ fen2yuan(state.info.refundPrice) }}</view>
+      </view>
+      <!-- 服务商品 -->
+      <view class="order-shop">
+        <s-goods-item
+          :img="state.info.picUrl"
+          :title="state.info.spuName"
+          :titleWidth="480"
+          :skuText="state.info.properties.map((property) => property.valueName).join(' ')"
+          :num="state.info.count"
+        />
+      </view>
+
+      <!-- 服务内容 -->
+      <view class="aftersale-content">
+        <view class="aftersale-item ss-flex ss-col-center">
+          <view class="item-title">服务单号：</view>
+          <view class="item-content ss-m-r-16">{{ state.info.no }}</view>
+          <button class="ss-reset-button copy-btn" @tap="onCopy">复制</button>
+        </view>
+        <view class="aftersale-item ss-flex ss-col-center">
+          <view class="item-title">申请时间：</view>
+          <view class="item-content">
+            {{ sheep.$helper.timeFormat(state.info.createTime, 'yyyy-mm-dd hh:MM:ss') }}
+          </view>
+        </view>
+        <view class="aftersale-item ss-flex ss-col-center">
+          <view class="item-title">售后类型：</view>
+          <view class="item-content">{{ state.info.way === 10 ? '仅退款' : '退款退货' }}</view>
+        </view>
+        <view class="aftersale-item ss-flex ss-col-center">
+          <view class="item-title">申请原因：</view>
+          <view class="item-content">{{ state.info.applyReason }}</view>
+        </view>
+        <view class="aftersale-item ss-flex ss-col-center">
+          <view class="item-title">相关描述：</view>
+          <view class="item-content">{{ state.info.applyDescription }}</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 操作区 -->
+    <s-empty
+      v-if="isEmpty(state.info) && state.loading"
+      icon="/static/order-empty.png"
+      text="暂无该订单售后详情"
+    />
+    <su-fixed bottom placeholder bg="bg-white" v-if="!isEmpty(state.info)">
+      <view class="foot_box">
+        <button
+          class="ss-reset-button btn"
+          v-if="state.info.buttons?.includes('cancel')"
+          @tap="onApply(state.info.id)"
+        >
+          取消申请
+        </button>
+        <button
+          class="ss-reset-button btn"
+          v-if="state.info.buttons?.includes('delivery')"
+          @tap="sheep.$router.go('/pages/order/aftersale/return-delivery', { id: state.info.id })"
+        >
+          填写退货
+        </button>
+        <button
+          class="ss-reset-button contcat-btn btn"
+          @tap="sheep.$router.go('/pages/chat/index')"
+        >
+          联系客服
+        </button>
+      </view>
+    </su-fixed>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import { isEmpty } from 'lodash-es';
+  import {
+    fen2yuan,
+    formatAfterSaleStatusDescription,
+    handleAfterSaleButtons,
+  } from '@/sheep/hooks/useGoods';
+  import AfterSaleApi from '@/sheep/api/trade/afterSale';
+
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
+  const state = reactive({
+    id: 0, // 售后编号
+    info: {}, // 收货信息
+    loading: false,
+    active: 0, // 在 list 的激活位置
+    list: [
+      {
+        title: '提交申请',
+      },
+      {
+        title: '处理中',
+      },
+      {
+        title: '完成',
+      },
+    ], // 时间轴
+  });
+
+  function onApply(id) {
+    uni.showModal({
+      title: '提示',
+      content: '确定要取消此申请吗？',
+      success: async function (res) {
+        if (!res.confirm) {
+          return;
+        }
+        const { code } = await AfterSaleApi.cancelAfterSale(id);
+        if (code === 0) {
+          await getDetail(id);
+        }
+      },
+    });
+  }
+
+  // 复制
+  const onCopy = () => {
+    sheep.$helper.copyText(state.info.no);
+  };
+
+  async function getDetail(id) {
+    state.loading = true;
+    const { code, data } = await AfterSaleApi.getAfterSale(id);
+    if (code !== 0) {
+      state.info = null;
+      return;
+    }
+    state.info = data;
+    handleAfterSaleButtons(state.info);
+
+    // 处理时间轴
+    if ([10].includes(state.info.status)) {
+      state.active = 0;
+    } else if ([20, 30].includes(state.info.status)) {
+      state.active = 1;
+    } else if ([40, 50].includes(state.info.status)) {
+      state.active = 2;
+    } else if ([61, 62, 63].includes(state.info.status)) {
+      state.active = 2;
+    }
+  }
+
+  onLoad((options) => {
+    if (!options.id) {
+      sheep.$helper.toast(`缺少订单信息，请检查`);
+      return;
+    }
+    state.id = options.id;
+    getDetail(options.id);
+  });
+</script>
+
+<style lang="scss" scoped>
+  // 步骤条
+  .steps-box {
+    width: 100%;
+    height: 190rpx;
+    background: v-bind(headerBg) no-repeat,
+      linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    background-size: 750rpx 100%;
+    padding-left: 72rpx;
+
+    .steps-item {
+      .sicon-circleclose {
+        font-size: 24rpx;
+        color: #fff;
+      }
+
+      .sicon-circlecheck {
+        font-size: 24rpx;
+      }
+
+      .steps-item-title {
+        font-size: 24rpx;
+        font-weight: 400;
+        margin-top: 16rpx;
+        margin-left: -36rpx;
+        width: 100rpx;
+        text-align: center;
+      }
+    }
+  }
+
+  .activity-color {
+    color: #fff;
+  }
+
+  .info-color {
+    color: rgba(#fff, 0.4);
+  }
+
+  .activity-bg {
+    background: #fff;
+  }
+
+  .info-bg {
+    background: rgba(#fff, 0.4);
+  }
+
+  .line {
+    width: 270rpx;
+    height: 4rpx;
+  }
+
+  // 服务状态
+  .status-box {
+    position: relative;
+    z-index: 3;
+    background-color: #fff;
+    border-radius: 20rpx 20rpx 0px 0px;
+    padding: 20rpx;
+    margin-top: -20rpx;
+
+    .status-text {
+      font-size: 28rpx;
+
+      font-weight: 500;
+      color: rgba(51, 51, 51, 1);
+      margin-bottom: 20rpx;
+    }
+
+    .status-time {
+      font-size: 24rpx;
+
+      font-weight: 400;
+      color: rgba(153, 153, 153, 1);
+    }
+  }
+
+  // 退款金额
+  .aftersale-money {
+    background-color: #fff;
+    height: 98rpx;
+    padding: 0 20rpx;
+    margin: 20rpx;
+
+    .aftersale-money--title {
+      font-size: 28rpx;
+
+      font-weight: 500;
+      color: rgba(51, 51, 51, 1);
+    }
+
+    .aftersale-money--num {
+      font-size: 28rpx;
+      font-family: OPPOSANS;
+      font-weight: 500;
+      color: #ff3000;
+    }
+  }
+
+  // order-shop
+  .order-shop {
+    padding: 20rpx;
+    background-color: #fff;
+    margin: 0 20rpx 20rpx 20rpx;
+  }
+
+  // 服务内容
+  .aftersale-content {
+    background-color: #fff;
+    padding: 20rpx;
+    margin: 0 20rpx;
+
+    .aftersale-item {
+      height: 60rpx;
+
+      .copy-btn {
+        background: #eeeeee;
+        color: #333;
+        border-radius: 20rpx;
+        width: 75rpx;
+        height: 40rpx;
+        font-size: 22rpx;
+      }
+
+      .item-title {
+        color: #999;
+        font-size: 28rpx;
+      }
+
+      .item-content {
+        color: #333;
+        font-size: 28rpx;
+      }
+    }
+  }
+
+  // 底部功能
+  .foot_box {
+    height: 100rpx;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    .btn {
+      width: 160rpx;
+      line-height: 60rpx;
+      background: rgba(238, 238, 238, 1);
+      border-radius: 30rpx;
+      padding: 0;
+      margin-right: 20rpx;
+      font-size: 26rpx;
+
+      font-weight: 400;
+      color: rgba(51, 51, 51, 1);
+    }
+  }
+</style>
diff --git a/src/pages/order/aftersale/list.vue b/src/pages/order/aftersale/list.vue
new file mode 100644
index 00000000..e1a0ac5b
--- /dev/null
+++ b/src/pages/order/aftersale/list.vue
@@ -0,0 +1,209 @@
+<!-- 售后列表 -->
+<template>
+  <s-layout title="售后列表">
+    <!-- tab -->
+    <su-sticky bgColor="#fff">
+      <su-tabs
+        :list="tabMaps"
+        :scrollable="false"
+        @change="onTabsChange"
+        :current="state.currentTab"
+      />
+    </su-sticky>
+    <s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无数据" />
+    <!-- 列表 -->
+    <view v-if="state.pagination.total > 0">
+      <view
+        class="list-box ss-m-y-20"
+        v-for="order in state.pagination.list"
+        :key="order.id"
+        @tap="sheep.$router.go('/pages/order/aftersale/detail', { id: order.id })"
+      >
+        <view class="order-head ss-flex ss-col-center ss-row-between">
+          <text class="no">服务单号：{{ order.no }}</text>
+          <text class="state">{{ formatAfterSaleStatus(order) }}</text>
+        </view>
+        <s-goods-item
+          :img="order.picUrl"
+          :title="order.spuName"
+          :skuText="order.properties.map((property) => property.valueName).join(' ')"
+          :price="order.refundPrice"
+        />
+        <view class="apply-box ss-flex ss-col-center ss-row-between border-bottom ss-p-x-20">
+          <view class="ss-flex ss-col-center">
+            <view class="title ss-m-r-20">{{ order.way === 10 ? '仅退款' : '退款退货' }}</view>
+            <view class="value">{{ formatAfterSaleStatusDescription(order) }}</view>
+          </view>
+          <text class="_icon-forward"></text>
+        </view>
+        <view class="tool-btn-box ss-flex ss-col-center ss-row-right ss-p-r-20">
+          <view>
+            <button
+              class="ss-reset-button tool-btn"
+              @tap.stop="onApply(order.id)"
+              v-if="order?.buttons.includes('cancel')"
+            >
+              取消申请
+            </button>
+          </view>
+        </view>
+      </view>
+    </view>
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import _ from 'lodash-es';
+  import {
+    formatAfterSaleStatus,
+    formatAfterSaleStatusDescription,
+    handleAfterSaleButtons,
+  } from '@/sheep/hooks/useGoods';
+  import AfterSaleApi from '@/sheep/api/trade/afterSale';
+  import { resetPagination } from '@/sheep/helper/utils';
+
+  const state = reactive({
+    currentTab: 0,
+    showApply: false,
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 10,
+    },
+    loadStatus: '',
+  });
+
+  const tabMaps = [
+    {
+      name: '全部',
+      value: [],
+    },
+    {
+      name: '申请中',
+      value: [10],
+    },
+    {
+      name: '处理中',
+      value: [20, 30, 40],
+    },
+    {
+      name: '已完成',
+      value: [50],
+    },
+    {
+      name: '已拒绝',
+      value: [61, 62, 63],
+    },
+  ];
+
+  // 切换选项卡
+  function onTabsChange(e) {
+    resetPagination(state.pagination);
+    state.currentTab = e.index;
+    getOrderList();
+  }
+
+  // 获取售后列表
+  async function getOrderList() {
+    state.loadStatus = 'loading';
+    let { data, code } = await AfterSaleApi.getAfterSalePage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      statuses: tabMaps[state.currentTab].value.join(','),
+    });
+    if (code !== 0) {
+      return;
+    }
+    data.list.forEach((order) => handleAfterSaleButtons(order));
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  function onApply(orderId) {
+    uni.showModal({
+      title: '提示',
+      content: '确定要取消此申请吗？',
+      success: async function (res) {
+        if (!res.confirm) {
+          return;
+        }
+        const { code } = await AfterSaleApi.cancelAfterSale(orderId);
+        if (code === 0) {
+          resetPagination(state.pagination);
+          await getOrderList();
+        }
+      },
+    });
+  }
+
+  onLoad(async (options) => {
+    if (options.type) {
+      state.currentTab = options.type;
+    }
+    await getOrderList();
+  });
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getOrderList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .list-box {
+    background-color: #fff;
+
+    .order-head {
+      padding: 0 25rpx;
+      height: 77rpx;
+    }
+
+    .apply-box {
+      height: 82rpx;
+
+      .title {
+        font-size: 24rpx;
+      }
+
+      .value {
+        font-size: 22rpx;
+        color: $dark-6;
+      }
+    }
+
+    .tool-btn-box {
+      height: 100rpx;
+
+      .tool-btn {
+        width: 160rpx;
+        height: 60rpx;
+        background: #f6f6f6;
+        border-radius: 30rpx;
+        font-size: 26rpx;
+        font-weight: 400;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/order/aftersale/log-item.vue b/src/pages/order/aftersale/log-item.vue
new file mode 100644
index 00000000..2a5d20d8
--- /dev/null
+++ b/src/pages/order/aftersale/log-item.vue
@@ -0,0 +1,83 @@
+<!-- 售后日志的每一项展示 -->
+<template>
+  <view class="log-item ss-flex">
+    <view class="log-icon ss-flex-col ss-col-center ss-m-r-20">
+      <text class="cicon-title" :class="index === 0 ? 'activity-color' : ''" />
+      <view v-if="data.length - 1 !== index" class="line" />
+    </view>
+    <view>
+      <view class="text">{{ item.content }}</view>
+      <view class="date">
+        {{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
+      </view>
+    </view>
+  </view>
+</template>
+<script setup>
+  import sheep from '@/sheep';
+
+  const props = defineProps({
+    item: {
+      type: Object, // 当前日志
+      default() {},
+    },
+    index: {
+      type: Number, // item 在 data 的下标
+      default: 0,
+    },
+    data: {
+      type: Object, // 日志列表
+      default() {},
+    },
+  });
+</script>
+<style lang="scss" scoped>
+  .log-item {
+    align-items: stretch;
+  }
+  .log-icon {
+    height: inherit;
+    .cicon-title {
+      font-size: 30rpx;
+      color: #dfdfdf;
+    }
+    .activity-color {
+      color: #60bd45;
+    }
+    .line {
+      width: 1px;
+      height: 100%;
+      background: #dfdfdf;
+    }
+  }
+  .text {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #333333;
+  }
+  .richtext {
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #999999;
+    margin: 20rpx 0 0 0;
+  }
+  .content-img {
+    margin-top: 20rpx;
+    width: 200rpx;
+    height: 200rpx;
+  }
+  .date {
+    margin-top: 20rpx;
+    font-size: 24rpx;
+    font-family: OPPOSANS;
+    font-weight: 400;
+    color: #999999;
+    margin-bottom: 40rpx;
+  }
+
+  :deep() {
+    image {
+      display: block;
+    }
+  }
+</style>
diff --git a/src/pages/order/aftersale/log.vue b/src/pages/order/aftersale/log.vue
new file mode 100644
index 00000000..a8df8a23
--- /dev/null
+++ b/src/pages/order/aftersale/log.vue
@@ -0,0 +1,38 @@
+<!-- 售后日志列表  -->
+<template>
+  <s-layout title="售后进度">
+    <view class="log-box">
+      <view v-for="(item, index) in state.list" :key="item.id">
+        <log-item :item="item" :index="index" :data="state.list" />
+      </view>
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import { onLoad } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import logItem from './log-item.vue';
+  import AfterSaleApi from '@/sheep/api/trade/afterSale';
+
+  const state = reactive({
+    list: [],
+  });
+
+  async function getDetail(id) {
+    const { data } = await AfterSaleApi.getAfterSaleLogList(id);
+    state.list = data;
+  }
+
+  onLoad((options) => {
+    state.aftersaleId = options.id;
+    getDetail(options.id);
+  });
+</script>
+
+<style lang="scss" scoped>
+  .log-box {
+    padding: 24rpx 24rpx 24rpx 40rpx;
+    background-color: #fff;
+  }
+</style>
diff --git a/src/pages/order/aftersale/return-delivery.vue b/src/pages/order/aftersale/return-delivery.vue
new file mode 100644
index 00000000..fa3ecec0
--- /dev/null
+++ b/src/pages/order/aftersale/return-delivery.vue
@@ -0,0 +1,195 @@
+<template>
+	<s-layout title="退货物流">
+		<view>
+			<form @submit="subRefund" report-submit='true'>
+				<view class='apply-return'>
+					<view class='list borRadius14'>
+						<view class='item acea-row row-between-wrapper' style="display: flex;align-items: center;">
+							<view>物流公司</view>
+							<view v-if="state.expresses.length>0" style="flex:1">
+								<picker mode='selector' class='num' @change="bindPickerChange" :value="state.expressIndex"
+									:range="state.expresses" range-key="name">
+									<view class="picker acea-row row-between-wrapper" style="display: flex;justify-content: space-between;">
+										<view class='reason'>{{ state.expresses[state.expressIndex].name }}</view>
+										<text class='iconfont _icon-forward' />
+									</view>
+								</picker>
+							</view>
+						</view>
+						<view class='item textarea acea-row row-between' style="display: flex;align-items: center;">
+							<view>物流单号</view>
+							<input placeholder='请填写物流单号' class='num' name="logisticsNo"
+                     placeholder-class='placeholder' />
+						</view>
+						<button class='returnBnt bg-color ss-reset-button ui-BG-Main-Gradient sub-btn'
+							form-type="submit"
+							style="background: linear-gradient(90deg,var(--ui-BG-Main),var(--ui-BG-Main-gradient))!important">提交</button>
+					</view>
+				</view>
+			</form>
+		</view>
+	</s-layout>
+</template>
+
+<script setup>
+	import { onLoad } from '@dcloudio/uni-app';
+	import { reactive } from 'vue';
+  import sheep from '@/sheep';
+  import AfterSaleApi from '@/sheep/api/trade/afterSale';
+  import DeliveryApi from '@/sheep/api/trade/delivery';
+
+  const state = reactive({
+    id: 0, // 售后编号
+		expressIndex: 0, // 选中的 expresses 下标
+		expresses: [], // 可选的快递列表
+	})
+
+	function bindPickerChange(e) {
+		state.expressIndex = e.detail.value;
+	}
+
+	async function subRefund(e) {
+    let data = {
+      id: state.id,
+      logisticsId: state.expresses[state.expressIndex].id,
+      logisticsNo: e.detail.value.logisticsNo,
+    };
+    const { code } = await AfterSaleApi.deliveryAfterSale(data);
+    if (code !== 0) {
+      return;
+    }
+    uni.showToast({
+      title: '填写退货成功',
+    });
+    sheep.$router.go('/pages/order/aftersale/detail', { id: state.id });
+	}
+
+  // 获得快递物流列表
+	async function getExpressList() {
+    const { code, data } = await DeliveryApi.getDeliveryExpressList();
+    if (code !== 0) {
+      return;
+    }
+    state.expresses = data;
+	}
+
+	onLoad(options => {
+    if (!options.id) {
+      sheep.$helper.toast(`缺少订单信息，请检查`);
+      return
+    }
+    state.id = options.id;
+    // 获得快递物流列表
+    getExpressList();
+	})
+</script>
+<style lang="scss" scoped>
+	.apply-return {
+		padding: 20rpx 30rpx 70rpx 30rpx;
+	}
+
+	.apply-return .list {
+		background-color: #fff;
+		margin-top: 18rpx;
+		padding: 0 24rpx 70rpx 24rpx;
+	}
+
+	.apply-return .list .item {
+		min-height: 90rpx;
+		border-bottom: 1rpx solid #eee;
+		font-size: 30rpx;
+		color: #333;
+	}
+
+	.apply-return .list .item .num {
+		color: #282828;
+		margin-left: 27rpx;
+		// width: 227rpx;
+		// text-align: right;
+	}
+
+	.apply-return .list .item .num .picker .reason {
+		width: 385rpx;
+	}
+
+	.apply-return .list .item .num .picker .iconfont {
+		color: #666;
+		font-size: 30rpx;
+		margin-top: 2rpx;
+	}
+
+	.apply-return .list .item.textarea {
+		padding: 24rpx 0;
+	}
+
+	.apply-return .list .item textarea {
+		height: 100rpx;
+		font-size: 30rpx;
+	}
+
+	.apply-return .list .item .placeholder {
+		color: #bbb;
+	}
+
+	.apply-return .list .item .title {
+		height: 95rpx;
+		width: 100%;
+	}
+
+	.apply-return .list .item .title .tip {
+		font-size: 30rpx;
+		color: #bbb;
+	}
+
+	.apply-return .list .item .upload {
+		padding-bottom: 36rpx;
+	}
+
+	.apply-return .list .item .upload .pictrue {
+		border-radius: 14rpx;
+		margin: 22rpx 23rpx 0 0;
+		width: 156rpx;
+		height: 156rpx;
+		position: relative;
+		font-size: 24rpx;
+		color: #bbb;
+	}
+
+	.apply-return .list .item .upload .pictrue:nth-of-type(4n) {
+		margin-right: 0;
+	}
+
+	.apply-return .list .item .upload .pictrue image {
+		width: 100%;
+		height: 100%;
+		border-radius: 14rpx;
+	}
+
+	.apply-return .list .item .upload .pictrue .icon-guanbi1 {
+		position: absolute;
+		font-size: 45rpx;
+		top: -10rpx;
+		right: -10rpx;
+	}
+
+	.apply-return .list .item .upload .pictrue .icon-icon25201 {
+		color: #bfbfbf;
+		font-size: 50rpx;
+	}
+
+	.apply-return .list .item .upload .pictrue:nth-last-child(1) {
+		border: 1rpx solid #ddd;
+		box-sizing: border-box;
+	}
+
+	.apply-return .returnBnt {
+		font-size: 32rpx;
+		color: #fff;
+		width: 100%;
+		height: 86rpx;
+		border-radius: 50rpx;
+		text-align: center;
+		line-height: 86rpx;
+		margin: 43rpx auto;
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages/order/confirm.vue b/src/pages/order/confirm.vue
new file mode 100644
index 00000000..59abcce1
--- /dev/null
+++ b/src/pages/order/confirm.vue
@@ -0,0 +1,529 @@
+<template>
+  <s-layout title="确认订单">
+    <!-- 头部地址选择【配送地址】【自提地址】 -->
+    <AddressSelection v-model="addressState" />
+
+    <!-- 商品信息 -->
+    <view class="order-card-box ss-m-b-14">
+      <s-goods-item
+        v-for="item in state.orderInfo.items"
+        :key="item.skuId"
+        :img="item.picUrl"
+        :title="item.spuName"
+        :skuText="item.properties.map((property) => property.valueName).join(' ')"
+        :price="item.price"
+        :num="item.count"
+        marginBottom="10"
+      />
+      <view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white ss-r-10">
+        <view class="item-title">订单备注</view>
+        <view class="ss-flex ss-col-center">
+          <uni-easyinput
+            maxlength="20"
+            placeholder="建议留言前先与商家沟通"
+            v-model="state.orderPayload.remark"
+            :inputBorder="false"
+            :clearable="false"
+          />
+        </view>
+      </view>
+    </view>
+
+    <!-- 价格信息 -->
+    <view class="bg-white total-card-box ss-p-20 ss-m-b-14 ss-r-10">
+      <view class="total-box-content border-bottom">
+        <view class="order-item ss-flex ss-col-center ss-row-between">
+          <view class="item-title">商品金额</view>
+          <view class="ss-flex ss-col-center">
+            <text class="item-value ss-m-r-24">
+              ￥{{ fen2yuan(state.orderInfo.price.totalPrice) }}
+            </text>
+          </view>
+        </view>
+        <view
+          v-if="state.orderPayload.pointActivityId"
+          class="order-item ss-flex ss-col-center ss-row-between"
+        >
+          <view class="item-title">兑换积分</view>
+          <view class="ss-flex ss-col-center">
+            <image
+              :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
+              class="score-img"
+            />
+            <text class="item-value ss-m-r-24">
+              {{ state.orderInfo.usePoint }}
+            </text>
+          </view>
+        </view>
+        <view
+          class="order-item ss-flex ss-col-center ss-row-between"
+          v-if="state.orderInfo.type === 0 || state.orderPayload.pointActivityId"
+        >
+          <view class="item-title">积分抵扣</view>
+          <view class="ss-flex ss-col-center">
+            {{ state.pointStatus || state.orderPayload.pointActivityId ? '剩余积分' : '当前积分' }}
+            <image
+              :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
+              class="score-img"
+            />
+            <text class="item-value ss-m-r-24">
+              {{
+                state.pointStatus || state.orderPayload.pointActivityId
+                  ? state.orderInfo.totalPoint - state.orderInfo.usePoint
+                  : state.orderInfo.totalPoint || 0
+              }}
+            </text>
+            <checkbox-group @change="changeIntegral" v-if="!state.orderPayload.pointActivityId">
+              <checkbox
+                :checked="state.pointStatus"
+                :disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0"
+              />
+            </checkbox-group>
+          </view>
+        </view>
+        <!-- 快递配置时，信息的展示 -->
+        <view
+          class="order-item ss-flex ss-col-center ss-row-between"
+          v-if="addressState.deliveryType === 1"
+        >
+          <view class="item-title">运费</view>
+          <view class="ss-flex ss-col-center">
+            <text class="item-value ss-m-r-24" v-if="state.orderInfo.price.deliveryPrice > 0">
+              +￥{{ fen2yuan(state.orderInfo.price.deliveryPrice) }}
+            </text>
+            <view class="item-value ss-m-r-24" v-else>免运费</view>
+          </view>
+        </view>
+        <!-- 门店自提时，需要填写姓名和手机号 -->
+        <view
+          class="order-item ss-flex ss-col-center ss-row-between"
+          v-if="addressState.deliveryType === 2"
+        >
+          <view class="item-title">联系人</view>
+          <view class="ss-flex ss-col-center">
+            <uni-easyinput
+              maxlength="20"
+              placeholder="请填写您的联系姓名"
+              v-model="addressState.receiverName"
+              :inputBorder="false"
+              :clearable="false"
+            />
+          </view>
+        </view>
+        <view
+          class="order-item ss-flex ss-col-center ss-row-between"
+          v-if="addressState.deliveryType === 2"
+        >
+          <view class="item-title">联系电话</view>
+          <view class="ss-flex ss-col-center">
+            <uni-easyinput
+              maxlength="20"
+              placeholder="请填写您的联系电话"
+              v-model="addressState.receiverMobile"
+              :inputBorder="false"
+              :clearable="false"
+            />
+          </view>
+        </view>
+        <!-- 优惠劵：只有 type = 0 普通订单（非拼团、秒杀、砍价），才可以使用优惠劵 -->
+        <view
+          class="order-item ss-flex ss-col-center ss-row-between"
+          v-if="state.orderInfo.type === 0"
+        >
+          <view class="item-title">优惠券</view>
+          <view class="ss-flex ss-col-center" @tap="state.showCoupon = true">
+            <text class="item-value text-red" v-if="state.orderPayload.couponId > 0">
+              -￥{{ fen2yuan(state.orderInfo.price.couponPrice) }}
+            </text>
+            <text
+              class="item-value"
+              :class="
+                state.couponInfo.filter((coupon) => coupon.match).length > 0
+                  ? 'text-red'
+                  : 'text-disabled'
+              "
+              v-else
+            >
+              {{
+                state.couponInfo.filter((coupon) => coupon.match).length > 0
+                  ? state.couponInfo.filter((coupon) => coupon.match).length + ' 张可用'
+                  : '暂无可用优惠券'
+              }}
+            </text>
+            <text class="_icon-forward item-icon" />
+          </view>
+        </view>
+        <view
+          class="order-item ss-flex ss-col-center ss-row-between"
+          v-if="state.orderInfo.price.discountPrice > 0"
+        >
+          <view class="item-title">活动优惠</view>
+          <view class="ss-flex ss-col-center" @tap="state.showDiscount = true">
+            <text class="item-value text-red">
+              -￥{{ fen2yuan(state.orderInfo.price.discountPrice) }}
+            </text>
+            <text class="_icon-forward item-icon" />
+          </view>
+        </view>
+        <view
+          class="order-item ss-flex ss-col-center ss-row-between"
+          v-if="state.orderInfo.price.vipPrice > 0"
+        >
+          <view class="item-title">会员优惠</view>
+          <view class="ss-flex ss-col-center">
+            <text class="item-value text-red">
+              -￥{{ fen2yuan(state.orderInfo.price.vipPrice) }}
+            </text>
+          </view>
+        </view>
+      </view>
+      <view class="total-box-footer ss-font-28 ss-flex ss-row-right ss-col-center ss-m-r-28">
+        <view class="total-num ss-m-r-20">
+          共{{ state.orderInfo.items.reduce((acc, item) => acc + item.count, 0) }}件
+        </view>
+        <view>合计：</view>
+        <view class="total-num text-red"> ￥{{ fen2yuan(state.orderInfo.price.payPrice) }}</view>
+      </view>
+    </view>
+
+    <!-- 选择优惠券弹框 -->
+    <s-coupon-select
+      v-model="state.couponInfo"
+      :show="state.showCoupon"
+      @confirm="onSelectCoupon"
+      @close="state.showCoupon = false"
+    />
+
+    <!-- 满额折扣弹框 -->
+    <s-discount-list
+      v-model="state.orderInfo"
+      :show="state.showDiscount"
+      @close="state.showDiscount = false"
+    />
+
+    <!-- 底部 -->
+    <su-fixed bottom :opacity="false" bg="bg-white" placeholder :noFixed="false" :index="200">
+      <view class="footer-box border-top ss-flex ss-row-between ss-p-x-20 ss-col-center">
+        <view class="total-box-footer ss-flex ss-col-center">
+          <view class="total-num ss-font-30 text-red">
+            ￥{{ fen2yuan(state.orderInfo.price.payPrice) }}
+          </view>
+        </view>
+        <button
+          class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main"
+          @tap="onConfirm"
+        >
+          提交订单
+        </button>
+      </view>
+    </su-fixed>
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive, ref, watch } from 'vue';
+  import { onLoad } from '@dcloudio/uni-app';
+  import AddressSelection from '@/pages/order/addressSelection.vue';
+  import sheep from '@/sheep';
+  import OrderApi from '@/sheep/api/trade/order';
+  import TradeConfigApi from '@/sheep/api/trade/config';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import { DeliveryTypeEnum } from '@/sheep/helper/const';
+
+  const state = reactive({
+    orderPayload: {},
+    orderInfo: {
+      items: [], // 商品项列表
+      price: {}, // 价格信息
+    },
+    showCoupon: false, // 是否展示优惠劵
+    couponInfo: [], // 优惠劵列表
+    showDiscount: false, // 是否展示营销活动
+    // ========== 积分 ==========
+    pointStatus: false, //是否使用积分
+  });
+
+  const addressState = ref({
+    addressInfo: {}, // 选择的收货地址
+    deliveryType: undefined, // 收货方式：1-快递配送，2-门店自提
+    isPickUp: true, // 门店自提是否开启
+    pickUpInfo: {}, // 选择的自提门店信息
+    receiverName: '', // 收件人名称
+    receiverMobile: '', // 收件人手机
+  });
+
+  // ========== 积分 ==========
+  /**
+   * 使用积分抵扣
+   */
+  const changeIntegral = async () => {
+    state.pointStatus = !state.pointStatus;
+    await getOrderInfo();
+  };
+
+  // 选择优惠券
+  async function onSelectCoupon(couponId) {
+    state.orderPayload.couponId = couponId;
+    await getOrderInfo();
+    state.showCoupon = false;
+  }
+
+  // 提交订单
+  function onConfirm() {
+    if (addressState.value.deliveryType === 1 && !addressState.value.addressInfo.id) {
+      sheep.$helper.toast('请选择收货地址');
+      return;
+    }
+    if (addressState.value.deliveryType === 2) {
+      if (!addressState.value.pickUpInfo.id) {
+        sheep.$helper.toast('请选择自提门店地址');
+        return;
+      }
+      if (addressState.value.receiverName === '' || addressState.value.receiverMobile === '') {
+        sheep.$helper.toast('请填写联系人或联系人电话');
+        return;
+      }
+      if (!/^[\u4e00-\u9fa5\w]{2,16}$/.test(addressState.value.receiverName)) {
+        sheep.$helper.toast('请填写您的真实姓名');
+        return;
+      }
+      if (!/^1(3|4|5|7|8|9|6)\d{9}$/.test(addressState.value.receiverMobile)) {
+        sheep.$helper.toast('请填写正确的手机号');
+        return;
+      }
+    }
+    submitOrder();
+  }
+
+  // 创建订单&跳转
+  async function submitOrder() {
+    const { code, data } = await OrderApi.createOrder({
+      items: state.orderPayload.items,
+      couponId: state.orderPayload.couponId,
+      remark: state.orderPayload.remark,
+      deliveryType: addressState.value.deliveryType,
+      addressId: addressState.value.addressInfo.id, // 收件地址编号
+      pickUpStoreId: addressState.value.pickUpInfo.id, //自提门店编号
+      receiverName: addressState.value.receiverName, // 选择门店自提时，该字段为联系人名
+      receiverMobile: addressState.value.receiverMobile, // 选择门店自提时，该字段为联系人手机
+      pointStatus: state.pointStatus,
+      combinationActivityId: state.orderPayload.combinationActivityId,
+      combinationHeadId: state.orderPayload.combinationHeadId,
+      seckillActivityId: state.orderPayload.seckillActivityId,
+      pointActivityId: state.orderPayload.pointActivityId,
+    });
+    if (code !== 0) {
+      return;
+    }
+    // 更新购物车列表，如果来自购物车
+    if (state.orderPayload.items[0].cartId > 0) {
+      sheep.$store('cart').getList();
+    }
+
+    // 跳转到支付页面
+    if (data.payOrderId && data.payOrderId > 0) {
+      sheep.$router.redirect('/pages/pay/index', {
+        id: data.payOrderId,
+      });
+    } else {
+      sheep.$router.redirect('/pages/order/detail', {
+        id: data.id,
+      });
+    }
+  }
+
+  // 检查库存 & 计算订单价格
+  async function getOrderInfo() {
+    // 计算价格
+    const { data, code } = await OrderApi.settlementOrder({
+      items: state.orderPayload.items,
+      couponId: state.orderPayload.couponId,
+      deliveryType: addressState.value.deliveryType,
+      addressId: addressState.value.addressInfo.id, // 收件地址编号
+      pickUpStoreId: addressState.value.pickUpInfo.id, //自提门店编号
+      receiverName: addressState.value.receiverName, // 选择门店自提时，该字段为联系人名
+      receiverMobile: addressState.value.receiverMobile, // 选择门店自提时，该字段为联系人手机
+      pointStatus: state.pointStatus,
+      combinationActivityId: state.orderPayload.combinationActivityId,
+      combinationHeadId: state.orderPayload.combinationHeadId,
+      seckillActivityId: state.orderPayload.seckillActivityId,
+      pointActivityId: state.orderPayload.pointActivityId,
+    });
+    if (code !== 0) {
+      return code;
+    }
+    state.orderInfo = data;
+    state.couponInfo = data.coupons || [];
+    // 设置收货地址
+    if (state.orderInfo.address) {
+      addressState.value.addressInfo = state.orderInfo.address;
+    }
+    return code;
+  }
+
+  onLoad(async (options) => {
+    // 解析参数
+    if (!options.data) {
+      sheep.$helper.toast('参数不正确，请检查！');
+      return;
+    }
+    state.orderPayload = JSON.parse(options.data);
+
+    // 获取交易配置
+    const { data, code } = await TradeConfigApi.getTradeConfig();
+    if (code === 0) {
+      addressState.value.isPickUp = data.deliveryPickUpEnabled;
+    }
+
+    // 价格计算
+    // 情况一：先自动选择“快递物流”
+    addressState.value.deliveryType = DeliveryTypeEnum.EXPRESS.type;
+    let orderCode = await getOrderInfo();
+    if (orderCode === 0) {
+      return;
+    }
+    // 情况二：失败，再自动选择“门店自提”
+    if (addressState.value.isPickUp) {
+      addressState.value.deliveryType = DeliveryTypeEnum.PICK_UP.type;
+      let orderCode = await getOrderInfo();
+      if (orderCode === 0) {
+        return;
+      }
+    }
+    // 情况三：都失败，则不选择
+    addressState.value.deliveryType = undefined;
+    await getOrderInfo();
+  });
+
+  // 使用 watch 监听地址和配送方式的变化
+  watch(addressState, async (newAddress, oldAddress) => {
+    // 如果收货地址或配送方式有变化，则重新计算价格
+    if (
+      newAddress.addressInfo.id !== oldAddress.addressInfo.id ||
+      newAddress.deliveryType !== oldAddress.deliveryType
+    ) {
+      await getOrderInfo();
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  :deep() {
+    .uni-input-wrapper {
+      width: 320rpx;
+    }
+
+    .uni-easyinput__content-input {
+      font-size: 28rpx;
+      height: 72rpx;
+      text-align: right !important;
+      padding-right: 0 !important;
+
+      .uni-input-input {
+        font-weight: 500;
+        color: #333333;
+        font-size: 26rpx;
+        height: 32rpx;
+        margin-top: 4rpx;
+      }
+    }
+
+    .uni-easyinput__content {
+      display: flex !important;
+      align-items: center !important;
+      justify-content: right !important;
+    }
+  }
+
+  .score-img {
+    width: 36rpx;
+    height: 36rpx;
+    margin: 0 4rpx;
+  }
+
+  .order-item {
+    height: 80rpx;
+
+    .item-title {
+      font-size: 28rpx;
+      font-weight: 400;
+    }
+
+    .item-value {
+      font-size: 28rpx;
+      font-weight: 500;
+      font-family: OPPOSANS;
+    }
+
+    .text-disabled {
+      color: #bbbbbb;
+    }
+
+    .item-icon {
+      color: $dark-9;
+    }
+
+    .remark-input {
+      text-align: right;
+    }
+
+    .item-placeholder {
+      color: $dark-9;
+      font-size: 26rpx;
+      text-align: right;
+    }
+  }
+
+  .total-box-footer {
+    height: 90rpx;
+
+    .total-num {
+      color: #333333;
+      font-family: OPPOSANS;
+    }
+  }
+
+  .footer-box {
+    height: 100rpx;
+
+    .submit-btn {
+      width: 240rpx;
+      height: 70rpx;
+      font-size: 28rpx;
+      font-weight: 500;
+
+      .goto-pay-text {
+        line-height: 28rpx;
+      }
+    }
+
+    .cancel-btn {
+      width: 240rpx;
+      height: 80rpx;
+      font-size: 26rpx;
+      background-color: #e5e5e5;
+      color: $dark-9;
+    }
+  }
+
+  .title {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #333333;
+  }
+
+  .subtitle {
+    font-size: 28rpx;
+    color: #999999;
+  }
+
+  .cicon-checkbox {
+    font-size: 36rpx;
+    color: var(--ui-BG-Main);
+  }
+
+  .cicon-box {
+    font-size: 36rpx;
+    color: #999999;
+  }
+</style>
diff --git a/src/pages/order/detail.vue b/src/pages/order/detail.vue
new file mode 100644
index 00000000..f6aad236
--- /dev/null
+++ b/src/pages/order/detail.vue
@@ -0,0 +1,671 @@
+<!-- 订单详情 -->
+<template>
+  <s-layout title="订单详情" class="index-wrap" navbar="inner">
+    <view
+      class="state-box ss-flex-col ss-col-center ss-row-right"
+      :style="[
+        {
+          marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+          paddingTop: Number(statusBarHeight + 88) + 'rpx',
+        },
+      ]"
+    >
+      <view class="ss-flex ss-m-t-32 ss-m-b-20">
+        <!-- 待支付 -->
+        <image
+          v-if="state.orderInfo.status === 0"
+          class="state-img"
+          :src="sheep.$url.static('/static/img/shop/order/no_pay.png')"
+        />
+        <!-- 待发货 -->
+        <image
+          v-if="state.orderInfo.status === 10"
+          class="state-img"
+          :src="sheep.$url.static('/static/img/shop/order/order_loading.png')"
+        />
+        <!-- 已完成 -->
+        <image
+          v-else-if="state.orderInfo.status === 30"
+          class="state-img"
+          :src="sheep.$url.static('/static/img/shop/order/order_success.png')"
+        />
+        <!-- 已关闭 -->
+        <image
+          v-else-if="state.orderInfo.status === 40"
+          class="state-img"
+          :src="sheep.$url.static('/static/img/shop/order/order_close.png')"
+        />
+        <!-- 已发货 -->
+        <image
+          v-else-if="state.orderInfo.status === 20"
+          class="state-img"
+          :src="sheep.$url.static('/static/img/shop/order/order_express.png')"
+        />
+        <view class="ss-font-30">{{ formatOrderStatus(state.orderInfo) }}</view>
+      </view>
+      <view class="ss-font-26 ss-m-x-20 ss-m-b-70">
+        {{ formatOrderStatusDescription(state.orderInfo) }}
+      </view>
+    </view>
+
+    <!-- 收货地址 -->
+    <view class="order-address-box" v-if="state.orderInfo.receiverAreaId > 0">
+      <view class="ss-flex ss-col-center">
+        <text class="address-username">
+          {{ state.orderInfo.receiverName }}
+        </text>
+        <text class="address-phone">{{ state.orderInfo.receiverMobile }}</text>
+      </view>
+      <view class="address-detail">
+        {{ state.orderInfo.receiverAreaName }} {{ state.orderInfo.receiverDetailAddress }}
+      </view>
+    </view>
+
+    <view
+      class="detail-goods"
+      :style="[{ marginTop: state.orderInfo.receiverAreaId > 0 ? '0' : '-40rpx' }]"
+    >
+      <!-- 订单信 -->
+      <view class="order-list" v-for="item in state.orderInfo.items" :key="item.goods_id">
+        <view class="order-card">
+          <s-goods-item
+            @tap="onGoodsDetail(item.spuId)"
+            :img="item.picUrl"
+            :title="item.spuName"
+            :skuText="item.properties.map((property) => property.valueName).join(' ')"
+            :price="item.price"
+            :num="item.count"
+          >
+            <template #tool>
+              <view class="ss-flex">
+                <button
+                  class="ss-reset-button apply-btn"
+                  v-if="[10, 20, 30].includes(state.orderInfo.status) && item.afterSaleStatus === 0"
+                  @tap.stop="
+                    sheep.$router.go('/pages/order/aftersale/apply', {
+                      orderId: state.orderInfo.id,
+                      itemId: item.id,
+                    })
+                  "
+                >
+                  申请售后
+                </button>
+                <button
+                  class="ss-reset-button apply-btn"
+                  v-if="item.afterSaleStatus === 10"
+                  @tap.stop="
+                    sheep.$router.go('/pages/order/aftersale/detail', {
+                      id: item.afterSaleId,
+                    })
+                  "
+                >
+                  退款中
+                </button>
+                <button
+                  class="ss-reset-button apply-btn"
+                  v-if="item.afterSaleStatus === 20"
+                  @tap.stop="
+                    sheep.$router.go('/pages/order/aftersale/detail', {
+                      id: item.afterSaleId,
+                    })
+                  "
+                >
+                  退款成功
+                </button>
+              </view>
+            </template>
+            <template #priceSuffix>
+              <button class="ss-reset-button tag-btn" v-if="item.status_text">
+                {{ item.status_text }}
+              </button>
+            </template>
+          </s-goods-item>
+        </view>
+      </view>
+    </view>
+
+    <!--  自提核销  -->
+    <PickUpVerify
+      :order-info="state.orderInfo"
+      :systemStore="systemStore"
+      ref="pickUpVerifyRef"
+    ></PickUpVerify>
+
+    <!-- 订单信息 -->
+    <view class="notice-box">
+      <view class="notice-box__content">
+        <view class="notice-item--center">
+          <view class="ss-flex ss-flex-1">
+            <text class="title">订单编号：</text>
+            <text class="detail">{{ state.orderInfo.no }}</text>
+          </view>
+          <button class="ss-reset-button copy-btn" @tap="onCopy">复制</button>
+        </view>
+        <view class="notice-item">
+          <text class="title">下单时间：</text>
+          <text class="detail">
+            {{ sheep.$helper.timeFormat(state.orderInfo.createTime, 'yyyy-mm-dd hh:MM:ss') }}
+          </text>
+        </view>
+        <view class="notice-item" v-if="state.orderInfo.payTime">
+          <text class="title">支付时间：</text>
+          <text class="detail">
+            {{ sheep.$helper.timeFormat(state.orderInfo.payTime, 'yyyy-mm-dd hh:MM:ss') }}
+          </text>
+        </view>
+        <view class="notice-item">
+          <text class="title">支付方式：</text>
+          <text class="detail">{{ state.orderInfo.payChannelName || '-' }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 价格信息 -->
+    <view class="order-price-box">
+      <view class="notice-item ss-flex ss-row-between">
+        <text class="title">商品总额</text>
+        <view class="ss-flex">
+          <text class="detail">￥{{ fen2yuan(state.orderInfo.totalPrice) }}</text>
+        </view>
+      </view>
+      <view class="notice-item ss-flex ss-row-between">
+        <text class="title">运费</text>
+        <text class="detail">￥{{ fen2yuan(state.orderInfo.deliveryPrice) }}</text>
+      </view>
+      <view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.couponPrice > 0">
+        <text class="title">优惠劵金额</text>
+        <text class="detail">-¥{{ fen2yuan(state.orderInfo.couponPrice) }}</text>
+      </view>
+      <view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.pointPrice > 0">
+        <text class="title">积分抵扣</text>
+        <text class="detail">-¥{{ fen2yuan(state.orderInfo.pointPrice) }}</text>
+      </view>
+      <view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.discountPrice > 0">
+        <text class="title">活动优惠</text>
+        <text class="detail">¥{{ fen2yuan(state.orderInfo.discountPrice) }}</text>
+      </view>
+      <view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.vipPrice > 0">
+        <text class="title">会员优惠</text>
+        <text class="detail">-¥{{ fen2yuan(state.orderInfo.vipPrice) }}</text>
+      </view>
+      <view class="notice-item all-rpice-item ss-flex ss-m-t-20">
+        <text class="title">{{ state.orderInfo.payStatus ? '已付款' : '需付款' }}</text>
+        <text class="detail all-price">￥{{ fen2yuan(state.orderInfo.payPrice) }}</text>
+      </view>
+      <view
+        class="notice-item all-rpice-item ss-flex ss-m-t-20"
+        v-if="state.orderInfo.refundPrice > 0"
+      >
+        <text class="title">已退款</text>
+        <text class="detail all-price">￥{{ fen2yuan(state.orderInfo.refundPrice) }}</text>
+      </view>
+    </view>
+
+    <!-- 底部按钮 -->
+    <!-- TODO: 查看物流、等待成团、评价完后返回页面没刷新页面 -->
+    <su-fixed bottom placeholder bg="bg-white" v-if="state.orderInfo.buttons?.length">
+      <view class="footer-box ss-flex ss-col-center ss-row-right">
+        <button
+          class="ss-reset-button cancel-btn"
+          v-if="state.orderInfo.buttons?.includes('cancel')"
+          @tap="onCancel(state.orderInfo.id)"
+        >
+          取消订单
+        </button>
+        <button
+          class="ss-reset-button pay-btn ui-BG-Main-Gradient"
+          v-if="state.orderInfo.buttons?.includes('pay')"
+          @tap="onPay(state.orderInfo.payOrderId)"
+        >
+          继续支付
+        </button>
+        <button
+          class="ss-reset-button cancel-btn"
+          v-if="state.orderInfo.buttons?.includes('combination')"
+          @tap="
+            sheep.$router.go('/pages/activity/groupon/detail', {
+              id: state.orderInfo.combinationRecordId,
+            })
+          "
+        >
+          拼团详情
+        </button>
+        <button
+          class="ss-reset-button cancel-btn"
+          v-if="state.orderInfo.buttons?.includes('express')"
+          @tap="onExpress(state.orderInfo.id)"
+        >
+          查看物流
+        </button>
+        <button
+          class="ss-reset-button cancel-btn"
+          v-if="state.orderInfo.buttons?.includes('confirm')"
+          @tap="onConfirm(state.orderInfo.id)"
+        >
+          确认收货
+        </button>
+        <button
+          class="ss-reset-button cancel-btn"
+          v-if="state.orderInfo.buttons?.includes('comment')"
+          @tap="onComment(state.orderInfo.id)"
+        >
+          评价
+        </button>
+      </view>
+    </su-fixed>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad, onShow } from '@dcloudio/uni-app';
+  import { reactive, ref } from 'vue';
+  import { isEmpty } from 'lodash-es';
+  import {
+    fen2yuan,
+    formatOrderStatus,
+    formatOrderStatusDescription,
+    handleOrderButtons,
+  } from '@/sheep/hooks/useGoods';
+  import OrderApi from '@/sheep/api/trade/order';
+  import DeliveryApi from '@/sheep/api/trade/delivery';
+  import PickUpVerify from '@/pages/order/pickUpVerify.vue';
+
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
+
+  const state = reactive({
+    orderInfo: {},
+    merchantTradeNo: '', // 商户订单号
+    comeinType: '', // 进入订单详情的来源类型
+  });
+
+  // ========== 门店自提（核销） ==========
+  const systemStore = ref({}); // 门店信息
+
+  // 复制
+  const onCopy = () => {
+    sheep.$helper.copyText(state.orderInfo.no);
+  };
+
+  // 去支付
+  function onPay(payOrderId) {
+    sheep.$router.go('/pages/pay/index', {
+      id: payOrderId,
+    });
+  }
+
+  // 查看商品
+  function onGoodsDetail(id) {
+    sheep.$router.go('/pages/goods/index', {
+      id,
+    });
+  }
+
+  // 取消订单
+  async function onCancel(orderId) {
+    uni.showModal({
+      title: '提示',
+      content: '确定要取消订单吗?',
+      success: async function (res) {
+        if (!res.confirm) {
+          return;
+        }
+        const { code } = await OrderApi.cancelOrder(orderId);
+        if (code === 0) {
+          await getOrderDetail(orderId);
+        }
+      },
+    });
+  }
+
+  // 查看物流
+  async function onExpress(id) {
+    sheep.$router.go('/pages/order/express/log', {
+      id,
+    });
+  }
+
+  // 确认收货
+  async function onConfirm(orderId, ignore = false) {
+    // 需开启确认收货组件
+    // todo: 芋艿：【微信物流】待接入微信 https://gitee.com/sheepjs/shopro-uniapp/commit/a6bbba49b84dd418b84c5fefc8b7463df8f4901f
+    // 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
+    // 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
+    let isOpenBusinessView = true;
+    if (
+      sheep.$platform.name === 'WechatMiniProgram' &&
+      !isEmpty(state.orderInfo.wechat_extra_data) &&
+      isOpenBusinessView &&
+      !ignore
+    ) {
+      mpConfirm(orderId);
+      return;
+    }
+
+    uni.showModal({
+      title: '提示',
+      content: '确认收货吗？',
+      success: async function (res) {
+        if (!res.confirm) {
+          return;
+        }
+        // 正常的确认收货流程
+        const { code } = await OrderApi.receiveOrder(orderId);
+        if (code === 0) {
+          await getOrderDetail(orderId);
+        }
+      },
+    });
+  }
+
+  // #ifdef MP-WEIXIN
+  // 小程序确认收货组件
+  function mpConfirm(orderId) {
+    if (!wx.openBusinessView) {
+      sheep.$helper.toast(`请升级微信版本`);
+      return;
+    }
+    wx.openBusinessView({
+      businessType: 'weappOrderConfirm',
+      extraData: {
+        merchant_trade_no: state.orderInfo.wechat_extra_data.merchant_trade_no,
+        transaction_id: state.orderInfo.wechat_extra_data.transaction_id,
+      },
+      success(response) {
+        console.log('success:', response);
+        if (response.errMsg === 'openBusinessView:ok') {
+          if (response.extraData.status === 'success') {
+            onConfirm(orderId, true);
+          }
+        }
+      },
+      fail(error) {
+        console.log('error:', error);
+      },
+      complete(result) {
+        console.log('result:', result);
+      },
+    });
+  }
+
+  // #endif
+
+  // 评价
+  function onComment(id) {
+    sheep.$router.go('/pages/goods/comment/add', {
+      id,
+    });
+  }
+
+  const pickUpVerifyRef = ref();
+
+  async function getOrderDetail(id) {
+    // 对详情数据进行适配
+    let res;
+    if (state.comeinType === 'wechat') {
+      // TODO 芋艿：【微信物流】微信场景下
+      res = await OrderApi.getOrderDetail(id, {
+        merchant_trade_no: state.merchantTradeNo,
+      });
+    } else {
+      res = await OrderApi.getOrderDetail(id);
+    }
+    if (res.code === 0) {
+      state.orderInfo = res.data;
+      handleOrderButtons(state.orderInfo);
+      // 配送方式：门店自提
+      if (res.data.pickUpStoreId) {
+        const { data } = await DeliveryApi.getDeliveryPickUpStore(res.data.pickUpStoreId);
+        systemStore.value = data || {};
+      }
+      if (state.orderInfo.deliveryType === 2 && state.orderInfo.payStatus) {
+        pickUpVerifyRef.value && pickUpVerifyRef.value.markCode(res.data.pickUpVerifyCode);
+      }
+    } else {
+      sheep.$router.back();
+    }
+  }
+
+  onShow(async () => {
+    //onShow中获取订单列表,保证跳转后页面为最新状态
+    await getOrderDetail(state.orderInfo.id);
+  });
+
+  onLoad(async (options) => {
+    let id = 0;
+    if (options.id) {
+      id = options.id;
+    }
+    // TODO 芋艿：【微信物流】下面两个变量，后续接入
+    state.comeinType = options.comein_type;
+    if (state.comeinType === 'wechat') {
+      state.merchantTradeNo = options.merchant_trade_no;
+    }
+    state.orderInfo.id = id;
+  });
+</script>
+
+<style lang="scss" scoped>
+  .score-img {
+    width: 36rpx;
+    height: 36rpx;
+    margin: 0 4rpx;
+  }
+
+  .apply-btn {
+    width: 140rpx;
+    height: 50rpx;
+    border-radius: 25rpx;
+    font-size: 24rpx;
+    border: 2rpx solid #dcdcdc;
+    line-height: normal;
+    margin-left: 16rpx;
+  }
+
+  .state-box {
+    color: rgba(#fff, 0.9);
+    width: 100%;
+    background: v-bind(headerBg) no-repeat,
+      linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    background-size: 750rpx 100%;
+    box-sizing: border-box;
+
+    .state-img {
+      width: 60rpx;
+      height: 60rpx;
+      margin-right: 20rpx;
+    }
+  }
+
+  .order-address-box {
+    background-color: #fff;
+    border-radius: 10rpx;
+    margin: -50rpx 20rpx 16rpx 20rpx;
+    padding: 44rpx 34rpx 42rpx 20rpx;
+    font-size: 30rpx;
+    box-sizing: border-box;
+    font-weight: 500;
+    color: rgba(51, 51, 51, 1);
+
+    .address-username {
+      margin-right: 20rpx;
+    }
+
+    .address-detail {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: rgba(153, 153, 153, 1);
+      margin-top: 20rpx;
+    }
+  }
+
+  .detail-goods {
+    border-radius: 10rpx;
+    margin: 0 20rpx 20rpx 20rpx;
+
+    .order-list {
+      margin-bottom: 20rpx;
+      background-color: #fff;
+
+      .order-card {
+        padding: 20rpx 0;
+
+        .order-sku {
+          font-size: 24rpx;
+
+          font-weight: 400;
+          color: rgba(153, 153, 153, 1);
+          width: 450rpx;
+          margin-bottom: 20rpx;
+
+          .order-num {
+            margin-right: 10rpx;
+          }
+        }
+
+        .tag-btn {
+          margin-left: 16rpx;
+          font-size: 24rpx;
+          height: 36rpx;
+          color: var(--ui-BG-Main);
+          border: 2rpx solid var(--ui-BG-Main);
+          border-radius: 14rpx;
+          padding: 0 4rpx;
+        }
+      }
+    }
+  }
+
+  // 订单信息。
+  .notice-box {
+    background: #fff;
+    border-radius: 10rpx;
+    margin: 0 20rpx 20rpx 20rpx;
+
+    .notice-box__head {
+      font-size: 30rpx;
+
+      font-weight: 500;
+      color: rgba(51, 51, 51, 1);
+      line-height: 80rpx;
+      border-bottom: 1rpx solid #dfdfdf;
+      padding: 0 25rpx;
+    }
+
+    .notice-box__content {
+      padding: 20rpx;
+
+      .self-pickup-box {
+        width: 100%;
+
+        .self-pickup--img {
+          width: 200rpx;
+          height: 200rpx;
+          margin: 40rpx 0;
+        }
+      }
+    }
+
+    .notice-item,
+    .notice-item--center {
+      display: flex;
+      align-items: center;
+      line-height: normal;
+      margin-bottom: 24rpx;
+
+      .title {
+        font-size: 28rpx;
+        color: #999;
+      }
+
+      .detail {
+        font-size: 28rpx;
+        color: #333;
+        flex: 1;
+      }
+    }
+  }
+
+  .copy-btn {
+    width: 100rpx;
+    line-height: 50rpx;
+    border-radius: 25rpx;
+    padding: 0;
+    background: rgba(238, 238, 238, 1);
+    font-size: 22rpx;
+    font-weight: 400;
+    color: rgba(51, 51, 51, 1);
+  }
+
+  // 订单价格信息
+  .order-price-box {
+    background-color: #fff;
+    border-radius: 10rpx;
+    padding: 20rpx;
+    margin: 0 20rpx 20rpx 20rpx;
+
+    .notice-item {
+      line-height: 70rpx;
+
+      .title {
+        font-size: 28rpx;
+        color: #999;
+      }
+
+      .detail {
+        font-size: 28rpx;
+        color: #333;
+        font-family: OPPOSANS;
+      }
+    }
+
+    .all-rpice-item {
+      justify-content: flex-end;
+      align-items: center;
+
+      .title {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #333333;
+        line-height: normal;
+      }
+
+      .all-price {
+        font-size: 26rpx;
+        font-family: OPPOSANS;
+        line-height: normal;
+        color: $red;
+      }
+    }
+  }
+
+  // 底部
+  .footer-box {
+    height: 100rpx;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 10rpx;
+    padding-right: 20rpx;
+
+    .cancel-btn {
+      width: 160rpx;
+      height: 60rpx;
+      background: #eeeeee;
+      border-radius: 30rpx;
+      margin-right: 20rpx;
+      font-size: 26rpx;
+      font-weight: 400;
+      color: #333333;
+    }
+
+    .pay-btn {
+      width: 160rpx;
+      height: 60rpx;
+      font-size: 26rpx;
+      border-radius: 30rpx;
+      font-weight: 500;
+      color: #fff;
+    }
+  }
+</style>
diff --git a/src/pages/order/express/log.vue b/src/pages/order/express/log.vue
new file mode 100644
index 00000000..a8e6f7ac
--- /dev/null
+++ b/src/pages/order/express/log.vue
@@ -0,0 +1,233 @@
+<!-- 物流追踪 -->
+<template>
+  <s-layout title="物流追踪">
+    <view class="log-wrap">
+      <!-- 商品信息 -->
+      <view class="log-card ss-flex ss-m-20 ss-r-10" v-if="goodsImages.length > 0">
+        <uni-swiper-dot :info="goodsImages" :current="state.current" mode="round">
+          <swiper class="swiper-box">
+            <swiper-item v-for="(item, index) in goodsImages" :key="index">
+              <image class="log-card-img" :src="sheep.$url.static(item.image)" />
+            </swiper-item>
+          </swiper>
+        </uni-swiper-dot>
+        <view class="log-card-msg">
+          <!-- TODO 芋艿：【物流】优化点：展示状态 -->
+          <!--          <view class="ss-flex ss-m-b-8">-->
+          <!--            <view>物流状态：</view>-->
+          <!--            <view class="warning-color">{{ state.info.status_text }}</view>-->
+          <!--          </view>-->
+          <view class="ss-m-b-8">快递单号：{{ state.info.logisticsNo }}</view>
+          <view>快递公司：{{ state.info.logisticsName }}</view>
+        </view>
+      </view>
+
+      <!-- 物流轨迹 -->
+      <view class="log-content ss-m-20 ss-r-10">
+        <view
+          class="log-content-box ss-flex"
+          v-for="(item, index) in state.tracks"
+          :key="item.title"
+        >
+          <view class="log-icon ss-flex-col ss-col-center ss-m-r-20">
+            <text class="cicon-title" />
+            <view v-if="state.tracks.length - 1 !== index" class="line" />
+          </view>
+          <view class="log-content-msg">
+            <!-- TODO 芋艿：【物流】优化点：展示状态 -->
+            <!--            <view class="log-msg-title ss-m-b-20">-->
+            <!--              {{ item.status_text }}-->
+            <!--            </view>-->
+            <!--            <view class="log-msg-desc ss-m-b-16">{{ item.content }}</view>-->
+            <view class="log-msg-desc ss-m-b-16">
+              <highlight-number :content="item.content" @phone-click="handlePhoneClick" />
+              <!--              <rich-text :nodes="item.content"></rich-text>-->
+            </view>
+            <view class="log-msg-date ss-m-b-40">
+              {{ sheep.$helper.timeFormat(item.time, 'yyyy-mm-dd hh:MM:ss') }}
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { computed, reactive } from 'vue';
+  import OrderApi from '@/sheep/api/trade/order';
+  import HighlightNumber from '@/pages/components/HighlightNumberText.vue';
+
+  const state = reactive({
+    info: [],
+    tracks: [],
+  });
+
+  const goodsImages = computed(() => {
+    let array = [];
+    if (state.info.items) {
+      state.info.items.forEach((item) => {
+        array.push({
+          image: item.picUrl,
+        });
+      });
+    }
+    return array;
+  });
+
+  async function getExpressDetail(id) {
+    const { data } = await OrderApi.getOrderExpressTrackList(id);
+    state.tracks = data;
+  }
+
+  async function getOrderDetail(id) {
+    const { data } = await OrderApi.getOrderDetail(id);
+    state.info = data;
+  }
+
+  onLoad((options) => {
+    getExpressDetail(options.id);
+    getOrderDetail(options.id);
+  });
+
+  function handlePhoneClick(data) {
+    handleClick(data);
+  }
+
+  function handleClick(data) {
+    const phoneNumber = data.phoneNumber;
+
+    if (!phoneNumber) return;
+
+    // 获取当前平台
+    const platform = uni.getSystemInfoSync().platform.toLowerCase();
+
+    if (platform === 'devtools') {
+      uni.showToast({ title: '真机才可拨打电话', icon: 'none' });
+      handleCopy(phoneNumber);
+      return;
+    }
+
+    if (platform === 'wechat') {
+      uni.showToast({ title: '请手动拨打', icon: 'none' });
+      handleCopy(phoneNumber);
+      return;
+    }
+
+    uni.makePhoneCall({
+      phoneNumber: phoneNumber,
+      success: () => {
+        console.log('拨打电话成功');
+      },
+      fail: (err) => {
+        console.error('拨打电话失败', err);
+        uni.showToast({ title: '拨号失败，请手动拨打', icon: 'none' });
+        handleCopy(phoneNumber);
+      },
+    });
+  }
+  function handleCopy(text) {
+    uni.setClipboardData({
+      data: text,
+      success: () => {
+        uni.showToast({ title: '已复制到剪贴板', icon: 'success' });
+      },
+      fail: () => {
+        uni.showToast({ title: '复制失败', icon: 'none' });
+      },
+    });
+  }
+</script>
+
+<style lang="scss" scoped>
+  .highlight {
+    color: red; /* 高亮颜色 */
+    font-weight: bold;
+  }
+
+  .swiper-box {
+    width: 200rpx;
+    height: 200rpx;
+  }
+
+  .log-card {
+    border-top: 2rpx solid rgba(#dfdfdf, 0.5);
+    padding: 20rpx;
+    background: #fff;
+    margin-bottom: 20rpx;
+
+    .log-card-img {
+      width: 200rpx;
+      height: 200rpx;
+      margin-right: 20rpx;
+    }
+
+    .log-card-msg {
+      font-size: 28rpx;
+      font-weight: 500;
+      width: 490rpx;
+      color: #333333;
+
+      .warning-color {
+        color: #999;
+      }
+    }
+  }
+
+  .log-content {
+    padding: 34rpx 20rpx 0rpx 20rpx;
+    background: #fff;
+
+    .log-content-box {
+      align-items: stretch;
+    }
+
+    .log-icon {
+      height: inherit;
+
+      .cicon-title {
+        color: #ccc;
+        font-size: 40rpx;
+      }
+
+      .activity-color {
+        color: #f0c785;
+        font-size: 40rpx;
+      }
+
+      .info-color {
+        color: #ccc;
+        font-size: 40rpx;
+      }
+
+      .line {
+        width: 1px;
+        height: 100%;
+        background: #d8d8d8;
+      }
+    }
+
+    .log-content-msg {
+      .log-msg-title {
+        font-size: 28rpx;
+        font-weight: bold;
+        color: #333333;
+      }
+
+      .log-msg-desc {
+        font-size: 24rpx;
+        font-weight: 400;
+        color: #333333;
+        line-height: 36rpx;
+      }
+
+      .log-msg-date {
+        font-size: 24rpx;
+        font-weight: 500;
+        color: #000000;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/order/list.vue b/src/pages/order/list.vue
new file mode 100644
index 00000000..26751990
--- /dev/null
+++ b/src/pages/order/list.vue
@@ -0,0 +1,504 @@
+<!-- 订单列表 -->
+<template>
+  <s-layout title="我的订单">
+    <su-sticky bgColor="#fff">
+      <su-tabs
+        :list="tabMaps"
+        :scrollable="false"
+        @change="onTabsChange"
+        :current="state.currentTab"
+      />
+    </su-sticky>
+    <s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" />
+    <view v-if="state.pagination.total > 0">
+      <view
+        class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
+        v-for="order in state.pagination.list"
+        :key="order.id"
+        @tap="onOrderDetail(order.id)"
+      >
+        <view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
+          <view class="order-no">订单号：{{ order.no }}</view>
+          <view class="order-state ss-font-26" :class="formatOrderColor(order)">
+            {{ formatOrderStatus(order) }}
+          </view>
+        </view>
+        <view class="border-bottom" v-for="item in order.items" :key="item.id">
+          <s-goods-item
+            :img="item.picUrl"
+            :title="item.spuName"
+            :skuText="item.properties.map((property) => property.valueName).join(' ')"
+            :price="item.price"
+            :num="item.count"
+          />
+        </view>
+        <view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
+          <view class="ss-flex ss-col-center">
+            <view class="discounts-title pay-color"
+              >共 {{ order.productCount }} 件商品,总金额:</view
+            >
+            <view class="discounts-money pay-color"> ￥{{ fen2yuan(order.payPrice) }} </view>
+          </view>
+        </view>
+        <view
+          class="order-card-footer ss-flex ss-col-center ss-p-x-20"
+          :class="order.buttons.length > 3 ? 'ss-row-between' : 'ss-row-right'"
+        >
+          <view class="ss-flex ss-col-center">
+            <button
+              v-if="order.buttons.includes('combination')"
+              class="tool-btn ss-reset-button"
+              @tap.stop="onOrderGroupon(order)"
+            >
+              拼团详情
+            </button>
+            <button
+              v-if="order.buttons.length === 0"
+              class="tool-btn ss-reset-button"
+              @tap.stop="onOrderDetail(order.id)"
+            >
+              查看详情
+            </button>
+            <button
+              v-if="order.buttons.includes('confirm')"
+              class="tool-btn ss-reset-button"
+              @tap.stop="onConfirm(order)"
+            >
+              确认收货
+            </button>
+            <button
+              v-if="order.buttons.includes('express')"
+              class="tool-btn ss-reset-button"
+              @tap.stop="onExpress(order.id)"
+            >
+              查看物流
+            </button>
+            <button
+              v-if="order.buttons.includes('cancel')"
+              class="tool-btn ss-reset-button"
+              @tap.stop="onCancel(order.id)"
+            >
+              取消订单
+            </button>
+            <button
+              v-if="order.buttons.includes('comment')"
+              class="tool-btn ss-reset-button"
+              @tap.stop="onComment(order.id)"
+            >
+              评价
+            </button>
+            <button
+              v-if="order.buttons.includes('delete')"
+              class="delete-btn ss-reset-button"
+              @tap.stop="onDelete(order.id)"
+            >
+              删除订单
+            </button>
+            <button
+              v-if="order.buttons.includes('pay')"
+              class="tool-btn ss-reset-button ui-BG-Main-Gradient"
+              @tap.stop="onPay(order.payOrderId)"
+            >
+              继续支付
+            </button>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 加载更多 -->
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
+  import {
+    fen2yuan,
+    formatOrderColor,
+    formatOrderStatus,
+    handleOrderButtons,
+  } from '@/sheep/hooks/useGoods';
+  import sheep from '@/sheep';
+  import _ from 'lodash-es';
+  import { isEmpty } from 'lodash-es';
+  import OrderApi from '@/sheep/api/trade/order';
+  import { resetPagination } from '@/sheep/helper/utils';
+
+  // 数据
+  const state = reactive({
+    currentTab: 0, // 选中的 tabMaps 下标
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 5,
+    },
+    loadStatus: '',
+  });
+
+  const tabMaps = [
+    {
+      name: '全部',
+    },
+    {
+      name: '待付款',
+      value: 0,
+    },
+    {
+      name: '待发货',
+      value: 10,
+    },
+    {
+      name: '待收货',
+      value: 20,
+    },
+    {
+      name: '待评价',
+      value: 30,
+    },
+  ];
+
+  // 切换选项卡
+  function onTabsChange(e) {
+    if (state.currentTab === e.index) {
+      return;
+    }
+    // 重头加载代码
+    resetPagination(state.pagination);
+    state.currentTab = e.index;
+    getOrderList();
+  }
+
+  // 订单详情
+  function onOrderDetail(id) {
+    sheep.$router.go('/pages/order/detail', {
+      id,
+    });
+  }
+
+  // 跳转拼团记录的详情
+  function onOrderGroupon(order) {
+    sheep.$router.go('/pages/activity/groupon/detail', {
+      id: order.combinationRecordId,
+    });
+  }
+
+  // 继续支付
+  function onPay(payOrderId) {
+    sheep.$router.go('/pages/pay/index', {
+      id: payOrderId,
+    });
+  }
+
+  // 评价
+  function onComment(id) {
+    sheep.$router.go('/pages/goods/comment/add', {
+      id,
+    });
+  }
+
+  // 确认收货
+  async function onConfirm(order, ignore = false) {
+    // 需开启确认收货组件
+    // todo: 芋艿：【微信物流】需要后续接入微信收货组件 https://gitee.com/sheepjs/shopro-uniapp/commit/a6bbba49b84dd418b84c5fefc8b7463df8f4901f
+    // 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
+    // 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
+    let isOpenBusinessView = true;
+    if (
+      sheep.$platform.name === 'WechatMiniProgram' &&
+      !isEmpty(order.wechat_extra_data) &&
+      isOpenBusinessView &&
+      !ignore
+    ) {
+      mpConfirm(order);
+      return;
+    }
+
+    uni.showModal({
+      title: '提示',
+      content: '确认收货吗？',
+      success: async function (res) {
+        if (!res.confirm) {
+          return;
+        }
+        // 正常的确认收货流程
+        const { code } = await OrderApi.receiveOrder(order.id);
+        if (code === 0) {
+          resetPagination(state.pagination);
+          await getOrderList();
+        }
+      },
+    });
+  }
+
+  // #ifdef MP-WEIXIN
+  // 小程序确认收货组件 TODO 芋艿：【微信物流】后续再接入
+  function mpConfirm(order) {
+    if (!wx.openBusinessView) {
+      sheep.$helper.toast(`请升级微信版本`);
+      return;
+    }
+    wx.openBusinessView({
+      businessType: 'weappOrderConfirm',
+      extraData: {
+        merchant_id: '1481069012',
+        merchant_trade_no: order.wechat_extra_data.merchant_trade_no,
+        transaction_id: order.wechat_extra_data.transaction_id,
+      },
+      success(response) {
+        console.log('success:', response);
+        if (response.errMsg === 'openBusinessView:ok') {
+          if (response.extraData.status === 'success') {
+            onConfirm(order, true);
+          }
+        }
+      },
+      fail(error) {
+        console.log('error:', error);
+      },
+      complete(result) {
+        console.log('result:', result);
+      },
+    });
+  }
+  // #endif
+
+  // 查看物流
+  async function onExpress(id) {
+    sheep.$router.go('/pages/order/express/log', {
+      id,
+    });
+  }
+
+  // 取消订单
+  async function onCancel(orderId) {
+    uni.showModal({
+      title: '提示',
+      content: '确定要取消订单吗?',
+      success: async function (res) {
+        if (!res.confirm) {
+          return;
+        }
+        const { code } = await OrderApi.cancelOrder(orderId);
+        if (code === 0) {
+          // 修改数据的状态
+          let index = state.pagination.list.findIndex((order) => order.id === orderId);
+          const orderInfo = state.pagination.list[index];
+          orderInfo.status = 40;
+          handleOrderButtons(orderInfo);
+        }
+      },
+    });
+  }
+
+  // 删除订单
+  function onDelete(orderId) {
+    uni.showModal({
+      title: '提示',
+      content: '确定要删除订单吗?',
+      success: async function (res) {
+        if (res.confirm) {
+          const { code } = await OrderApi.deleteOrder(orderId);
+          if (code === 0) {
+            // 删除数据
+            let index = state.pagination.list.findIndex((order) => order.id === orderId);
+            state.pagination.list.splice(index, 1);
+          }
+        }
+      },
+    });
+  }
+
+  // 获取订单列表
+  async function getOrderList() {
+    state.loadStatus = 'loading';
+    let { code, data } = await OrderApi.getOrderPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      status: tabMaps[state.currentTab].value,
+      commentStatus: tabMaps[state.currentTab].value === 30 ? false : null,
+    });
+    if (code !== 0) {
+      return;
+    }
+    data.list.forEach((order) => handleOrderButtons(order));
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  onLoad(async (options) => {
+    if (options.type) {
+      state.currentTab = options.type;
+    }
+    await getOrderList();
+  });
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getOrderList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+
+  // 下拉刷新
+  onPullDownRefresh(() => {
+    resetPagination(state.pagination);
+    getOrderList();
+    setTimeout(function () {
+      uni.stopPullDownRefresh();
+    }, 800);
+  });
+</script>
+
+<style lang="scss" scoped>
+  .score-img {
+    width: 36rpx;
+    height: 36rpx;
+    margin: 0 4rpx;
+  }
+
+  .tool-btn {
+    width: 160rpx;
+    height: 60rpx;
+    background: #f6f6f6;
+    font-size: 26rpx;
+    border-radius: 30rpx;
+    margin-right: 10rpx;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+
+  .delete-btn {
+    width: 160rpx;
+    height: 56rpx;
+    color: #ff3000;
+    background: #fee;
+    border-radius: 28rpx;
+    font-size: 26rpx;
+    margin-right: 10rpx;
+    line-height: normal;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+
+  .apply-btn {
+    width: 140rpx;
+    height: 50rpx;
+    border-radius: 25rpx;
+    font-size: 24rpx;
+    border: 2rpx solid #dcdcdc;
+    line-height: normal;
+    margin-left: 16rpx;
+  }
+
+  .swiper-box {
+    flex: 1;
+
+    .swiper-item {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  .order-list-card-box {
+    .order-card-header {
+      height: 80rpx;
+
+      .order-no {
+        font-size: 26rpx;
+        font-weight: 500;
+      }
+
+      .order-state {
+      }
+    }
+
+    .pay-box {
+      .discounts-title {
+        font-size: 24rpx;
+        line-height: normal;
+        color: #999999;
+      }
+
+      .discounts-money {
+        font-size: 24rpx;
+        line-height: normal;
+        color: #999;
+        font-family: OPPOSANS;
+      }
+
+      .pay-color {
+        color: #333;
+      }
+    }
+
+    .order-card-footer {
+      height: 100rpx;
+
+      .more-item-box {
+        padding: 20rpx;
+
+        .more-item {
+          height: 60rpx;
+
+          .title {
+            font-size: 26rpx;
+          }
+        }
+      }
+
+      .more-btn {
+        color: $dark-9;
+        font-size: 24rpx;
+      }
+
+      .content {
+        width: 154rpx;
+        color: #333333;
+        font-size: 26rpx;
+        font-weight: 500;
+      }
+    }
+  }
+
+  :deep(.uni-tooltip-popup) {
+    background: var(--ui-BG);
+  }
+
+  .warning-color {
+    color: #faad14;
+  }
+
+  .danger-color {
+    color: #ff3000;
+  }
+
+  .success-color {
+    color: #52c41a;
+  }
+
+  .info-color {
+    color: #999999;
+  }
+</style>
diff --git a/src/pages/order/pickUpVerify.vue b/src/pages/order/pickUpVerify.vue
new file mode 100644
index 00000000..6c365789
--- /dev/null
+++ b/src/pages/order/pickUpVerify.vue
@@ -0,0 +1,260 @@
+<template>
+  <view class="order-details">
+    <!--  自提商品核销  -->
+    <view v-if="orderInfo.deliveryType === 2 && orderInfo.payStatus" class="writeOff borRadius14">
+      <view class="title">核销信息</view>
+      <view class="grayBg flex-center">
+        <view class="pictrue">
+          <image
+            v-if="!!painterImageUrl"
+            :src="painterImageUrl"
+            :style="{ width: `${state.qrcodeSize}px`, height: `${state.qrcodeSize}px` }"
+            :show-menu-by-longpress="true"
+          />
+        </view>
+      </view>
+      <view class="gear">
+        <image :src="sheep.$url.static('/static/img/shop/writeOff.png')"></image>
+      </view>
+      <view class="num">{{ orderInfo.pickUpVerifyCode }}</view>
+      <view class="rules">
+        <view class="item">
+          <view class="rulesTitle flex flex-wrap align-center"> 核销时间 </view>
+          <view class="info">
+            每日：
+            <text class="time">{{ systemStore.openingTime }} - {{ systemStore.closingTime }}</text>
+          </view>
+        </view>
+        <view class="item">
+          <view class="rulesTitle flex flex-wrap align-center">
+            <text class="iconfont icon-shuoming1"></text>
+            使用说明
+          </view>
+          <view class="info">可将二维码出示给店员扫描或提供数字核销码</view>
+        </view>
+      </view>
+    </view>
+    <view
+      v-if="orderInfo.deliveryType === 2"
+      class="map flex flex-wrap align-center ss-row-between borRadius14"
+    >
+      <view>自提地址信息</view>
+      <view class="place cart-color flex flex-wrap flex-center" @tap="showMaoLocation">
+        查看位置
+      </view>
+    </view>
+    <!--  海报画板：默认隐藏只用来生成海报。生成方式为主动调用  -->
+    <l-painter
+      v-if="showPainter"
+      isCanvasToTempFilePath
+      pathType="url"
+      @success="setPainterImageUrl"
+      hidden
+      ref="painterRef"
+    />
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { reactive, ref } from 'vue';
+
+  const props = defineProps({
+    orderInfo: {
+      type: Object,
+      default() {},
+    },
+    systemStore: {
+      type: Object,
+      default() {},
+    },
+  });
+  const state = reactive({
+    qrcodeSize: 145,
+  });
+
+  /**
+   * 打开地图
+   */
+  const showMaoLocation = () => {
+    if (!props.systemStore.latitude || !props.systemStore.longitude) {
+      sheep.$helper.toast('缺少经纬度信息无法查看地图!');
+      return;
+    }
+    uni.openLocation({
+      latitude: props.systemStore.latitude,
+      longitude: props.systemStore.longitude,
+      scale: 8,
+      name: props.systemStore.name,
+      address: props.systemStore.areaName + props.systemStore.detailAddress,
+    });
+  };
+
+  /**
+   * 拨打电话
+   */
+  const makePhone = () => {
+    uni.makePhoneCall({
+      phoneNumber: props.systemStore.phone,
+    });
+  };
+
+  const painterRef = ref(); // 海报画板
+  const painterImageUrl = ref(); // 海报 url
+  const showPainter = ref(true);
+  // 渲染海报
+  const renderPoster = async (poster) => {
+    await painterRef.value.render(poster);
+  };
+  // 获得生成的图片
+  const setPainterImageUrl = (path) => {
+    painterImageUrl.value = path;
+    showPainter.value = false;
+  };
+  /**
+   * 生成核销二维码
+   */
+  const markCode = (text) => {
+    renderPoster({
+      css: {
+        width: `${state.qrcodeSize}px`,
+        height: `${state.qrcodeSize}px`,
+      },
+      views: [
+        {
+          type: 'qrcode',
+          text: text,
+          css: {
+            width: `${state.qrcodeSize}px`,
+            height: `${state.qrcodeSize}px`,
+          },
+        },
+      ],
+    });
+  };
+  defineExpose({
+    markCode,
+  });
+</script>
+
+<style scoped lang="scss">
+  .borRadius14 {
+    border-radius: 14rpx !important;
+  }
+  .cart-color {
+    color: #e93323 !important;
+    border: 1px solid #e93323 !important;
+  }
+  .order-details {
+    border-radius: 10rpx;
+    margin: 0 20rpx 20rpx 20rpx;
+  }
+  .order-details .writeOff {
+    background-color: #fff;
+    margin-top: 15rpx;
+    padding-bottom: 50rpx;
+  }
+
+  .order-details .writeOff .title {
+    font-size: 30rpx;
+    color: #282828;
+    height: 87rpx;
+    border-bottom: 1px solid #f0f0f0;
+    padding: 0 24rpx;
+    line-height: 87rpx;
+  }
+
+  .order-details .writeOff .grayBg {
+    background-color: #f2f5f7;
+    width: 590rpx;
+    height: 384rpx;
+    border-radius: 20rpx 20rpx 0 0;
+    margin: 50rpx auto 0 auto;
+    padding-top: 55rpx;
+  }
+
+  .order-details .writeOff .grayBg .pictrue {
+    width: 290rpx;
+    height: 290rpx;
+  }
+
+  .order-details .writeOff .grayBg .pictrue image {
+    width: 100%;
+    height: 100%;
+  }
+
+  .order-details .writeOff .gear {
+    width: 590rpx;
+    height: 30rpx;
+    margin: 0 auto;
+  }
+
+  .order-details .writeOff .gear image {
+    width: 100%;
+    height: 100%;
+  }
+
+  .order-details .writeOff .num {
+    background-color: #f0c34c;
+    width: 590rpx;
+    height: 84rpx;
+    color: #282828;
+    font-size: 48rpx;
+    margin: 0 auto;
+    border-radius: 0 0 20rpx 20rpx;
+    text-align: center;
+    padding-top: 4rpx;
+  }
+
+  .order-details .writeOff .rules {
+    margin: 46rpx 30rpx 0 30rpx;
+    border-top: 1px solid #f0f0f0;
+    padding-top: 10rpx;
+  }
+
+  .order-details .writeOff .rules .item {
+    margin-top: 20rpx;
+  }
+
+  .order-details .writeOff .rules .item .rulesTitle {
+    font-size: 28rpx;
+    color: #282828;
+  }
+
+  .order-details .writeOff .rules .item .rulesTitle .iconfont {
+    font-size: 30rpx;
+    color: #333;
+    margin-right: 8rpx;
+    margin-top: 5rpx;
+  }
+
+  .order-details .writeOff .rules .item .info {
+    font-size: 28rpx;
+    color: #999;
+    margin-top: 7rpx;
+  }
+
+  .order-details .writeOff .rules .item .info .time {
+    margin-left: 20rpx;
+  }
+
+  .order-details .map {
+    height: 86rpx;
+    font-size: 30rpx;
+    color: #282828;
+    line-height: 86rpx;
+    border-bottom: 1px solid #f0f0f0;
+    margin-top: 15rpx;
+    background-color: #fff;
+    padding: 0 24rpx;
+  }
+
+  .order-details .map .place {
+    font-size: 26rpx;
+    width: 176rpx;
+    height: 50rpx;
+    border-radius: 25rpx;
+    line-height: 50rpx;
+    text-align: center;
+  }
+</style>
diff --git a/src/pages/pay/index.vue b/src/pages/pay/index.vue
new file mode 100644
index 00000000..11069038
--- /dev/null
+++ b/src/pages/pay/index.vue
@@ -0,0 +1,305 @@
+<!-- 收银台 -->
+<template>
+  <s-layout title="收银台">
+    <view class="bg-white ss-modal-box ss-flex-col">
+      <!-- 订单信息 -->
+      <view class="modal-header ss-flex-col ss-col-center ss-row-center">
+        <view class="money-box ss-m-b-20">
+          <text class="money-text">{{ fen2yuan(state.orderInfo.price) }}</text>
+        </view>
+        <view class="time-text">
+          <text>{{ payDescText }}</text>
+        </view>
+      </view>
+
+      <!-- 支付方式 -->
+      <view class="modal-content ss-flex-1">
+        <view class="pay-title ss-p-l-30 ss-m-y-30">选择支付方式</view>
+        <radio-group @change="onTapPay">
+          <label class="pay-type-item" v-for="item in state.payMethods" :key="item.title">
+            <view
+              class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"
+              :class="{ 'disabled-pay-item': item.disabled }"
+            >
+              <view class="ss-flex ss-col-center">
+                <image
+                  class="pay-icon"
+                  v-if="item.disabled"
+                  :src="sheep.$url.static('/static/img/shop/pay/cod_disabled.png')"
+                  mode="aspectFit"
+                />
+                <image
+                  class="pay-icon"
+                  v-else
+                  :src="sheep.$url.static(item.icon)"
+                  mode="aspectFit"
+                />
+                <text class="pay-title">{{ item.title }}</text>
+              </view>
+              <view class="check-box ss-flex ss-col-center ss-p-l-10">
+                <view class="userInfo-money ss-m-r-10" v-if="item.value === 'wallet'">
+                  余额: {{ fen2yuan(userWallet.balance) }}元
+                </view>
+                <radio
+                  :value="item.value"
+                  color="var(--ui-BG-Main)"
+                  style="transform: scale(0.8)"
+                  :disabled="item.disabled"
+                  :checked="state.payment === item.value"
+                />
+              </view>
+            </view>
+          </label>
+        </radio-group>
+      </view>
+
+      <!-- 工具 -->
+      <view class="modal-footer ss-flex ss-row-center ss-col-center ss-m-t-80 ss-m-b-40">
+        <button v-if="state.payStatus === 0" class="ss-reset-button past-due-btn">
+          检测支付环境中
+        </button>
+        <button v-else-if="state.payStatus === -1" class="ss-reset-button past-due-btn" disabled>
+          支付已过期
+        </button>
+        <button
+          v-else
+          class="ss-reset-button save-btn"
+          @tap="onPay"
+          :disabled="state.payStatus !== 1"
+          :class="{ 'disabled-btn': state.payStatus !== 1 }"
+        >
+          立即支付
+        </button>
+      </view>
+    </view>
+  </s-layout>
+</template>
+<script setup>
+  import { computed, reactive } from 'vue';
+  import { onLoad } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import { fen2yuan, useDurationTime } from '@/sheep/hooks/useGoods';
+  import PayOrderApi from '@/sheep/api/pay/order';
+  import PayChannelApi from '@/sheep/api/pay/channel';
+  import { getPayMethods, goPayResult } from '@/sheep/platform/pay';
+
+  const userWallet = computed(() => sheep.$store('user').userWallet);
+
+  // 检测支付环境
+  const state = reactive({
+    orderType: 'goods', // 订单类型; goods - 商品订单, recharge - 充值订单
+    orderInfo: {}, // 支付单信息
+    payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
+    payMethods: [], // 可选的支付方式
+    payment: '', // 选中的支付方式
+  });
+
+  const onPay = () => {
+    if (state.payment === '') {
+      sheep.$helper.toast('请选择支付方式');
+      return;
+    }
+    if (state.payment === 'wallet') {
+      uni.showModal({
+        title: '提示',
+        content: '确定要支付吗?',
+        success: function (res) {
+          if (res.confirm) {
+            sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.id);
+          }
+        },
+      });
+    } else {
+      sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.id);
+    }
+  };
+
+  // 支付文案提示
+  const payDescText = computed(() => {
+    if (state.payStatus === 2) {
+      return '该订单已支付';
+    }
+    if (state.payStatus === 1) {
+      const time = useDurationTime(state.orderInfo.expireTime);
+      if (time.ms <= 0) {
+        state.payStatus = -1;
+        return '';
+      }
+      return `剩余支付时间 ${time.h}:${time.m}:${time.s} `;
+    }
+    if (state.payStatus === -2) {
+      return '未查询到支付单信息';
+    }
+    return '';
+  });
+
+  // 状态转换：payOrder.status => payStatus
+  function checkPayStatus() {
+    if (state.orderInfo.status === 10 || state.orderInfo.status === 20) {
+      // 支付成功
+      state.payStatus = 2;
+      // 跳转回支付成功页
+      uni.showModal({
+        title: '提示',
+        content: '订单已支付',
+        showCancel: false,
+        success: function () {
+          goPayResult(state.orderInfo.id, state.orderType);
+        },
+      });
+      return;
+    }
+    if (state.orderInfo.status === 30) {
+      // 支付关闭
+      state.payStatus = -1;
+      return;
+    }
+    state.payStatus = 1; // 待支付
+  }
+
+  // 切换支付方式
+  function onTapPay(e) {
+    state.payment = e.detail.value;
+  }
+
+  // 设置支付订单信息
+  async function setOrder(id) {
+    // 获得支付订单信息
+    const { data, code } = await PayOrderApi.getOrder(id, true);
+    if (code !== 0 || !data) {
+      state.payStatus = -2;
+      return;
+    }
+    state.orderInfo = data;
+    // 设置支付状态
+    checkPayStatus();
+    // 获得支付方式
+    await setPayMethods();
+  }
+
+  // 获得支付方式
+  async function setPayMethods() {
+    const { data, code } = await PayChannelApi.getEnableChannelCodeList(state.orderInfo.appId);
+    if (code !== 0) {
+      return;
+    }
+    state.payMethods = getPayMethods(data);
+    state.payMethods.find((item) => {
+      if (item.value && !item.disabled) {
+        state.payment = item.value;
+        return true;
+      }
+    });
+  }
+
+  onLoad((options) => {
+    if (
+      sheep.$platform.name === 'WechatOfficialAccount' &&
+      sheep.$platform.os === 'ios' &&
+      !sheep.$platform.landingPage.includes('pages/pay/index')
+    ) {
+      location.reload();
+      return;
+    }
+    // 获得支付订单信息
+    let id = options.id;
+    if (options.orderType) {
+      state.orderType = options.orderType;
+    }
+    setOrder(id);
+    // 刷新钱包的缓存
+    sheep.$store('user').getWallet();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .pay-icon {
+    width: 36rpx;
+    height: 36rpx;
+    margin-right: 26rpx;
+  }
+
+  .ss-modal-box {
+    // max-height: 1000rpx;
+
+    .modal-header {
+      position: relative;
+      padding: 60rpx 20rpx 40rpx;
+
+      .money-text {
+        color: $red;
+        font-size: 46rpx;
+        font-weight: bold;
+        font-family: OPPOSANS;
+
+        &::before {
+          content: '￥';
+          font-size: 30rpx;
+        }
+      }
+
+      .time-text {
+        font-size: 26rpx;
+        color: $gray-b;
+      }
+
+      .close-icon {
+        position: absolute;
+        top: 10rpx;
+        right: 20rpx;
+        font-size: 46rpx;
+        opacity: 0.2;
+      }
+    }
+
+    .modal-content {
+      overflow-y: auto;
+
+      .pay-title {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #333333;
+      }
+
+      .pay-tip {
+        font-size: 26rpx;
+        color: #bbbbbb;
+      }
+
+      .pay-item {
+        height: 86rpx;
+      }
+      .disabled-pay-item {
+        .pay-title {
+          color: #999999;
+        }
+      }
+
+      .userInfo-money {
+        font-size: 26rpx;
+        color: #bbbbbb;
+        line-height: normal;
+      }
+    }
+
+    .save-btn {
+      width: 710rpx;
+      height: 80rpx;
+      border-radius: 40rpx;
+      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+      color: $white;
+    }
+    .disabled-btn {
+      background: #e5e5e5;
+      color: #999999;
+    }
+
+    .past-due-btn {
+      width: 710rpx;
+      height: 80rpx;
+      border-radius: 40rpx;
+      background-color: #999;
+      color: #fff;
+    }
+  }
+</style>
diff --git a/src/pages/pay/recharge-log.vue b/src/pages/pay/recharge-log.vue
new file mode 100644
index 00000000..8de792ac
--- /dev/null
+++ b/src/pages/pay/recharge-log.vue
@@ -0,0 +1,167 @@
+<!-- 充值记录 -->
+<template>
+  <s-layout class="widthdraw-log-wrap" title="充值记录">
+    <!-- 记录卡片 -->
+    <view class="wallet-log-box ss-p-b-30">
+      <view class="log-list" v-for="item in state.pagination.list" :key="item">
+        <view class="head ss-flex ss-col-center ss-row-between">
+          <view class="title">充值金额</view>
+          <view class="num" :class="item.refundStatus === 10 ? 'danger-color' : 'success-color'">
+            {{ fen2yuan(item.payPrice) }} 元
+            <text v-if="item.bonusPrice > 0">（赠送 {{ fen2yuan(item.bonusPrice) }} 元）</text>
+          </view>
+        </view>
+        <view class="status-box item ss-flex ss-col-center ss-row-between">
+          <view class="item-title">支付状态</view>
+          <view
+            class="status-text"
+            :class="item.refundStatus === 10 ? 'danger-color' : 'success-color'"
+          >
+            {{ item.refundStatus === 10 ? '已退款' : '已支付' }}
+          </view>
+        </view>
+        <view class="time-box item ss-flex ss-col-center ss-row-between">
+          <text class="item-title">充值渠道</text>
+          <view class="time ss-ellipsis-1">{{ item.payChannelName }}</view>
+        </view>
+        <view class="time-box item ss-flex ss-col-center ss-row-between">
+          <text class="item-title">充值单号</text>
+          <view class="time"> {{ item.payOrderChannelOrderNo }} </view>
+        </view>
+        <view class="time-box item ss-flex ss-col-center ss-row-between">
+          <text class="item-title">充值时间</text>
+          <view class="time">
+            {{ sheep.$helper.timeFormat(item.payTime, 'yyyy-mm-dd hh:MM:ss') }}</view
+          >
+        </view>
+      </view>
+    </view>
+    <s-empty
+      v-if="state.pagination.total === 0"
+      icon="/static/comment-empty.png"
+      text="暂无充值记录"
+    />
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import _ from 'lodash-es';
+  import PayWalletApi from '@/sheep/api/pay/wallet';
+  import sheep from '@/sheep';
+  import { fen2yuan } from '../../sheep/hooks/useGoods';
+
+  const state = reactive({
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 5,
+    },
+    loadStatus: '',
+  });
+
+  async function getLogList(page = 1, list_rows = 5) {
+    const { code, data } = await PayWalletApi.getWalletRechargePage({
+      pageNo: page,
+      pageSize: list_rows,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getLogList();
+  }
+
+  onLoad(() => {
+    getLogList();
+  });
+
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  // 记录卡片
+  .log-list {
+    min-height: 213rpx;
+    background: $white;
+    margin-bottom: 10rpx;
+    padding-bottom: 10rpx;
+
+    .head {
+      padding: 0 35rpx;
+      height: 80rpx;
+      border-bottom: 1rpx solid $gray-e;
+      margin-bottom: 20rpx;
+
+      .title {
+        font-size: 28rpx;
+        font-weight: 500;
+        color: $dark-3;
+      }
+
+      .num {
+        font-size: 28rpx;
+        font-weight: 500;
+      }
+    }
+
+    .item {
+      padding: 0 30rpx 10rpx;
+
+      .item-icon {
+        color: $gray-d;
+        font-size: 36rpx;
+        margin-right: 8rpx;
+      }
+
+      .item-title {
+        width: 180rpx;
+        font-size: 24rpx;
+        font-weight: 400;
+        color: #666666;
+      }
+
+      .status-text {
+        font-size: 24rpx;
+        font-weight: 500;
+      }
+
+      .time {
+        font-size: 24rpx;
+        font-weight: 400;
+        color: #c0c0c0;
+      }
+    }
+  }
+  .warning-color {
+    color: #faad14;
+  }
+  .danger-color {
+    color: #ff4d4f;
+  }
+  .success-color {
+    color: #67c23a;
+  }
+</style>
diff --git a/src/pages/pay/recharge.vue b/src/pages/pay/recharge.vue
new file mode 100644
index 00000000..4ac646ce
--- /dev/null
+++ b/src/pages/pay/recharge.vue
@@ -0,0 +1,277 @@
+<!-- 充值界面 -->
+<template>
+  <s-layout title="充值" class="withdraw-wrap" navbar="inner">
+    <view
+      class="wallet-num-box ss-flex ss-col-center ss-row-between"
+      :style="[
+        {
+          marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+          paddingTop: Number(statusBarHeight + 108) + 'rpx',
+        },
+      ]"
+    >
+      <view class="">
+        <view class="num-title">当前余额（元）</view>
+        <view class="wallet-num">{{ fen2yuan(userWallet.balance) }}</view>
+      </view>
+      <button class="ss-reset-button log-btn" @tap="sheep.$router.go('/pages/pay/recharge-log')">
+        充值记录
+      </button>
+    </view>
+    <view class="recharge-box">
+      <view class="recharge-card-box">
+        <view class="input-label ss-m-b-50">充值金额</view>
+        <view class="input-box ss-flex border-bottom ss-p-b-20">
+          <view class="unit">￥</view>
+          <uni-easyinput
+            v-model="state.recharge_money"
+            type="digit"
+            placeholder="请输入充值金额"
+            :inputBorder="false"
+          />
+        </view>
+        <view class="face-value-box ss-flex ss-flex-wrap ss-m-y-40">
+          <button
+            class="ss-reset-button face-value-btn"
+            v-for="item in state.packageList"
+            :key="item.money"
+            :class="[{ 'btn-active': state.recharge_money === fen2yuan(item.payPrice) }]"
+            @tap="onCard(item.payPrice)"
+          >
+            <text class="face-value-title">{{ fen2yuan(item.payPrice) }}</text>
+            <view v-if="item.bonusPrice" class="face-value-tag">
+              送 {{ fen2yuan(item.bonusPrice) }} 元
+            </view>
+          </button>
+        </view>
+        <button
+          class="ss-reset-button save-btn ui-BG-Main-Gradient ss-m-t-60 ui-Shadow-Main"
+          @tap="onConfirm"
+        >
+          确认充值
+        </button>
+      </view>
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import { computed, reactive } from 'vue';
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import PayWalletApi from '@/sheep/api/pay/wallet';
+  import { WxaSubscribeTemplate } from '@/sheep/helper/const';
+
+  const userWallet = computed(() => sheep.$store('user').userWallet);
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
+
+  const state = reactive({
+    recharge_money: '', // 输入的充值金额
+    packageList: [],
+  });
+
+  // 点击卡片，选择充值金额
+  function onCard(e) {
+    state.recharge_money = fen2yuan(e);
+  }
+
+  // 获得钱包充值套餐列表
+  async function getRechargeTabs() {
+    const { code, data } = await PayWalletApi.getWalletRechargePackageList();
+    if (code !== 0) {
+      return;
+    }
+    state.packageList = data;
+  }
+
+  // 发起支付
+  async function onConfirm() {
+    const { code, data } = await PayWalletApi.createWalletRecharge({
+      packageId: state.packageList.find((item) => fen2yuan(item.payPrice) === state.recharge_money)
+        ?.id,
+      payPrice: state.recharge_money * 100,
+    });
+    if (code !== 0) {
+      return;
+    }
+    // #ifdef MP
+    sheep.$platform
+      .useProvider('wechat')
+      .subscribeMessage(WxaSubscribeTemplate.PAY_WALLET_RECHARGER_SUCCESS);
+    // #endif
+    sheep.$router.go('/pages/pay/index', {
+      id: data.payOrderId,
+      orderType: 'recharge',
+    });
+  }
+
+  onLoad(() => {
+    getRechargeTabs();
+  });
+</script>
+
+<style lang="scss" scoped>
+  :deep() {
+    .uni-input-input {
+      font-family: OPPOSANS !important;
+    }
+  }
+
+  .wallet-num-box {
+    padding: 0 40rpx 80rpx;
+    background: var(--ui-BG-Main) v-bind(headerBg) center/750rpx 100% no-repeat;
+    border-radius: 0 0 5% 5%;
+
+    .num-title {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: $white;
+      margin-bottom: 20rpx;
+    }
+
+    .wallet-num {
+      font-size: 60rpx;
+      font-weight: 500;
+      color: $white;
+      font-family: OPPOSANS;
+    }
+
+    .log-btn {
+      width: 170rpx;
+      height: 60rpx;
+      line-height: 60rpx;
+      border: 1rpx solid $white;
+      border-radius: 30rpx;
+      padding: 0;
+      font-size: 26rpx;
+      font-weight: 500;
+      color: $white;
+    }
+  }
+
+  .recharge-box {
+    position: relative;
+    padding: 0 30rpx;
+    margin-top: -60rpx;
+  }
+
+  .save-btn {
+    width: 620rpx;
+    height: 86rpx;
+    border-radius: 44rpx;
+    font-size: 30rpx;
+  }
+
+  .recharge-card-box {
+    width: 690rpx;
+    background: var(--ui-BG);
+    border-radius: 20rpx;
+    padding: 30rpx;
+    box-sizing: border-box;
+
+    .input-label {
+      font-size: 30rpx;
+      font-weight: 500;
+      color: #333;
+    }
+
+    .unit {
+      display: flex;
+      align-items: center;
+      font-size: 48rpx;
+      font-weight: 500;
+    }
+
+    .uni-easyinput__placeholder-class {
+      font-size: 30rpx;
+      height: 60rpx;
+      display: flex;
+      align-items: center;
+    }
+
+    :deep(.uni-easyinput__content-input) {
+      font-size: 48rpx;
+    }
+
+    .face-value-btn {
+      width: 200rpx;
+      height: 144rpx;
+      border: 1px solid var(--ui-BG-Main);
+      border-radius: 10rpx;
+      position: relative;
+      z-index: 1;
+      margin-bottom: 15rpx;
+      margin-right: 15rpx;
+
+      &:nth-of-type(3n) {
+        margin-right: 0;
+      }
+
+      .face-value-title {
+        font-size: 36rpx;
+        font-weight: 500;
+        color: var(--ui-BG-Main);
+        font-family: OPPOSANS;
+
+        &::after {
+          content: '元';
+          font-size: 24rpx;
+          margin-left: 6rpx;
+        }
+      }
+
+      .face-value-tag {
+        position: absolute;
+        z-index: 2;
+        height: 40rpx;
+        line-height: 40rpx;
+        background: var(--ui-BG-Main);
+        opacity: 0.8;
+        border-radius: 10rpx 0 20rpx 0;
+        top: 0;
+        left: -2rpx;
+        padding: 0 16rpx;
+        font-size: 22rpx;
+        color: $white;
+        font-family: OPPOSANS;
+      }
+
+      &::before {
+        position: absolute;
+        content: ' ';
+        width: 100%;
+        height: 100%;
+        background: var(--ui-BG-Main);
+        opacity: 0.1;
+        z-index: 0;
+        left: 0;
+        top: 0;
+      }
+    }
+
+    .btn-active {
+      z-index: 1;
+
+      &::before {
+        content: '';
+        background: var(--ui-BG-Main);
+        opacity: 1;
+      }
+
+      .face-value-title {
+        color: $white;
+        position: relative;
+        z-index: 1;
+        font-family: OPPOSANS;
+      }
+
+      .face-value-tag {
+        background: $white;
+        color: var(--ui-BG-Main);
+        font-family: OPPOSANS;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/pay/result.vue b/src/pages/pay/result.vue
new file mode 100644
index 00000000..145a4317
--- /dev/null
+++ b/src/pages/pay/result.vue
@@ -0,0 +1,339 @@
+<!-- 支付结果页面 -->
+<template>
+  <s-layout :bgStyle="{ color: '#FFF' }" title="支付结果">
+    <view class="pay-result-box ss-flex-col ss-row-center ss-col-center">
+      <!-- 信息展示 -->
+      <view class="pay-waiting ss-m-b-30" v-if="payResult === 'waiting'" />
+      <image
+        class="pay-img ss-m-b-30"
+        v-if="payResult === 'success'"
+        :src="sheep.$url.static('/static/img/shop/order/order_pay_success.gif')"
+      />
+      <image
+        class="pay-img ss-m-b-30"
+        v-if="['failed', 'closed'].includes(payResult)"
+        :src="sheep.$url.static('/static/img/shop/order/order_paty_fail.gif')"
+      />
+      <view class="tip-text ss-m-b-30" v-if="payResult === 'success'">支付成功</view>
+      <view class="tip-text ss-m-b-30" v-if="payResult === 'failed'">支付失败</view>
+      <view class="tip-text ss-m-b-30" v-if="payResult === 'closed'">该订单已关闭</view>
+      <view class="tip-text ss-m-b-30" v-if="payResult === 'waiting'">正在查询支付结果...</view>
+      <view class="pay-total-num ss-flex" v-if="payResult === 'success'">
+        <view>￥{{ fen2yuan(state.orderInfo.price) }}</view>
+      </view>
+
+      <!-- 操作区 -->
+      <view class="btn-box ss-flex ss-row-center ss-m-t-50">
+        <button class="back-btn ss-reset-button" @tap="sheep.$router.go('/pages/index/index')">
+          返回首页
+        </button>
+        <button
+          class="check-btn ss-reset-button"
+          v-if="payResult === 'failed'"
+          @tap="
+            sheep.$router.redirect('/pages/pay/index', { id: state.id, orderType: state.orderType })
+          "
+        >
+          重新支付
+        </button>
+        <button class="check-btn ss-reset-button" v-if="payResult === 'success'" @tap="onOrder">
+          查看订单
+        </button>
+        <button
+          class="check-btn ss-reset-button"
+          v-if="payResult === 'success' && state.tradeOrder.type === 3"
+          @tap="sheep.$router.redirect('/pages/activity/groupon/order')"
+        >
+          我的拼团
+        </button>
+      </view>
+
+      <!-- #ifdef MP -->
+      <view
+        class="subscribe-box ss-flex ss-m-t-44"
+        v-if="showSubscribeBtn && state.orderType === 'goods'"
+      >
+        <image class="subscribe-img" :src="sheep.$url.static('/static/img/shop/order/cargo.png')" />
+        <view class="subscribe-title ss-m-r-48 ss-m-l-16">获取实时发货信息与订单状态</view>
+        <view class="subscribe-start" @tap="subscribeMessage">立即订阅</view>
+      </view>
+      <!-- #endif -->
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import { onHide, onLoad, onShow } from '@dcloudio/uni-app';
+  import { computed, reactive, ref } from 'vue';
+  import { isEmpty } from 'lodash-es';
+  import sheep from '@/sheep';
+  import PayOrderApi from '@/sheep/api/pay/order';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import OrderApi from '@/sheep/api/trade/order';
+  import { WxaSubscribeTemplate } from '@/sheep/helper/const';
+
+  const state = reactive({
+    id: 0, // 支付单号
+    orderType: 'goods', // 订单类型
+    result: 'unpaid', // 支付状态
+    orderInfo: {}, // 支付订单信息
+    tradeOrder: {}, // 商品订单信息，只有在 orderType 为 goods 才会请求。目的：【我的拼团】按钮的展示
+    counter: 0, // 获取结果次数
+  });
+
+  // 支付结果 result => payResult
+  const payResult = computed(() => {
+    if (state.result === 'unpaid') {
+      return 'waiting';
+    }
+    if (state.result === 'paid') {
+      return 'success';
+    }
+    if (state.result === 'failed') {
+      return 'failed';
+    }
+    if (state.result === 'closed') {
+      return 'closed';
+    }
+  });
+
+  function showRepayModal() {
+    if (state.result !== 'failed') return;
+    uni.showModal({
+      title: '确认支付',
+      content: '未检测到您的支付结果,请确认您是否已经支付完成？',
+      cancelText: '取消',
+      confirmText: '我已支付',
+      success: function (res) {
+        if (res.confirm) {
+          state.counter = 0;
+          setTimeout(() => {
+            getOrderInfo(state.id);
+          }, 100);
+        }
+      },
+    });
+  }
+
+  // 获得订单信息
+  async function getOrderInfo(id) {
+    state.counter++;
+    // 1. 加载订单信息
+    const { data, code } = await PayOrderApi.getOrder(id, true);
+    if (code === 0) {
+      state.orderInfo = data;
+      if (!state.orderInfo || state.orderInfo.status === 30) {
+        // 支付关闭
+        state.result = 'closed';
+        return;
+      }
+      if (state.orderInfo.status !== 0) {
+        // 非待支付，可能是已支付，可能是已退款
+        state.result = 'paid';
+        // #ifdef MP
+        uni.showModal({
+          title: '支付结果',
+          showCancel: false, // 不要取消按钮
+          content: '支付成功',
+          success: () => {
+            // 订阅只能由用户主动触发，只能包一层 showModal 诱导用户点击
+            autoSubscribeMessage();
+          },
+        });
+
+        // #endif
+        // 特殊：获得商品订单信息
+        if (state.orderType === 'goods') {
+          const { data, code } = await OrderApi.getOrderDetail(
+            state.orderInfo.merchantOrderId,
+            true,
+          );
+          if (code === 0) {
+            state.tradeOrder = data;
+          }
+        }
+        return;
+      }
+    }
+    // 2.1 情况三一：未支付，且轮询次数小于五次，则继续轮询
+    if (state.counter < 5 && state.result === 'unpaid') {
+      setTimeout(() => {
+        getOrderInfo(id);
+      }, 2000);
+    }
+    // 2.2 情况二：超过五次检测才判断为支付失败
+    if (state.counter >= 5) {
+      state.result = 'failed';
+      showRepayModal();
+    }
+  }
+
+  function onOrder() {
+    if (state.orderType === 'recharge') {
+      sheep.$router.redirect('/pages/pay/recharge-log');
+    } else {
+      sheep.$router.redirect('/pages/order/list');
+    }
+  }
+
+  // #ifdef MP
+  const showSubscribeBtn = ref(false); // 默认隐藏
+  const SUBSCRIBE_BTN_STATUS_STORAGE_KEY = 'subscribe_btn_status';
+  function subscribeMessage() {
+    if (state.orderType !== 'goods') {
+      return;
+    }
+    const event = [WxaSubscribeTemplate.TRADE_ORDER_DELIVERY];
+    if (state.tradeOrder.type === 3) {
+      event.push(WxaSubscribeTemplate.PROMOTION_COMBINATION_SUCCESS);
+    }
+    sheep.$platform.useProvider('wechat').subscribeMessage(event, () => {
+      // 订阅后记录一下订阅状态
+      uni.removeStorageSync(SUBSCRIBE_BTN_STATUS_STORAGE_KEY);
+      uni.setStorageSync(SUBSCRIBE_BTN_STATUS_STORAGE_KEY, '已订阅');
+      // 隐藏订阅按钮
+      showSubscribeBtn.value = false;
+    });
+  }
+  async function autoSubscribeMessage() {
+    // 1. 校验是否手动订阅过
+    const subscribeBtnStatus = uni.getStorageSync(SUBSCRIBE_BTN_STATUS_STORAGE_KEY);
+    if (!subscribeBtnStatus) {
+      showSubscribeBtn.value = true;
+      return;
+    }
+
+    // 2. 订阅消息
+    subscribeMessage();
+  }
+  // #endif
+
+  onLoad(async (options) => {
+    // 支付订单号
+    if (options.id) {
+      state.id = options.id;
+    }
+    // 订单类型
+    if (options.orderType) {
+      state.orderType = options.orderType;
+    }
+
+    // 支付结果传值过来是失败，则直接显示失败界面
+    if (options.payState === 'fail') {
+      state.result = 'failed';
+    } else {
+      // 轮询五次检测订单支付结果
+      await getOrderInfo(state.id);
+    }
+  });
+
+  onShow(() => {
+    if (isEmpty(state.orderInfo)) {
+      return;
+    }
+    getOrderInfo(state.id);
+  });
+
+  onHide(() => {
+    state.result = 'unpaid';
+    state.counter = 0;
+  });
+</script>
+
+<style lang="scss" scoped>
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .score-img {
+    width: 36rpx;
+    height: 36rpx;
+    margin: 0 4rpx;
+  }
+
+  .pay-result-box {
+    padding: 60rpx 0;
+
+    .pay-waiting {
+      margin-top: 20rpx;
+      width: 60rpx;
+      height: 60rpx;
+      border: 10rpx solid rgb(233, 231, 231);
+      border-bottom-color: rgb(204, 204, 204);
+      border-radius: 50%;
+      display: inline-block;
+      // -webkit-animation: rotation 1s linear infinite;
+      animation: rotation 1s linear infinite;
+    }
+
+    .pay-img {
+      width: 130rpx;
+      height: 130rpx;
+    }
+
+    .tip-text {
+      font-size: 30rpx;
+      font-weight: bold;
+      color: #333333;
+    }
+
+    .pay-total-num {
+      font-size: 36rpx;
+      font-weight: 500;
+      color: #333333;
+      font-family: OPPOSANS;
+    }
+
+    .btn-box {
+      width: 100%;
+
+      .back-btn {
+        width: 190rpx;
+        height: 70rpx;
+        font-size: 28rpx;
+        border: 2rpx solid #dfdfdf;
+        border-radius: 35rpx;
+        font-weight: 400;
+        color: #595959;
+      }
+
+      .check-btn {
+        width: 190rpx;
+        height: 70rpx;
+        font-size: 28rpx;
+        border: 2rpx solid #dfdfdf;
+        border-radius: 35rpx;
+        font-weight: 400;
+        color: #595959;
+        margin-left: 32rpx;
+      }
+    }
+
+    .subscribe-box {
+      .subscribe-img {
+        width: 44rpx;
+        height: 44rpx;
+      }
+
+      .subscribe-title {
+        font-weight: 500;
+        font-size: 32rpx;
+        line-height: 36rpx;
+        color: #434343;
+      }
+
+      .subscribe-start {
+        color: var(--ui-BG-Main);
+        font-weight: 700;
+        font-size: 32rpx;
+        line-height: 36rpx;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/public/error.vue b/src/pages/public/error.vue
new file mode 100644
index 00000000..3f208789
--- /dev/null
+++ b/src/pages/public/error.vue
@@ -0,0 +1,60 @@
+<!-- 错误界面 -->
+<template>
+  <view class="error-page">
+    <s-empty
+      v-if="errCode === 'NetworkError'"
+      icon="/static/internet-empty.png"
+      text="网络连接失败"
+      showAction
+      actionText="重新连接"
+      @clickAction="onReconnect"
+      buttonColor="#ff3000"
+    />
+    <s-empty
+      v-else-if="errCode === 'TemplateError'"
+      icon="/static/internet-empty.png"
+      text="未找到模板,请前往后台启用对应模板"
+      showAction
+      actionText="重新加载"
+      @clickAction="onReconnect"
+      buttonColor="#ff3000"
+    />
+    <s-empty
+      v-else-if="errCode !== ''"
+      icon="/static/internet-empty.png"
+      :text="errMsg"
+      showAction
+      actionText="重新加载"
+      @clickAction="onReconnect"
+      buttonColor="#ff3000"
+    />
+  </view>
+</template>
+
+<script setup>
+  import { onLoad } from '@dcloudio/uni-app';
+  import { ref } from 'vue';
+  import { ShoproInit } from '@/sheep';
+
+  const errCode = ref('');
+  const errMsg = ref('');
+
+  onLoad((options) => {
+    errCode.value = options.errCode;
+    errMsg.value = options.errMsg;
+  });
+
+  // 重新连接
+  async function onReconnect() {
+    uni.reLaunch({
+      url: '/pages/index/index',
+    });
+    await ShoproInit();
+  }
+</script>
+
+<style lang="scss" scoped>
+  .error-page {
+    width: 100%;
+  }
+</style>
diff --git a/src/pages/public/faq.vue b/src/pages/public/faq.vue
new file mode 100644
index 00000000..627f4d5a
--- /dev/null
+++ b/src/pages/public/faq.vue
@@ -0,0 +1,118 @@
+<!-- FAQ 常见问题 -->
+<template>
+  <s-layout :bgStyle="{ color: '#FFF' }" class="set-wrap" title="常见问题">
+    <uni-collapse>
+      <uni-collapse-item v-for="(item, index) in state.list" :key="item">
+        <template v-slot:title>
+          <view class="ss-flex ss-col-center header">
+            <view class="ss-m-l-20 ss-m-r-20 icon">
+              <view class="rectangle">
+                <view class="num ss-flex ss-row-center ss-col-center">
+                  {{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }}
+                </view>
+              </view>
+              <view class="triangle"> </view>
+            </view>
+            <view class="title ss-m-t-36 ss-m-b-36">
+              {{ item.title }}
+            </view>
+          </view>
+        </template>
+        <view class="content ss-p-l-78 ss-p-r-40 ss-p-b-50 ss-p-t-20">
+          <text class="text">{{ item.content }}</text>
+        </view>
+      </uni-collapse-item>
+    </uni-collapse>
+    <s-empty
+      v-if="state.list.length === 0 && !state.loading"
+      text="暂无常见问题"
+      icon="/static/collect-empty.png"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import { onLoad } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import sheep from '@/sheep';
+
+  const state = reactive({
+    list: [],
+    loading: true,
+  });
+
+  async function getFaqList() {
+    const { error, data } = await sheep.$api.data.faq();
+    if (error === 0) {
+      state.list = data;
+      state.loading = false;
+    }
+  }
+  onLoad(() => {
+    // TODO 芋艿：【文章】目前简单做，使用营销文章，作为 faq
+    if (true) {
+      sheep.$router.go('/pages/public/richtext', {
+        title: '常见问题',
+      })
+      return;
+    }
+    getFaqList();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .header {
+    .title {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #333333;
+      line-height: 30rpx;
+      max-width: 688rpx;
+    }
+
+    .icon {
+      position: relative;
+      width: 40rpx;
+      height: 40rpx;
+
+      .rectangle {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 40rpx;
+        height: 36rpx;
+        background: var(--ui-BG-Main);
+        border-radius: 4px;
+
+        .num {
+          width: 100%;
+          height: 100%;
+          font-size: 24rpx;
+          font-weight: 500;
+          color: var(--ui-BG);
+          line-height: 32rpx;
+        }
+      }
+
+      .triangle {
+        width: 0;
+        height: 0;
+        border-left: 4rpx solid transparent;
+        border-right: 4rpx solid transparent;
+        border-top: 8rpx solid var(--ui-BG-Main);
+        position: absolute;
+        left: 16rpx;
+        bottom: -4rpx;
+      }
+    }
+  }
+
+  .content {
+    border-bottom: 1rpx solid #dfdfdf;
+
+    .text {
+      font-size: 26rpx;
+      color: #666666;
+    }
+  }
+</style>
diff --git a/src/pages/public/richtext.vue b/src/pages/public/richtext.vue
new file mode 100644
index 00000000..b1fee463
--- /dev/null
+++ b/src/pages/public/richtext.vue
@@ -0,0 +1,54 @@
+<!-- 文章展示 -->
+<template>
+  <s-layout :bgStyle="{ color: '#FFF' }" :title="state.title" class="set-wrap">
+    <view class="ss-p-30 richtext"><mp-html :content="state.content"></mp-html></view>
+  </s-layout>
+</template>
+
+<script setup>
+  import { onLoad } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import ArticleApi from '@/sheep/api/promotion/article';
+
+  const state = reactive({
+    title: '',
+    content: '',
+  });
+
+  async function getRichTextContent(id, title) {
+    const { code, data } = await ArticleApi.getArticle(id, title);
+    if (code !== 0) {
+      return;
+    }
+    state.content = data.content;
+    // 标题不一致时，修改标题
+    if (state.title !== data.title) {
+      state.title = data.title;
+      uni.setNavigationBarTitle({
+        title: state.title,
+      });
+    }
+  }
+
+  onLoad((options) => {
+    if (options.title) {
+      state.title = options.title;
+      uni.setNavigationBarTitle({
+        title: state.title,
+      });
+    }
+    getRichTextContent(options.id, options.title);
+  });
+</script>
+
+<style lang="scss" scoped>
+  .set-title {
+    margin: 0 30rpx;
+  }
+
+  :deep() {
+    image {
+      display: block;
+    }
+  }
+</style>
diff --git a/src/pages/public/setting.vue b/src/pages/public/setting.vue
new file mode 100644
index 00000000..34da0dff
--- /dev/null
+++ b/src/pages/public/setting.vue
@@ -0,0 +1,236 @@
+<template>
+  <s-layout :bgStyle="{ color: '#fff' }" class="set-wrap" title="系统设置">
+    <view class="header-box ss-flex-col ss-row-center ss-col-center">
+      <image
+        class="logo-img ss-m-b-46"
+        :src="sheep.$url.cdn(appInfo.logo)"
+        mode="aspectFit"
+      ></image>
+      <view class="name ss-m-b-24">{{ appInfo.name }}</view>
+    </view>
+
+    <view class="container-list">
+      <uni-list :border="false">
+        <uni-list-item
+          title="当前版本"
+          :rightText="appInfo.version"
+          showArrow
+          clickable
+          :border="false"
+          class="list-border"
+          @tap="onCheckUpdate"
+        />
+        <uni-list-item
+          title="本地缓存"
+          :rightText="storageSize"
+          showArrow
+          :border="false"
+          class="list-border"
+        />
+        <uni-list-item
+          title="关于我们"
+          showArrow
+          clickable
+          :border="false"
+          class="list-border"
+          @tap="
+            sheep.$router.go('/pages/public/richtext', {
+              title: '关于我们'
+            })
+          "
+        />
+        <!-- 为了过审 只有 iOS-App 有注销账号功能 -->
+        <uni-list-item
+          v-if="isLogin && sheep.$platform.os === 'ios' && sheep.$platform.name === 'App'"
+          title="注销账号"
+          rightText=""
+          showArrow
+          clickable
+          :border="false"
+          class="list-border"
+          @click="onLogoff"
+        />
+      </uni-list>
+    </view>
+    <view class="set-footer ss-flex-col ss-row-center ss-col-center">
+      <view class="agreement-box ss-flex ss-col-center ss-m-b-40">
+        <view class="ss-flex ss-col-center ss-m-b-10">
+          <view
+            class="tcp-text"
+            @tap="
+              sheep.$router.go('/pages/public/richtext', {
+                title: '用户协议'
+              })
+            "
+          >
+            《用户协议》
+          </view>
+          <view class="agreement-text">与</view>
+          <view
+            class="tcp-text"
+            @tap="
+              sheep.$router.go('/pages/public/richtext', {
+                title: '隐私协议'
+              })
+            "
+          >
+            《隐私协议》
+          </view>
+        </view>
+      </view>
+      <view class="copyright-text ss-m-b-10">{{ appInfo.copyright }}</view>
+      <view class="copyright-text">{{ appInfo.copytime }}</view>
+    </view>
+    <su-fixed bottom placeholder>
+      <view class="ss-p-x-20 ss-p-b-40">
+        <button
+          class="loginout-btn ss-reset-button ui-BG-Main ui-Shadow-Main"
+          @tap="onLogout"
+          v-if="isLogin"
+        >
+          退出登录
+        </button>
+      </view>
+    </su-fixed>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { computed, reactive } from 'vue';
+  import AuthUtil from '@/sheep/api/member/auth';
+
+  const appInfo = computed(() => sheep.$store('app').info);
+  const isLogin = computed(() => sheep.$store('user').isLogin);
+  const storageSize = uni.getStorageInfoSync().currentSize + 'Kb';
+  const state = reactive({
+    showModal: false,
+  });
+
+  function onCheckUpdate() {
+    sheep.$platform.checkUpdate();
+    // 小程序初始化时已检查更新
+    // H5实时更新无需检查
+    // App 1.跳转应用市场更新 2.手动热更新 3.整包更新
+  }
+
+  // 注销账号
+  function onLogoff() {
+    uni.showModal({
+      title: '提示',
+      content: '确认注销账号？',
+      success: async function (res) {
+        if (!res.confirm) {
+          return;
+        }
+        const { code } = await AuthUtil.logout();
+        if (code !== 0) {
+          return;
+        }
+        sheep.$store('user').logout();
+        sheep.$router.go('/pages/index/user');
+      },
+    });
+  }
+
+  // 退出账号
+  function onLogout() {
+    uni.showModal({
+      title: '提示',
+      content: '确认退出账号？',
+      success: async function (res) {
+        if (!res.confirm) {
+          return;
+        }
+        const { code } = await AuthUtil.logout();
+        if (code !== 0) {
+          return;
+        }
+        sheep.$store('user').logout();
+        sheep.$router.go('/pages/index/user');
+      },
+    });
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container-list {
+    width: 100%;
+  }
+
+  .set-title {
+    margin: 0 30rpx;
+  }
+
+  .header-box {
+    padding: 100rpx 0;
+
+    .logo-img {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 50%;
+    }
+
+    .name {
+      font-size: 42rpx;
+      font-weight: 400;
+      color: $dark-3;
+    }
+
+    .version {
+      font-size: 32rpx;
+      font-weight: 500;
+      line-height: 32rpx;
+      color: $gray-b;
+    }
+  }
+
+  .set-footer {
+    margin: 100rpx 0 0 0;
+
+    .copyright-text {
+      font-size: 22rpx;
+      font-weight: 500;
+      color: $gray-c;
+      line-height: 30rpx;
+    }
+
+    .agreement-box {
+      font-size: 26rpx;
+      font-weight: 500;
+
+      .tcp-text {
+        color: var(--ui-BG-Main);
+      }
+
+      .agreement-text {
+        color: $dark-9;
+      }
+    }
+  }
+
+  .loginout-btn {
+    width: 100%;
+    height: 80rpx;
+    border-radius: 40rpx;
+    font-size: 30rpx;
+  }
+
+  .list-border {
+    font-size: 28rpx;
+    font-weight: 400;
+    color: #333333;
+    border-bottom: 2rpx solid #eeeeee;
+  }
+
+  :deep(.uni-list-item__content-title) {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #333;
+  }
+
+  :deep(.uni-list-item__extra-text) {
+    color: #bbbbbb;
+    font-size: 28rpx;
+  }
+</style>
diff --git a/src/pages/public/webview.vue b/src/pages/public/webview.vue
new file mode 100644
index 00000000..13272954
--- /dev/null
+++ b/src/pages/public/webview.vue
@@ -0,0 +1,18 @@
+<!-- 网页加载 -->
+<template>
+  <view>
+    <web-view :src="url" />
+  </view>
+</template>
+
+<script setup>
+  import { onLoad } from '@dcloudio/uni-app';
+  import { ref } from 'vue';
+
+  const url = ref('');
+  onLoad((options) => {
+    url.value = decodeURIComponent(options.url);
+  });
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/pages/user/address/edit.vue b/src/pages/user/address/edit.vue
new file mode 100644
index 00000000..b88ee079
--- /dev/null
+++ b/src/pages/user/address/edit.vue
@@ -0,0 +1,305 @@
+<!-- 收货地址的新增/编辑 -->
+<template>
+  <s-layout :title="state.model.id ? '编辑地址' : '新增地址'">
+    <uni-forms
+      ref="addressFormRef"
+      v-model="state.model"
+      :rules="rules"
+      validateTrigger="bind"
+      labelWidth="160"
+      labelAlign="left"
+      border
+      :labelStyle="{ fontWeight: 'bold' }"
+    >
+      <view class="bg-white form-box ss-p-x-30">
+        <uni-forms-item name="name" label="收货人" class="form-item">
+          <uni-easyinput
+            v-model="state.model.name"
+            placeholder="请填写收货人姓名"
+            :inputBorder="false"
+            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
+          />
+        </uni-forms-item>
+
+        <uni-forms-item name="mobile" label="手机号" class="form-item">
+          <uni-easyinput
+            v-model="state.model.mobile"
+            type="number"
+            placeholder="请输入手机号"
+            :inputBorder="false"
+            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
+          >
+          </uni-easyinput>
+        </uni-forms-item>
+        <uni-forms-item
+          name="areaName"
+          label="省市区"
+          @tap="state.showRegion = true"
+          class="form-item"
+        >
+          <uni-easyinput
+            v-model="state.model.areaName"
+            disabled
+            :inputBorder="false"
+            :styles="{ disableColor: '#fff', color: '#333' }"
+            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
+            placeholder="请选择省市区"
+          >
+            <template v-slot:right>
+              <uni-icons type="right" />
+            </template>
+          </uni-easyinput>
+        </uni-forms-item>
+        <uni-forms-item
+          name="detailAddress"
+          label="详细地址"
+          :formItemStyle="{ alignItems: 'flex-start' }"
+          :labelStyle="{ lineHeight: '5em' }"
+          class="textarea-item"
+        >
+          <uni-easyinput
+            :inputBorder="false"
+            type="textarea"
+            v-model="state.model.detailAddress"
+            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
+            placeholder="请输入详细地址"
+            clearable
+          />
+        </uni-forms-item>
+      </view>
+      <view class="ss-m-y-20 bg-white ss-p-x-30 ss-flex ss-row-between ss-col-center default-box">
+        <view class="default-box-title"> 设为默认地址 </view>
+        <su-switch style="transform: scale(0.8)" v-model="state.model.defaultStatus" />
+      </view>
+    </uni-forms>
+    <su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
+      <view class="footer-box ss-flex-col ss-row-between ss-p-20">
+        <view class="ss-m-b-20">
+          <button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">保存</button>
+        </view>
+        <button v-if="state.model.id" class="ss-reset-button cancel-btn" @tap="onDelete">
+          删除
+        </button>
+      </view>
+    </su-fixed>
+
+    <!-- 省市区弹窗 -->
+    <su-region-picker
+      :show="state.showRegion"
+      @cancel="state.showRegion = false"
+      @confirm="onRegionConfirm"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import { ref, reactive, unref } from 'vue';
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import _ from 'lodash-es';
+  import { mobile } from '@/sheep/validate/form';
+  import AreaApi from '@/sheep/api/system/area';
+  import AddressApi from '@/sheep/api/member/address';
+
+  const addressFormRef = ref(null);
+  const state = reactive({
+    showRegion: false,
+    model: {
+      name: '',
+      mobile: '',
+      detailAddress: '',
+      defaultStatus: false,
+      areaName: '',
+    },
+    rules: {},
+  });
+
+  const rules = {
+    name: {
+      rules: [
+        {
+          required: true,
+          errorMessage: '请输入收货人姓名',
+        },
+      ],
+    },
+    mobile,
+    detailAddress: {
+      rules: [
+        {
+          required: true,
+          errorMessage: '请输入详细地址',
+        },
+      ],
+    },
+    areaName: {
+      rules: [
+        {
+          required: true,
+          errorMessage: '请选择您的位置',
+        },
+      ],
+    },
+  };
+
+  // 确认选择地区
+  const onRegionConfirm = (e) => {
+    state.model.areaName = `${e.province_name} ${e.city_name} ${e.district_name}`;
+    state.model.areaId = e.district_id;
+    state.showRegion = false;
+  };
+
+  // 获得地区数据
+  const getAreaData = () => {
+    if (_.isEmpty(uni.getStorageSync('areaData'))) {
+      AreaApi.getAreaTree().then((res) => {
+        if (res.code === 0) {
+          uni.setStorageSync('areaData', res.data);
+        }
+      });
+    }
+  };
+
+  // 保存收货地址
+  const onSave = async () => {
+    // 参数校验
+    const validate = await unref(addressFormRef)
+      .validate()
+      .catch((error) => {
+        console.log('error: ', error);
+      });
+    if (!validate) {
+      return;
+    }
+
+    // 提交请求
+    const formData = {
+      ...state.model,
+    };
+    const { code } =
+      state.model.id > 0
+        ? await AddressApi.updateAddress(formData)
+        : await AddressApi.createAddress(formData);
+    if (code === 0) {
+      sheep.$router.back();
+    }
+  };
+
+  // 删除收货地址
+  const onDelete = () => {
+    uni.showModal({
+      title: '提示',
+      content: '确认删除此收货地址吗？',
+      success: async function (res) {
+        if (!res.confirm) {
+          return;
+        }
+        const { code } = await AddressApi.deleteAddress(state.model.id);
+        if (code === 0) {
+          sheep.$router.back();
+        }
+      },
+    });
+  };
+
+  onLoad(async (options) => {
+    // 获得地区数据
+    getAreaData();
+    // 情况一：基于 id 获得收件地址
+    if (options.id) {
+      let { code, data } = await AddressApi.getAddress(options.id);
+      if (code !== 0) {
+        return;
+      }
+      state.model = data;
+    }
+    // 情况二：微信导入
+    if (options.data) {
+      let data = JSON.parse(options.data);
+      const areaData = uni.getStorageSync('areaData');
+      const findAreaByName = (areas, name) => areas.find((item) => item.name === name);
+
+      let provinceObj = findAreaByName(areaData, data.province_name);
+      let cityObj = provinceObj ? findAreaByName(provinceObj.children, data.city_name) : undefined;
+      let districtObj = cityObj ? findAreaByName(cityObj.children, data.district_name) : undefined;
+      let areaId = (districtObj || cityObj || provinceObj).id;
+
+      state.model = {
+        ...state.model,
+        areaId,
+        areaName: [data.province_name, data.city_name, data.district_name]
+          .filter(Boolean)
+          .join(' '),
+        defaultStatus: false,
+        detailAddress: data.address,
+        mobile: data.mobile,
+        name: data.consignee,
+      };
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  :deep() {
+    .uni-forms-item__label .label-text {
+      font-size: 28rpx !important;
+      color: #333333 !important;
+      line-height: normal !important;
+    }
+
+    .uni-easyinput__content-input {
+      font-size: 28rpx !important;
+      color: #333333 !important;
+      line-height: normal !important;
+      padding-left: 0 !important;
+    }
+
+    .uni-easyinput__content-textarea {
+      font-size: 28rpx !important;
+      color: #333333 !important;
+      line-height: normal !important;
+      margin-top: 8rpx !important;
+    }
+
+    .uni-icons {
+      font-size: 40rpx !important;
+    }
+
+    .is-textarea-icon {
+      margin-top: 22rpx;
+    }
+
+    .is-disabled {
+      color: #333333;
+    }
+  }
+
+  .default-box {
+    width: 100%;
+    box-sizing: border-box;
+    height: 100rpx;
+
+    .default-box-title {
+      font-size: 28rpx;
+      color: #333333;
+      line-height: normal;
+    }
+  }
+
+  .footer-box {
+    .save-btn {
+      width: 710rpx;
+      height: 80rpx;
+      border-radius: 40rpx;
+      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+      color: $white;
+    }
+
+    .cancel-btn {
+      width: 710rpx;
+      height: 80rpx;
+      border-radius: 40rpx;
+      background: var(--ui-BG);
+    }
+  }
+</style>
diff --git a/src/pages/user/address/list.vue b/src/pages/user/address/list.vue
new file mode 100644
index 00000000..15ce34ef
--- /dev/null
+++ b/src/pages/user/address/list.vue
@@ -0,0 +1,165 @@
+<!-- 收件地址列表 -->
+<template>
+  <s-layout :bgStyle="{ color: '#FFF' }" title="收货地址">
+    <view v-if="state.list.length">
+      <s-address-item
+        hasBorderBottom
+        v-for="item in state.list"
+        :key="item.id"
+        :item="item"
+        @tap="onSelect(item)"
+      />
+    </view>
+
+    <su-fixed bottom placeholder>
+      <view class="footer-box ss-flex ss-row-between ss-p-20">
+        <!-- 微信小程序和微信H5 -->
+        <button
+          v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes(sheep.$platform.name)"
+          @tap="importWechatAddress"
+          class="border ss-reset-button sync-wxaddress ss-m-20 ss-flex ss-row-center ss-col-center"
+        >
+          <text class="cicon-weixin ss-p-r-10" style="color: #09bb07; font-size: 40rpx"></text>
+          导入微信地址
+        </button>
+        <button
+          class="add-btn ss-reset-button ui-Shadow-Main"
+          @tap="sheep.$router.go('/pages/user/address/edit')"
+        >
+          新增收货地址
+        </button>
+      </view>
+    </su-fixed>
+    <s-empty
+      v-if="state.list.length === 0 && !state.loading"
+      text="暂无收货地址"
+      icon="/static/data-empty.png"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import { onBeforeMount, reactive } from 'vue';
+  import { onLoad, onShow } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import { isEmpty } from 'lodash-es';
+  import AreaApi from '@/sheep/api/system/area';
+  import AddressApi from '@/sheep/api/member/address';
+
+  const state = reactive({
+    list: [], // 地址列表
+    loading: true,
+    openType: '', // 页面打开类型
+  });
+
+  // 选择收货地址
+  const onSelect = (addressInfo) => {
+    if (state.openType !== 'select'){ // 不作为选择组件时阻断操作
+      return
+    }
+    uni.$emit('SELECT_ADDRESS', {
+      addressInfo,
+    });
+    sheep.$router.back();
+  };
+
+  // 导入微信地址
+  function importWechatAddress() {
+    let wechatAddress = {};
+    // #ifdef MP
+    uni.chooseAddress({
+      success: (res) => {
+        wechatAddress = {
+          consignee: res.userName,
+          mobile: res.telNumber,
+          province_name: res.provinceName,
+          city_name: res.cityName,
+          district_name: res.countyName,
+          address: res.detailInfo,
+          region: '',
+          is_default: false,
+        };
+        if (!isEmpty(wechatAddress)) {
+          sheep.$router.go('/pages/user/address/edit', {
+            data: JSON.stringify(wechatAddress),
+          });
+        }
+      },
+      fail: (err) => {
+        console.log('%cuni.chooseAddress,调用失败', 'color:green;background:yellow');
+      },
+    });
+    // #endif
+    // #ifdef H5
+    sheep.$platform.useProvider('wechat').jssdk.openAddress({
+      success: (res) => {
+        wechatAddress = {
+          consignee: res.userName,
+          mobile: res.telNumber,
+          province_name: res.provinceName,
+          city_name: res.cityName,
+          district_name: res.countryName,
+          address: res.detailInfo,
+          region: '',
+          is_default: false,
+        };
+        if (!isEmpty(wechatAddress)) {
+          sheep.$router.go('/pages/user/address/edit', {
+            data: JSON.stringify(wechatAddress),
+          });
+        }
+      },
+    });
+    // #endif
+  }
+
+  onLoad((option) => {
+    if (option.type) {
+      state.openType = option.type;
+    }
+  });
+
+  onShow(async () => {
+    state.list = (await AddressApi.getAddressList()).data;
+    state.loading = false;
+  });
+
+  onBeforeMount(() => {
+    if (!!uni.getStorageSync('areaData')) {
+      return;
+    }
+    // 提前加载省市区数据
+    AreaApi.getAreaTree().then((res) => {
+      if (res.code === 0) {
+        uni.setStorageSync('areaData', res.data);
+      }
+    });
+  });
+</script>
+
+<style lang="scss" scoped>
+  .footer-box {
+    .add-btn {
+      flex: 1;
+      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+      border-radius: 80rpx;
+      font-size: 30rpx;
+      font-weight: 500;
+      line-height: 80rpx;
+      color: $white;
+      position: relative;
+      z-index: 1;
+    }
+
+    .sync-wxaddress {
+      flex: 1;
+      line-height: 80rpx;
+      background: $white;
+      border-radius: 80rpx;
+      font-size: 30rpx;
+      font-weight: 500;
+      color: $dark-6;
+      margin-right: 18rpx;
+    }
+  }
+</style>
diff --git a/src/pages/user/goods-collect.vue b/src/pages/user/goods-collect.vue
new file mode 100644
index 00000000..08d7e45c
--- /dev/null
+++ b/src/pages/user/goods-collect.vue
@@ -0,0 +1,233 @@
+<!-- 我的商品收藏 -->
+<template>
+  <s-layout title="商品收藏">
+    <view class="cart-box ss-flex ss-flex-col ss-row-between">
+      <!-- 头部 -->
+      <view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
+        <view class="header-left ss-flex ss-col-center ss-font-26">
+          共
+          <text class="goods-number ui-TC-Main ss-flex">{{ state.pagination.total }}</text> 件商品
+        </view>
+        <view class="header-right">
+          <button
+            v-if="state.editMode && state.pagination.total"
+            class="ss-reset-button"
+            @tap="state.editMode = false"
+          >
+            取消
+          </button>
+          <button
+            v-if="!state.editMode && state.pagination.total"
+            class="ss-reset-button ui-TC-Main"
+            @tap="state.editMode = true"
+          >
+            编辑
+          </button>
+        </view>
+      </view>
+      <!-- 内容 -->
+      <view class="cart-content">
+        <view
+          class="goods-box ss-r-10 ss-m-b-14"
+          v-for="item in state.pagination.list"
+          :key="item.id"
+        >
+          <view class="ss-flex ss-col-center">
+            <label
+              class="check-box ss-flex ss-col-center ss-p-l-10"
+              v-if="state.editMode"
+              @tap="onSelect(item.spuId)"
+            >
+              <radio
+                :checked="state.selectedCollectList.includes(item.spuId)"
+                color="var(--ui-BG-Main)"
+                style="transform: scale(0.8)"
+                @tap.stop="onSelect(item.spuId)"
+              />
+            </label>
+            <s-goods-item
+              :title="item.spuName"
+              :img="item.picUrl"
+              :price="item.price"
+              priceColor="#FF3000"
+              :titleWidth="400"
+              @tap="
+                sheep.$router.go('/pages/goods/index', {
+                  id: item.spuId,
+                })
+              "
+            />
+          </view>
+        </view>
+      </view>
+
+      <!-- 底部 -->
+      <su-fixed bottom :val="0" placeholder v-show="state.editMode">
+        <view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
+          <view class="footer-left ss-flex ss-col-center">
+            <label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
+              <radio
+                :checked="state.selectAll"
+                color="var(--ui-BG-Main)"
+                style="transform: scale(0.7)"
+                @tap.stop="onSelectAll"
+              />
+              <view> 全选 </view>
+            </label>
+          </view>
+          <view class="footer-right">
+            <button
+              class="ss-reset-button ui-BG-Main-Gradient pay-btn ss-font-28 ui-Shadow-Main"
+              @tap="onCancel"
+            >
+              取消收藏
+            </button>
+          </view>
+        </view>
+      </su-fixed>
+    </view>
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+    <s-empty v-if="state.pagination.total === 0" text="暂无收藏" icon="/static/collect-empty.png" />
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { reactive } from 'vue';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import _ from 'lodash-es';
+  import FavoriteApi from '@/sheep/api/product/favorite';
+  import { resetPagination } from '@/sheep/helper/utils';
+
+  const sys_navBar = sheep.$platform.navbar;
+
+  const state = reactive({
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 6,
+    },
+    loadStatus: '',
+
+    editMode: false,
+    selectedCollectList: [], // 选中的 SPU 数组
+    selectAll: false,
+  });
+
+  async function getData() {
+    state.loadStatus = 'loading';
+    const { code, data } = await FavoriteApi.getFavoritePage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 单选选中
+  const onSelect = (spuId) => {
+    if (!state.selectedCollectList.includes(spuId)) {
+      state.selectedCollectList.push(spuId);
+    } else {
+      state.selectedCollectList.splice(state.selectedCollectList.indexOf(spuId), 1);
+    }
+    state.selectAll = state.selectedCollectList.length === state.pagination.list.length;
+  };
+
+  // 全选
+  const onSelectAll = () => {
+    state.selectAll = !state.selectAll;
+    if (!state.selectAll) {
+      state.selectedCollectList = [];
+    } else {
+      state.selectedCollectList = state.pagination.list.map((item) => item.spuId);
+    }
+  };
+
+  async function onCancel() {
+    if (!state.selectedCollectList) {
+      return;
+    }
+    // 取消收藏
+    for (const spuId of state.selectedCollectList) {
+      await FavoriteApi.deleteFavorite(spuId);
+    }
+
+    // 清空选择 + 重新加载
+    state.editMode = false;
+    state.selectedCollectList = [];
+    state.selectAll = false;
+    resetPagination(state.pagination);
+    await getData();
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getData();
+  }
+
+  onReachBottom(() => {
+    loadMore();
+  });
+
+  onLoad(() => {
+    getData();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .cart-box {
+    .cart-header {
+      height: 70rpx;
+      background-color: #f6f6f6;
+      width: 100%;
+      position: fixed;
+      left: 0;
+      top: v-bind('sys_navBar') rpx;
+      z-index: 1000;
+      box-sizing: border-box;
+    }
+
+    .cart-footer {
+      height: 100rpx;
+      background-color: #fff;
+
+      .pay-btn {
+        height: 80rpx;
+        line-height: 80rpx;
+        border-radius: 40rpx;
+        padding: 0 40rpx;
+        min-width: 200rpx;
+      }
+    }
+
+    .cart-content {
+      width: 100%;
+      margin-top: 70rpx;
+      padding: 0 20rpx;
+      box-sizing: border-box;
+      .goods-box {
+        background-color: #fff;
+        &:last-child {
+          margin-bottom: 40rpx;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/pages/user/goods-log.vue b/src/pages/user/goods-log.vue
new file mode 100644
index 00000000..4def00fd
--- /dev/null
+++ b/src/pages/user/goods-log.vue
@@ -0,0 +1,308 @@
+<!-- 商品浏览记录  -->
+<template>
+  <s-layout :bgStyle="{ color: '#f2f2f2' }" title="我的足迹">
+    <view class="cart-box ss-flex ss-flex-col ss-row-between">
+      <!-- 头部 -->
+      <view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
+        <view class="header-left ss-flex ss-col-center ss-font-26">
+          共
+          <text class="goods-number ui-TC-Main ss-flex">
+            {{ state.pagination.total }}
+          </text>
+          件商品
+        </view>
+        <view class="header-right">
+          <button
+            v-if="state.editMode && state.pagination.total"
+            class="ss-reset-button"
+            @tap="state.editMode = false"
+          >
+            取消
+          </button>
+          <button
+            v-if="!state.editMode && state.pagination.total"
+            class="ss-reset-button ui-TC-Main"
+            @tap="state.editMode = true"
+          >
+            编辑
+          </button>
+        </view>
+      </view>
+      <!-- 内容 -->
+      <view class="cart-content">
+        <view
+          class="goods-box ss-r-10 ss-m-b-14"
+          v-for="item in state.pagination.list"
+          :key="item.id"
+        >
+          <view class="ss-flex ss-col-center">
+            <label
+              class="check-box ss-flex ss-col-center ss-p-l-10"
+              v-if="state.editMode"
+              @tap="onSelect(item.spuId)"
+            >
+              <radio
+                :checked="state.selectedSpuIdList.includes(item.spuId)"
+                color="var(--ui-BG-Main)"
+                style="transform: scale(0.8)"
+                @tap.stop="onSelect(item.spuId)"
+              />
+            </label>
+            <s-goods-item
+              :title="item.spuName"
+              :img="item.picUrl"
+              :price="item.price"
+              :skuText="item.introduction"
+              priceColor="#FF3000"
+              :titleWidth="400"
+              @tap="
+                sheep.$router.go('/pages/goods/index', {
+                  id: item.spuId,
+                })
+              "
+            >
+            </s-goods-item>
+          </view>
+        </view>
+      </view>
+      <!-- 底部 -->
+      <su-fixed bottom :val="0" placeholder v-show="state.editMode">
+        <view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
+          <view class="footer-left ss-flex ss-col-center">
+            <label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
+              <radio
+                :checked="state.selectAll"
+                color="var(--ui-BG-Main)"
+                style="transform: scale(0.7)"
+                @tap.stop="onSelectAll"
+              />
+              <view>全选</view>
+            </label>
+          </view>
+          <view class="footer-right ss-flex">
+            <button
+              :class="[
+                'ss-reset-button  pay-btn ss-font-28 ',
+                {
+                  'ui-BG-Main-Gradient': state.selectedSpuIdList.length > 0,
+                  'ui-Shadow-Main': state.selectedSpuIdList.length > 0,
+                },
+              ]"
+              @tap="onDelete"
+            >
+              删除足迹
+            </button>
+            <button
+              class="ss-reset-button ui-BG-Main-Gradient pay-btn ss-font-28 ui-Shadow-Main ml-2"
+              @tap="onClean"
+            >
+              清空
+            </button>
+          </view>
+        </view>
+      </su-fixed>
+    </view>
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+    <s-empty
+      v-if="state.pagination.total === 0"
+      text="暂无浏览记录"
+      icon="/static/collect-empty.png"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { reactive } from 'vue';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import _ from 'lodash-es';
+  import SpuHistoryApi from '@/sheep/api/product/history';
+  import { cloneDeep } from '@/sheep/helper/utils';
+
+  const sys_navBar = sheep.$platform.navbar;
+  const pagination = {
+    list: [],
+    pageNo: 1,
+    total: 1,
+    pageSize: 10,
+  };
+  const state = reactive({
+    pagination: cloneDeep(pagination),
+    loadStatus: '',
+    editMode: false,
+    selectedSpuIdList: [],
+    selectAll: false,
+  });
+
+  async function getList() {
+    state.loadStatus = 'loading';
+    const { code, data } = await SpuHistoryApi.getBrowseHistoryPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+    });
+    if (code !== 0) {
+      return;
+    }
+
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 单选选中
+  const onSelect = (id) => {
+    if (!state.selectedSpuIdList.includes(id)) {
+      state.selectedSpuIdList.push(id);
+    } else {
+      state.selectedSpuIdList.splice(state.selectedSpuIdList.indexOf(id), 1);
+    }
+    state.selectAll = state.selectedSpuIdList.length === state.pagination.list.length;
+  };
+
+  // 全选
+  const onSelectAll = () => {
+    state.selectAll = !state.selectAll;
+    if (!state.selectAll) {
+      state.selectedSpuIdList = [];
+    } else {
+      state.pagination.list.forEach((item) => {
+        if (state.selectedSpuIdList.includes(item.spuId)) {
+          state.selectedSpuIdList.splice(state.selectedSpuIdList.indexOf(item.spuId), 1);
+        }
+        state.selectedSpuIdList.push(item.spuId);
+      });
+    }
+  };
+
+  // 删除足迹
+  async function onDelete() {
+    if (state.selectedSpuIdList.length <= 0) {
+      return;
+    }
+
+    const { code } = await SpuHistoryApi.deleteBrowseHistory(state.selectedSpuIdList);
+    if (code === 0) {
+      reload();
+    }
+  }
+
+  // 清空
+  async function onClean() {
+    const { code } = await SpuHistoryApi.cleanBrowseHistory();
+    if (code === 0) {
+      reload();
+    }
+  }
+
+  function reload() {
+    state.editMode = false;
+    state.selectedSpuIdList = [];
+    state.selectAll = false;
+    state.pagination = pagination;
+    getList();
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus !== 'noMore') {
+      state.pagination.pageNo += 1;
+      getList();
+    }
+  }
+
+  onReachBottom(() => {
+    loadMore();
+  });
+
+  onLoad(() => {
+    getList();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .cart-box {
+    .cart-header {
+      height: 70rpx;
+      background-color: #f6f6f6;
+      width: 100%;
+      position: fixed;
+      left: 0;
+      top: v-bind('sys_navBar') rpx;
+      z-index: 1000;
+      box-sizing: border-box;
+    }
+
+    .cart-footer {
+      height: 100rpx;
+      background-color: #fff;
+
+      .pay-btn {
+        height: 80rpx;
+        line-height: 80rpx;
+        border-radius: 40rpx;
+        padding: 0 40rpx;
+        min-width: 200rpx;
+      }
+    }
+
+    .cart-content {
+      width: 100%;
+      padding: 0 20rpx;
+      box-sizing: border-box;
+      margin-top: 70rpx;
+      .goods-box {
+        background-color: #fff;
+        &:last-child {
+          margin-bottom: 40rpx;
+        }
+      }
+    }
+  }
+
+  .title-card {
+    padding: 36rpx 0 46rpx 20rpx;
+
+    .img-box {
+      width: 164rpx;
+      height: 164rpx;
+
+      .order-img {
+        width: 164rpx;
+        height: 164rpx;
+      }
+    }
+
+    .check-box {
+      height: 100%;
+    }
+
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #333333;
+    }
+
+    .params-box {
+      .params-title {
+        height: 38rpx;
+        background: #f4f4f4;
+        border-radius: 2rpx;
+        font-size: 24rpx;
+        font-weight: 400;
+        color: #666666;
+      }
+    }
+
+    .price-text {
+      color: $red;
+      font-family: OPPOSANS;
+    }
+  }
+</style>
diff --git a/src/pages/user/goods_details_store/index.vue b/src/pages/user/goods_details_store/index.vue
new file mode 100644
index 00000000..f1b0c84d
--- /dev/null
+++ b/src/pages/user/goods_details_store/index.vue
@@ -0,0 +1,282 @@
+<template>
+  <s-layout :bgStyle="{ color: '#FFF' }" title="选择自提门店">
+    <view class="storeBox" ref="container">
+      <view
+        class="storeBox-box"
+        v-for="(item, index) in state.storeList"
+        :key="index"
+        @tap="checked(item)"
+      >
+        <view class="store-img">
+          <image :src="item.logo" class="img" />
+        </view>
+        <view class="store-cent-left">
+          <view class="store-name">{{ item.name }}</view>
+          <view class="store-address line1">
+            {{ item.areaName }}{{ ', ' + item.detailAddress }}
+          </view>
+        </view>
+        <view class="row-right ss-flex-col ss-col-center">
+          <view>
+            <!-- #ifdef H5 -->
+            <a class="store-phone" :href="'tel:' + item.phone">
+              <view class="iconfont">
+                <view class="ss-rest-button">
+                  <text class="_icon-forward" />
+                </view>
+              </view>
+            </a>
+            <!-- #endif -->
+            <!-- #ifdef MP -->
+            <view class="store-phone" @click="call(item.phone)">
+              <view class="iconfont">
+                <view class="ss-rest-button">
+                  <text class="_icon-forward" />
+                </view>
+              </view>
+            </view>
+            <!-- #endif -->
+          </view>
+          <view class="store-distance ss-flex ss-row-center" @tap.stop="showMaoLocation(item)">
+            <text class="addressTxt" v-if="item.distance">
+              距离{{ item.distance.toFixed(2) }}千米
+            </text>
+            <text class="addressTxt" v-else>查看地图</text>
+            <view class="iconfont">
+              <view class="ss-rest-button">
+                <text class="_icon-forward" />
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import DeliveryApi from '@/sheep/api/trade/delivery';
+  import { onMounted, reactive } from 'vue';
+  import { onLoad } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+
+  const LONGITUDE = 'user_longitude';
+  const LATITUDE = 'user_latitude';
+  const state = reactive({
+    loaded: false,
+    loading: false,
+    storeList: [],
+    system_store: {},
+    locationShow: false,
+    user_latitude: 0,
+    user_longitude: 0,
+  });
+
+  const call = (phone) => {
+    uni.makePhoneCall({
+      phoneNumber: phone,
+    });
+  };
+  const selfLocation = () => {
+    // #ifdef H5
+    const jsWxSdk = sheep.$platform.useProvider('wechat').jsWxSdk;
+    if (jsWxSdk.isWechat()) {
+      jsWxSdk.getLocation((res) => {
+        state.user_latitude = res.latitude;
+        state.user_longitude = res.longitude;
+        uni.setStorageSync(LATITUDE, res.latitude);
+        uni.setStorageSync(LONGITUDE, res.longitude);
+        getList();
+      });
+    } else {
+      // #endif
+      uni.getLocation({
+        type: 'gcj02',
+        success: (res) => {
+          try {
+            state.user_latitude = res.latitude;
+            state.user_longitude = res.longitude;
+            uni.setStorageSync(LATITUDE, res.latitude);
+            uni.setStorageSync(LONGITUDE, res.longitude);
+          } catch (e) {
+            console.error(e);
+          }
+          getList();
+        },
+        complete: () => {
+          getList();
+        },
+      });
+      // #ifdef H5
+    }
+    // #endif
+  };
+  const showMaoLocation = (e) => {
+    // #ifdef H5
+    const jsWxSdk = sheep.$platform.useProvider('wechat').jsWxSdk;
+    if (jsWxSdk.isWechat()) {
+      jsWxSdk.openLocation({
+        latitude: Number(e.latitude),
+        longitude: Number(e.longitude),
+        name: e.name,
+        address: `${e.areaName}-${e.detailAddress}`,
+      });
+    } else {
+      // #endif
+      uni.openLocation({
+        latitude: Number(e.latitude),
+        longitude: Number(e.longitude),
+        name: e.name,
+        address: `${e.areaName}-${e.detailAddress}`,
+        success: function () {
+          console.log('success');
+        },
+      });
+      // #ifdef H5
+    }
+    // #endif
+  };
+
+  /**
+   * 选中门店
+   */
+  const checked = (addressInfo) => {
+    uni.$emit('SELECT_PICK_UP_INFO', {
+      addressInfo,
+    });
+    sheep.$router.back();
+  };
+
+  /**
+   * 获取门店列表数据
+   */
+  const getList = async () => {
+    if (state.loading || state.loaded) {
+      return;
+    }
+    state.loading = true;
+    const { data, code } = await DeliveryApi.getDeliveryPickUpStoreList({
+      latitude: state.user_latitude,
+      longitude: state.user_longitude,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.loading = false;
+    state.storeList = data;
+  };
+
+  onMounted(() => {
+    if (state.user_latitude && state.user_longitude) {
+      getList();
+    } else {
+      selfLocation();
+      getList();
+    }
+  });
+  onLoad(() => {
+    try {
+      state.user_latitude = uni.getStorageSync(LATITUDE);
+      state.user_longitude = uni.getStorageSync(LONGITUDE);
+    } catch (e) {
+      console.error(e);
+    }
+  });
+</script>
+<style lang="scss" scoped>
+  .line1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .geoPage {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    z-index: 10000;
+  }
+
+  .storeBox {
+    width: 100%;
+    background-color: #fff;
+    padding: 0 30rpx;
+  }
+
+  .storeBox-box {
+    width: 100%;
+    height: auto;
+    display: flex;
+    align-items: center;
+    padding: 23rpx 0;
+    justify-content: space-between;
+    border-bottom: 1px solid #eee;
+  }
+
+  .store-cent {
+    display: flex;
+    align-items: center;
+    width: 80%;
+  }
+
+  .store-cent-left {
+    //width: 45%;
+    flex: 2;
+  }
+
+  .store-img {
+    flex: 1;
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 6rpx;
+    margin-right: 22rpx;
+  }
+
+  .store-img .img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .store-name {
+    color: #282828;
+    font-size: 30rpx;
+    margin-bottom: 22rpx;
+    font-weight: 800;
+  }
+
+  .store-address {
+    color: #666666;
+    font-size: 24rpx;
+  }
+
+  .store-phone {
+    width: 50rpx;
+    height: 50rpx;
+    color: #fff;
+    border-radius: 50%;
+    display: block;
+    text-align: center;
+    line-height: 48rpx;
+    background-color: #e83323;
+    margin-bottom: 22rpx;
+    text-decoration: none;
+  }
+
+  .store-distance {
+    font-size: 22rpx;
+    color: #e83323;
+  }
+
+  .iconfont {
+    font-size: 20rpx;
+  }
+
+  .row-right {
+    flex: 2;
+    //display: flex;
+    //flex-direction: column;
+    //align-items: flex-end;
+    //width: 33.5%;
+  }
+</style>
diff --git a/src/pages/user/info.vue b/src/pages/user/info.vue
new file mode 100644
index 00000000..00e20a45
--- /dev/null
+++ b/src/pages/user/info.vue
@@ -0,0 +1,467 @@
+<!-- 用户信息 -->
+<template>
+  <s-layout title="用户信息" class="set-userinfo-wrap">
+    <uni-forms
+      :model="state.model"
+      :rules="state.rules"
+      labelPosition="left"
+      border
+      class="form-box"
+    >
+      <!-- 头像 -->
+      <view class="ss-flex ss-row-center ss-col-center ss-p-t-60 ss-p-b-0 bg-white">
+        <view class="header-box-content">
+          <su-image
+            class="content-img"
+            isPreview
+            :current="0"
+            :src="state.model?.avatar || sheep.$url.static('/static/img/shop/default_avatar.png')"
+            :height="160"
+            :width="160"
+            :radius="80"
+            mode="scaleToFill"
+          />
+          <view class="avatar-action">
+            <!-- #ifdef MP -->
+            <button
+              class="ss-reset-button avatar-action-btn"
+              open-type="chooseAvatar"
+              @chooseavatar="onChooseAvatar"
+            >
+              修改
+            </button>
+            <!-- #endif -->
+            <!-- #ifndef MP -->
+            <button class="ss-reset-button avatar-action-btn" @tap="onChangeAvatar">修改</button>
+            <!-- #endif -->
+          </view>
+        </view>
+      </view>
+
+      <view class="bg-white ss-p-x-30">
+        <!-- 昵称 + 性别 -->
+        <uni-forms-item name="nickname" label="昵称">
+          <uni-easyinput
+            v-model="state.model.nickname"
+            type="nickname"
+            placeholder="设置昵称"
+            :inputBorder="false"
+            :placeholderStyle="placeholderStyle"
+          />
+        </uni-forms-item>
+        <uni-forms-item name="sex" label="性别">
+          <view class="ss-flex ss-col-center ss-h-100">
+            <radio-group @change="onChangeGender" class="ss-flex ss-col-center">
+              <label class="radio" v-for="item in sexRadioMap" :key="item.value">
+                <view class="ss-flex ss-col-center ss-m-r-32">
+                  <radio
+                    :value="item.value"
+                    color="var(--ui-BG-Main)"
+                    style="transform: scale(0.8)"
+                    :checked="parseInt(item.value) === state.model?.sex"
+                  />
+                  <view class="gender-name">{{ item.name }}</view>
+                </view>
+              </label>
+            </radio-group>
+          </view>
+        </uni-forms-item>
+
+        <uni-forms-item name="mobile" label="手机号" @tap="onChangeMobile">
+          <uni-easyinput
+            v-model="userInfo.mobile"
+            placeholder="请绑定手机号"
+            :inputBorder="false"
+            disabled
+            :styles="{ disableColor: '#fff' }"
+            :placeholderStyle="placeholderStyle"
+            :clearable="false"
+          >
+            <template v-slot:right>
+              <view class="ss-flex ss-col-center">
+                <su-radio v-if="userInfo.verification?.mobile" :modelValue="true" />
+                <button v-else class="ss-reset-button ss-flex ss-col-center ss-row-center">
+                  <text class="_icon-forward" style="color: #bbbbbb; font-size: 26rpx"></text>
+                </button>
+              </view>
+            </template>
+          </uni-easyinput>
+        </uni-forms-item>
+
+        <uni-forms-item name="password" label="登录密码" @tap="onSetPassword">
+          <uni-easyinput
+            v-model="userInfo.password"
+            placeholder="点击修改登录密码"
+            :inputBorder="false"
+            :styles="{ disableColor: '#fff' }"
+            disabled
+            placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal"
+            :clearable="false"
+          >
+            <template v-slot:right>
+              <view class="ss-flex ss-col-center">
+                <su-radio
+                  class="ss-flex"
+                  v-if="userInfo.verification?.password"
+                  :modelValue="true"
+                />
+                <button v-else class="ss-reset-button ss-flex ss-col-center ss-row-center">
+                  <text class="_icon-forward" style="color: #bbbbbb; font-size: 26rpx" />
+                </button>
+              </view>
+            </template>
+          </uni-easyinput>
+        </uni-forms-item>
+      </view>
+
+      <view class="bg-white ss-m-t-14">
+        <uni-list>
+          <uni-list-item
+            clickable
+            @tap="sheep.$router.go('/pages/user/address/list')"
+            title="地址管理"
+            showArrow
+            :border="false"
+            class="list-border"
+          />
+        </uni-list>
+      </view>
+    </uni-forms>
+
+    <!-- 当前社交平台的绑定关系，只处理 wechat 微信场景 -->
+    <view v-if="sheep.$platform.name !== 'H5'">
+      <view class="title-box ss-p-l-30">第三方账号绑定</view>
+      <view class="account-list ss-flex ss-row-between">
+        <view v-if="'WechatOfficialAccount' === sheep.$platform.name" class="ss-flex ss-col-center">
+          <image
+            class="list-img"
+            :src="sheep.$url.static('/static/img/shop/platform/WechatOfficialAccount.png')"
+          />
+          <text class="list-name">微信公众号</text>
+        </view>
+        <view v-if="'WechatMiniProgram' === sheep.$platform.name" class="ss-flex ss-col-center">
+          <image
+            class="list-img"
+            :src="sheep.$url.static('/static/img/shop/platform/WechatMiniProgram.png')"
+          />
+          <text class="list-name">微信小程序</text>
+        </view>
+        <view v-if="'App' === sheep.$platform.name" class="ss-flex ss-col-center">
+          <image
+            class="list-img"
+            :src="sheep.$url.static('/static/img/shop/platform/wechat.png')"
+          />
+          <text class="list-name">微信开放平台</text>
+        </view>
+        <view class="ss-flex ss-col-center">
+          <view class="info ss-flex ss-col-center" v-if="state.thirdInfo">
+            <image class="avatar ss-m-r-20" :src="sheep.$url.cdn(state.thirdInfo.avatar)" />
+            <text class="name">{{ state.thirdInfo.nickname }}</text>
+          </view>
+          <view class="bind-box ss-m-l-20">
+            <button
+              v-if="state.thirdInfo.openid"
+              class="ss-reset-button relieve-btn"
+              @tap="unBindThirdOauth"
+            >
+              解绑
+            </button>
+            <button v-else class="ss-reset-button bind-btn" @tap="bindThirdOauth">绑定</button>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <su-fixed bottom placeholder bg="none">
+      <view class="footer-box ss-p-20">
+        <button class="ss-rest-button logout-btn ui-Shadow-Main" @tap="onSubmit">保存</button>
+      </view>
+    </su-fixed>
+  </s-layout>
+</template>
+
+<script setup>
+  import { computed, reactive, onBeforeMount } from 'vue';
+  import sheep from '@/sheep';
+  import { clone } from 'lodash-es';
+  import { showAuthModal } from '@/sheep/hooks/useModal';
+  import UserApi from '@/sheep/api/member/user';
+  import {
+    chooseAndUploadFile,
+    uploadFilesFromPath,
+  } from '@/sheep/components/s-uploader/choose-and-upload-file';
+
+  const state = reactive({
+    model: {}, // 个人信息
+    rules: {},
+    thirdInfo: {}, // 社交用户的信息
+  });
+
+  const placeholderStyle = 'color:#BBBBBB;font-size:28rpx;line-height:normal';
+
+  const sexRadioMap = [
+    {
+      name: '男',
+      value: '1',
+    },
+    {
+      name: '女',
+      value: '2',
+    },
+  ];
+
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+
+  // 选择性别
+  function onChangeGender(e) {
+    state.model.sex = e.detail.value;
+  }
+
+  // 修改手机号
+  const onChangeMobile = () => {
+    showAuthModal('changeMobile');
+  };
+
+  // 选择微信的头像，进行上传
+  async function onChooseAvatar(e) {
+    debugger;
+    const tempUrl = e.detail.avatarUrl || '';
+    if (!tempUrl) return;
+    const files = await uploadFilesFromPath(tempUrl);
+    if (files.length > 0) {
+      state.model.avatar = files[0].url;
+    }
+  }
+
+  // 手动选择头像，进行上传
+  async function onChangeAvatar() {
+    const files = await chooseAndUploadFile({ type: 'image' });
+    if (files.length > 0) {
+      state.model.avatar = files[0].url;
+    }
+  }
+
+  // 修改密码
+  function onSetPassword() {
+    showAuthModal('changePassword');
+  }
+
+  // 绑定第三方账号
+  async function bindThirdOauth() {
+    let result = await sheep.$platform.useProvider('wechat').bind();
+    if (result) {
+      await getUserInfo();
+    }
+  }
+
+  // 解绑第三方账号
+  function unBindThirdOauth() {
+    uni.showModal({
+      title: '解绑提醒',
+      content: '解绑后您将无法通过微信登录此账号',
+      cancelText: '再想想',
+      confirmText: '确定',
+      success: async function (res) {
+        if (!res.confirm) {
+          return;
+        }
+        const result = await sheep.$platform.useProvider('wechat').unbind(state.thirdInfo.openid);
+        if (result) {
+          await getUserInfo();
+        }
+      },
+    });
+  }
+
+  // 保存信息
+  async function onSubmit() {
+    const { code } = await UserApi.updateUser({
+      avatar: state.model.avatar,
+      nickname: state.model.nickname,
+      sex: state.model.sex,
+    });
+    if (code === 0) {
+      await getUserInfo();
+    }
+  }
+
+  // 获得用户信息
+  const getUserInfo = async () => {
+    // 个人信息
+    const userInfo = await sheep.$store('user').getInfo();
+    state.model = clone(userInfo);
+
+    // 获得社交用户的信息
+    if (sheep.$platform.name !== 'H5') {
+      const result = await sheep.$platform.useProvider('wechat').getInfo();
+      state.thirdInfo = result || {};
+    }
+  };
+
+  onBeforeMount(() => {
+    getUserInfo();
+  });
+</script>
+
+<style lang="scss" scoped>
+  :deep() {
+    .uni-file-picker {
+      border-radius: 50%;
+    }
+
+    .uni-file-picker__container {
+      margin: -14rpx -12rpx;
+    }
+
+    .file-picker__progress {
+      height: 0 !important;
+    }
+
+    .uni-list-item__content-title {
+      font-size: 28rpx !important;
+      color: #333333 !important;
+      line-height: normal !important;
+    }
+
+    .uni-icons {
+      font-size: 40rpx !important;
+    }
+
+    .is-disabled {
+      color: #333333;
+    }
+  }
+
+  :deep(.disabled) {
+    opacity: 1;
+  }
+
+  .gender-name {
+    font-size: 28rpx;
+    font-weight: 500;
+    line-height: normal;
+    color: #333333;
+  }
+
+  .title-box {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #666666;
+    line-height: 100rpx;
+  }
+
+  .logout-btn {
+    width: 710rpx;
+    height: 80rpx;
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    border-radius: 40rpx;
+    font-size: 30rpx;
+    font-weight: 500;
+    color: $white;
+  }
+
+  .radio-dark {
+    filter: grayscale(100%);
+    filter: gray;
+    opacity: 0.4;
+  }
+
+  .content-img {
+    border-radius: 50%;
+  }
+  .header-box-content {
+    position: relative;
+    width: 160rpx;
+    height: 160rpx;
+    overflow: hidden;
+    border-radius: 50%;
+  }
+  .avatar-action {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 0;
+    z-index: 1;
+    width: 160rpx;
+    height: 46rpx;
+    background: rgba(#000000, 0.3);
+
+    .avatar-action-btn {
+      width: 160rpx;
+      height: 46rpx;
+      font-weight: 500;
+      font-size: 24rpx;
+      color: #ffffff;
+    }
+  }
+
+  // 绑定项
+  .account-list {
+    background-color: $white;
+    height: 100rpx;
+    padding: 0 20rpx;
+
+    .list-img {
+      width: 40rpx;
+      height: 40rpx;
+      margin-right: 10rpx;
+    }
+
+    .list-name {
+      font-size: 28rpx;
+      color: #333333;
+    }
+
+    .info {
+      .avatar {
+        width: 38rpx;
+        height: 38rpx;
+        border-radius: 50%;
+        overflow: hidden;
+      }
+
+      .name {
+        font-size: 28rpx;
+        font-weight: 400;
+        color: $dark-9;
+      }
+    }
+
+    .bind-box {
+      width: 100rpx;
+      height: 50rpx;
+      line-height: normal;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 24rpx;
+
+      .bind-btn {
+        width: 100%;
+        height: 100%;
+        border-radius: 25rpx;
+        background: #f4f4f4;
+        color: #999999;
+      }
+      .relieve-btn {
+        width: 100%;
+        height: 100%;
+        border-radius: 25rpx;
+        background: var(--ui-BG-Main-opacity-1);
+        color: var(--ui-BG-Main);
+      }
+    }
+  }
+
+  .list-border {
+    font-size: 28rpx;
+    font-weight: 400;
+    color: #333333;
+    border-bottom: 2rpx solid #eeeeee;
+  }
+
+  image {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/src/pages/user/wallet/money.vue b/src/pages/user/wallet/money.vue
new file mode 100644
index 00000000..39a5d29c
--- /dev/null
+++ b/src/pages/user/wallet/money.vue
@@ -0,0 +1,379 @@
+<!-- 我的钱包 -->
+<template>
+  <s-layout class="wallet-wrap" title="钱包">
+    <!-- 钱包卡片 -->
+    <view class="header-box ss-flex ss-row-center ss-col-center">
+      <view class="card-box ui-BG-Main ui-Shadow-Main">
+        <view class="card-head ss-flex ss-col-center">
+          <view class="card-title ss-m-r-10">钱包余额（元）</view>
+          <view
+            @tap="state.showMoney = !state.showMoney"
+            class="ss-eye-icon"
+            :class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'"
+          />
+        </view>
+        <view class="ss-flex ss-row-between ss-col-center ss-m-t-64">
+          <view class="money-num">{{
+            state.showMoney ? fen2yuan(userWallet.balance) : '*****'
+          }}</view>
+          <button class="ss-reset-button topup-btn" @tap="sheep.$router.go('/pages/pay/recharge')">
+            充值
+          </button>
+        </view>
+      </view>
+    </view>
+
+    <su-sticky>
+      <!-- 统计 -->
+      <view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
+        <uni-datetime-picker
+          v-model="state.data"
+          type="daterange"
+          @change="onChangeTime"
+          :end="state.today"
+        >
+          <button class="ss-reset-button date-btn">
+            <text>{{ dateFilterText }}</text>
+            <text class="cicon-drop-down ss-seldate-icon"></text>
+          </button>
+        </uni-datetime-picker>
+        <view class="total-box">
+          <view class="ss-m-b-10">总收入￥{{ fen2yuan(state.summary.totalIncome) }}</view>
+          <view>总支出￥{{ fen2yuan(state.summary.totalExpense) }}</view>
+        </view>
+      </view>
+      <su-tabs
+        :list="tabMaps"
+        @change="onChange"
+        :scrollable="false"
+        :current="state.currentTab"
+      ></su-tabs>
+    </su-sticky>
+    <s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
+
+    <!-- 钱包记录 -->
+    <view v-if="state.pagination.total > 0">
+      <view
+        class="wallet-list ss-flex border-bottom"
+        v-for="item in state.pagination.list"
+        :key="item.id"
+      >
+        <view class="list-content">
+          <view class="title-box ss-flex ss-row-between ss-m-b-20">
+            <text class="title ss-line-1">
+              {{ item.title }}
+            </text>
+            <view class="money">
+              <text v-if="item.price >= 0" class="add">+{{ fen2yuan(item.price) }}</text>
+              <text v-else class="minus">{{ fen2yuan(item.price) }}</text>
+            </view>
+          </view>
+          <text class="time">
+            {{ sheep.$helper.timeFormat(state.createTime, 'yyyy-mm-dd hh:MM:ss') }}
+          </text>
+        </view>
+      </view>
+    </view>
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import { computed, reactive } from 'vue';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import dayjs from 'dayjs';
+  import _ from 'lodash-es';
+  import PayWalletApi from '@/sheep/api/pay/wallet';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import { resetPagination } from '@/sheep/helper/utils';
+
+  const headerBg = sheep.$url.css('/static/img/shop/user/wallet_card_bg.png');
+
+  // 数据
+  const state = reactive({
+    showMoney: false,
+    date: [], // 筛选的时间段
+    currentTab: 0,
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 8,
+    },
+    summary: {
+      totalIncome: 0,
+      totalExpense: 0,
+    },
+    loadStatus: '',
+    today: '',
+  });
+
+  const tabMaps = [
+    {
+      name: '全部',
+      value: '',
+    },
+    {
+      name: '收入',
+      value: '1',
+    },
+    {
+      name: '支出',
+      value: '2',
+    },
+  ];
+
+  const userWallet = computed(() => sheep.$store('user').userWallet);
+
+  // 格式化时间段
+  const dateFilterText = computed(() => {
+    if (state.date[0] === state.date[1]) {
+      return state.date[0];
+    } else {
+      return state.date.join('~');
+    }
+  });
+
+  // 获得钱包记录分页
+  async function getLogList() {
+    state.loadStatus = 'loading';
+    const { data, code } = await PayWalletApi.getWalletTransactionPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      type: tabMaps[state.currentTab].value,
+      'createTime[0]': state.date[0] + ' 00:00:00',
+      'createTime[1]': state.date[1] + ' 23:59:59',
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 获得钱包统计
+  async function getSummary() {
+    const { data, code } = await PayWalletApi.getWalletTransactionSummary({
+      createTime: [state.date[0] + ' 00:00:00', state.date[1] + ' 23:59:59'],
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.summary = data;
+  }
+
+  onLoad(() => {
+    state.today = dayjs().format('YYYY-MM-DD');
+    state.date = [state.today, state.today];
+    getLogList();
+    getSummary();
+    // 刷新钱包的缓存
+    sheep.$store('user').getWallet();
+  });
+
+  // 处理 tab 切换
+  function onChange(e) {
+    state.currentTab = e.index;
+    // 重新加载列表
+    resetPagination(state.pagination);
+    getLogList();
+    getSummary();
+  }
+
+  // 处理时间筛选
+  function onChangeTime(e) {
+    state.date[0] = e[0];
+    state.date[1] = e[e.length - 1];
+    // 重新加载列表
+    resetPagination(state.pagination);
+    getLogList();
+    getSummary();
+  }
+
+  onReachBottom(() => {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getLogList();
+  });
+</script>
+
+<style lang="scss" scoped>
+  // 钱包
+  .header-box {
+    background-color: $white;
+    padding: 30rpx;
+
+    .card-box {
+      width: 100%;
+      min-height: 300rpx;
+      padding: 40rpx;
+      background-size: 100% 100%;
+      border-radius: 30rpx;
+      overflow: hidden;
+      position: relative;
+      z-index: 1;
+      box-sizing: border-box;
+
+      &::after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: v-bind(headerBg) no-repeat;
+        pointer-events: none;
+      }
+
+      .card-head {
+        color: $white;
+        font-size: 30rpx;
+      }
+
+      .ss-eye-icon {
+        font-size: 40rpx;
+        color: $white;
+      }
+
+      .money-num {
+        font-size: 70rpx;
+        line-height: 70rpx;
+        font-weight: 500;
+        color: $white;
+        font-family: OPPOSANS;
+      }
+
+      .reduce-num {
+        font-size: 26rpx;
+        font-weight: 400;
+        color: $white;
+      }
+
+      .topup-btn {
+        width: 120rpx;
+        height: 60rpx;
+        line-height: 60rpx;
+        border-radius: 30px;
+        font-size: 26rpx;
+        font-weight: 500;
+        background-color: $white;
+        color: var(--ui-BG-Main);
+      }
+    }
+  }
+
+  // 筛选
+
+  .filter-box {
+    height: 114rpx;
+    background-color: $bg-page;
+
+    .total-box {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: $dark-9;
+    }
+
+    .date-btn {
+      background-color: $white;
+      line-height: 54rpx;
+      border-radius: 27rpx;
+      padding: 0 20rpx;
+      font-size: 24rpx;
+      font-weight: 500;
+      color: $dark-6;
+
+      .ss-seldate-icon {
+        font-size: 50rpx;
+        color: $dark-9;
+      }
+    }
+  }
+
+  .tabs-box {
+    background: $white;
+    border-bottom: 2rpx solid #eeeeee;
+  }
+
+  // tab
+  .wallet-tab-card {
+    .tab-item {
+      height: 80rpx;
+      position: relative;
+
+      .tab-title {
+        font-size: 30rpx;
+      }
+
+      .cur-tab-title {
+        font-weight: $font-weight-bold;
+      }
+
+      .tab-line {
+        width: 60rpx;
+        height: 6rpx;
+        border-radius: 6rpx;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 2rpx;
+        background-color: var(--ui-BG-Main);
+      }
+    }
+  }
+
+  // 钱包记录
+  .wallet-list {
+    padding: 30rpx;
+    background-color: #ffff;
+
+    .head-img {
+      width: 70rpx;
+      height: 70rpx;
+      border-radius: 50%;
+      background: $gray-c;
+    }
+
+    .list-content {
+      justify-content: space-between;
+      align-items: flex-start;
+      flex: 1;
+
+      .title {
+        font-size: 28rpx;
+        color: $dark-3;
+        width: 400rpx;
+      }
+
+      .time {
+        color: $gray-c;
+        font-size: 22rpx;
+      }
+    }
+
+    .money {
+      font-size: 28rpx;
+      font-weight: bold;
+      font-family: OPPOSANS;
+      .add {
+        color: var(--ui-BG-Main);
+      }
+
+      .minus {
+        color: $dark-3;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/user/wallet/score.vue b/src/pages/user/wallet/score.vue
new file mode 100644
index 00000000..7fcee87d
--- /dev/null
+++ b/src/pages/user/wallet/score.vue
@@ -0,0 +1,282 @@
+<!-- 我的积分 -->
+<template>
+  <s-layout class="wallet-wrap" title="我的积分" navbar="inner">
+    <view
+      class="header-box ss-flex ss-flex-col ss-row-center ss-col-center"
+      :style="[
+        {
+          marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+          paddingTop: Number(statusBarHeight + 88) + 'rpx',
+        },
+      ]"
+    >
+      <view class="header-bg">
+        <view class="bg" />
+      </view>
+      <view class="score-box ss-flex-col ss-row-center ss-col-center">
+        <view class="ss-m-b-30">
+          <text class="all-title ss-m-r-8">当前积分</text>
+        </view>
+        <text class="all-num">{{ userInfo.point || 0 }}</text>
+      </view>
+    </view>
+    <!-- tab -->
+    <su-sticky :customNavHeight="sys_navBar">
+      <!-- 统计 -->
+      <view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
+        <uni-datetime-picker
+          v-model="state.date"
+          type="daterange"
+          @change="onChangeTime"
+          :end="state.today"
+        >
+          <button class="ss-reset-button date-btn">
+            <text>{{ dateFilterText }}</text>
+            <text class="cicon-drop-down ss-seldate-icon"></text>
+          </button>
+        </uni-datetime-picker>
+
+        <!-- TODO 芋艿：【钱包-可优化】展示一下 -->
+        <!--				<view class="total-box">-->
+        <!--					<view class="ss-m-b-10">总收入￥{{ state.pagination.income }}</view>-->
+        <!--					<view>总支出￥{{ -state.pagination.expense }}</view>-->
+        <!--				</view>-->
+      </view>
+      <su-tabs
+        :list="tabMaps"
+        @change="onChange"
+        :scrollable="false"
+        :current="state.currentTab"
+      ></su-tabs>
+    </su-sticky>
+
+    <!-- list -->
+    <view class="list-box">
+      <view v-if="state.pagination.total > 0">
+        <view
+          class="list-item ss-flex ss-col-center ss-row-between"
+          v-for="item in state.pagination.list"
+          :key="item.id"
+        >
+          <view class="ss-flex-col">
+            <view class="name"
+              >{{ item.title }}{{ item.description ? ' - ' + item.description : '' }}</view
+            >
+            <view class="time">{{
+              sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')
+            }}</view>
+          </view>
+          <view class="add" v-if="item.point > 0">+{{ item.point }}</view>
+          <view class="minus" v-else>{{ item.point }}</view>
+        </view>
+      </view>
+      <s-empty v-else text="暂无数据" icon="/static/data-empty.png" />
+    </view>
+
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="onLoadMore"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { computed, reactive } from 'vue';
+  import _ from 'lodash-es';
+  import dayjs from 'dayjs';
+  import PointApi from '@/sheep/api/member/point';
+  import { resetPagination } from '@/sheep/helper/utils';
+
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+  const sys_navBar = sheep.$platform.navbar;
+
+  const state = reactive({
+    currentTab: 0,
+    pagination: {
+      list: 0,
+      total: 0,
+      pageSize: 6,
+      pageNo: 1,
+    },
+    loadStatus: '',
+    date: [],
+    today: '',
+  });
+
+  const tabMaps = [
+    {
+      name: '全部',
+      value: 'all',
+    },
+    {
+      name: '收入',
+      value: 'true',
+    },
+    {
+      name: '支出',
+      value: 'false',
+    },
+  ];
+
+  const dateFilterText = computed(() => {
+    if (state.date[0] === state.date[1]) {
+      return state.date[0];
+    } else {
+      return state.date.join('~');
+    }
+  });
+
+  async function getLogList() {
+    state.loadStatus = 'loading';
+    let { code, data } = await PointApi.getPointRecordPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      addStatus: state.currentTab > 0 ? tabMaps[state.currentTab].value : undefined,
+      'createTime[0]': state.date[0] + ' 00:00:00',
+      'createTime[1]': state.date[1] + ' 23:59:59',
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  onLoad(() => {
+    state.today = dayjs().format('YYYY-MM-DD');
+    state.date = [state.today, state.today];
+    getLogList();
+  });
+
+  function onChange(e) {
+    state.currentTab = e.index;
+    resetPagination(state.pagination);
+    getLogList();
+  }
+
+  function onChangeTime(e) {
+    state.date[0] = e[0];
+    state.date[1] = e[e.length - 1];
+    resetPagination(state.pagination);
+    getLogList();
+  }
+
+  function onLoadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getLogList();
+  }
+
+  onReachBottom(() => {
+    onLoadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .header-box {
+    width: 100%;
+    background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%)
+      no-repeat;
+    background-size: 750rpx 100%;
+    padding: 0 0 120rpx 0;
+    box-sizing: border-box;
+
+    .score-box {
+      height: 100%;
+
+      .all-num {
+        font-size: 50rpx;
+        font-weight: bold;
+        color: #fff;
+        font-family: OPPOSANS;
+      }
+
+      .all-title {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #fff;
+      }
+
+      .cicon-help-o {
+        color: #fff;
+        font-size: 28rpx;
+      }
+    }
+  }
+
+  // 筛选
+  .filter-box {
+    height: 114rpx;
+    background-color: $bg-page;
+
+    .total-box {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: $dark-9;
+    }
+
+    .date-btn {
+      background-color: $white;
+      line-height: 54rpx;
+      border-radius: 27rpx;
+      padding: 0 20rpx;
+      font-size: 24rpx;
+      font-weight: 500;
+      color: $dark-6;
+
+      .ss-seldate-icon {
+        font-size: 50rpx;
+        color: $dark-9;
+      }
+    }
+  }
+
+  .list-box {
+    .list-item {
+      background: #fff;
+      border-bottom: 1rpx solid #dfdfdf;
+      padding: 30rpx;
+
+      .name {
+        font-size: 28rpx;
+
+        font-weight: 500;
+        color: rgba(102, 102, 102, 1);
+        line-height: 28rpx;
+        margin-bottom: 20rpx;
+      }
+
+      .time {
+        font-size: 24rpx;
+
+        font-weight: 500;
+        color: rgba(196, 196, 196, 1);
+        line-height: 24px;
+      }
+
+      .add {
+        font-size: 30rpx;
+
+        font-weight: 500;
+        color: #e6b873;
+      }
+
+      .minus {
+        font-size: 30rpx;
+
+        font-weight: 500;
+        color: $dark-3;
+      }
+    }
+  }
+</style>
diff --git a/src/sheep/api/infra/file.js b/src/sheep/api/infra/file.js
index fdf59ac5..a4cd093f 100644
--- a/src/sheep/api/infra/file.js
+++ b/src/sheep/api/infra/file.js
@@ -1,11 +1,9 @@
 import { baseUrl, apiPath, tenantId } from '@/sheep/config';
-import request from '@/sheep/request';
+import request, { getAccessToken } from '@/sheep/request';
 
 const FileApi = {
   // 上传文件
-  uploadFile: (file) => {
-    // TODO 芋艿：访问令牌的接入；
-    const token = uni.getStorageSync('token');
+  uploadFile: (file, directory = '') => {
     uni.showLoading({
       title: '上传中',
     });
@@ -15,10 +13,12 @@ const FileApi = {
         filePath: file,
         name: 'file',
         header: {
-          // Accept: 'text/json',
           Accept: '*/*',
           'tenant-id': tenantId,
-          // Authorization:  'Bearer test247',
+          Authorization: 'Bearer ' + getAccessToken(),
+        },
+        formData: {
+          directory,
         },
         success: (uploadFileRes) => {
           let result = JSON.parse(uploadFileRes.data);
@@ -43,12 +43,13 @@ const FileApi = {
   },
 
   // 获取文件预签名地址
-  getFilePresignedUrl: (path) => {
+  getFilePresignedUrl: (name, directory) => {
     return request({
       url: '/infra/file/presigned-url',
       method: 'GET',
       params: {
-        path,
+        name,
+        directory,
       },
     });
   },
diff --git a/src/sheep/api/infra/tenant.js b/src/sheep/api/infra/tenant.js
new file mode 100644
index 00000000..a1dea5f8
--- /dev/null
+++ b/src/sheep/api/infra/tenant.js
@@ -0,0 +1,19 @@
+import request from '@/sheep/request';
+
+/**
+ * 通过网站域名获取租户信息
+ * @param {string} website - 网站域名
+ * @returns {Promise<Object>} 租户信息
+ */
+export function getTenantByWebsite(website) {
+  return request({
+    url: '/system/tenant/get-by-website',
+    method: 'GET',
+    params: { website },
+    custom: {
+      isToken: false, // 避免登录情况下，跨租户访问被拦截
+      showLoading: false, // 不用加载中
+      showError: false, // 不展示错误提示
+    },
+  });
+}
diff --git a/src/sheep/api/member/auth.js b/src/sheep/api/member/auth.js
index 92a5ad46..ccd75a42 100644
--- a/src/sheep/api/member/auth.js
+++ b/src/sheep/api/member/auth.js
@@ -14,19 +14,6 @@ const AuthUtil = {
       },
     });
   },
-  // 使用手机 + 验证码注册
-  smsRegister: (data) => {
-    return request({
-      url: '/member/auth/sms-register',
-      method: 'POST',
-      data: { ...data, socialType: 35 },
-      custom: {
-        showSuccess: true,
-        loadingMsg: '注册中',
-        successMsg: '注册成功',
-      },
-    });
-  },
   // 使用手机 + 验证码登录
   smsLogin: (data) => {
     return request({
@@ -72,7 +59,7 @@ const AuthUtil = {
         refreshToken,
       },
       custom: {
-        loading: false, // 不用加载中
+        showLoading: false, // 不用加载中
         showError: false, // 不展示错误提示
       },
     });
@@ -139,6 +126,7 @@ const AuthUtil = {
       },
     });
   },
+  //
 };
 
 export default AuthUtil;
diff --git a/src/sheep/api/member/user.js b/src/sheep/api/member/user.js
index 81efd7ce..5f06e42c 100644
--- a/src/sheep/api/member/user.js
+++ b/src/sheep/api/member/user.js
@@ -7,7 +7,7 @@ const UserApi = {
       url: '/member/user/get',
       method: 'GET',
       custom: {
-        showLoading: true,
+        showLoading: false,
         auth: true,
       },
     });
@@ -21,8 +21,7 @@ const UserApi = {
       custom: {
         auth: true,
         showSuccess: true,
-        showLoading: true,
-        successMsg: '保存成功',
+        successMsg: '更新成功'
       },
     });
   },
@@ -35,7 +34,7 @@ const UserApi = {
       custom: {
         loadingMsg: '验证中',
         showSuccess: true,
-        successMsg: '修改成功',
+        successMsg: '修改成功'
       },
     });
   },
@@ -45,12 +44,12 @@ const UserApi = {
       url: '/member/user/update-mobile-by-weixin',
       method: 'PUT',
       data: {
-        code,
+        code
       },
       custom: {
         showSuccess: true,
         loadingMsg: '获取中',
-        successMsg: '修改成功',
+        successMsg: '修改成功'
       },
     });
   },
@@ -63,7 +62,7 @@ const UserApi = {
       custom: {
         loadingMsg: '验证中',
         showSuccess: true,
-        successMsg: '修改成功',
+        successMsg: '修改成功'
       },
     });
   },
@@ -76,10 +75,11 @@ const UserApi = {
       custom: {
         loadingMsg: '验证中',
         showSuccess: true,
-        successMsg: '修改成功',
-      },
+        successMsg: '修改成功'
+      }
     });
   },
+
 };
 
 export default UserApi;
diff --git a/src/sheep/api/migration/app.js b/src/sheep/api/migration/app.js
index 158414f3..bea2e56c 100644
--- a/src/sheep/api/migration/app.js
+++ b/src/sheep/api/migration/app.js
@@ -1,6 +1,6 @@
 import request from '@/sheep/request';
 
-// TODO 芋艿：小程序直播还不支持
+// TODO 芋艿：【直播】小程序直播还不支持
 export default {
   //小程序直播
   mplive: {
@@ -10,12 +10,12 @@ export default {
         method: 'GET',
         params: {
           ids: ids.join(','),
-        }
+        },
       }),
     getMpLink: () =>
       request({
         url: 'app/mplive/getMpLink',
-        method: 'GET'
+        method: 'GET',
       }),
   },
 };
diff --git a/src/sheep/api/pay/transfer.js b/src/sheep/api/pay/transfer.js
new file mode 100644
index 00000000..5e233055
--- /dev/null
+++ b/src/sheep/api/pay/transfer.js
@@ -0,0 +1,14 @@
+import request from '@/sheep/request';
+
+const PayTransferApi = {
+  // 同步转账单
+  syncTransfer: (id) => {
+    return request({
+      url: '/pay/transfer/sync',
+      method: 'GET',
+      params: { id },
+    });
+  },
+};
+
+export default PayTransferApi;
diff --git a/src/sheep/api/trade/brokerage.js b/src/sheep/api/trade/brokerage.js
index 206e7ec8..da557901 100644
--- a/src/sheep/api/trade/brokerage.js
+++ b/src/sheep/api/trade/brokerage.js
@@ -2,18 +2,18 @@ import request from '@/sheep/request';
 
 const BrokerageApi = {
   // 绑定分销用户
-  bindBrokerageUser: (data)=>{
+  bindBrokerageUser: (data) => {
     return request({
       url: '/trade/brokerage-user/bind',
       method: 'PUT',
-      data
+      data,
     });
   },
   // 获得个人分销信息
   getBrokerageUser: () => {
     return request({
       url: '/trade/brokerage-user/get',
-      method: 'GET'
+      method: 'GET',
     });
   },
   // 获得个人分销统计
@@ -24,12 +24,12 @@ const BrokerageApi = {
     });
   },
   // 获得分销记录分页
-  getBrokerageRecordPage: params => {
+  getBrokerageRecordPage: (params) => {
     if (params.status === undefined) {
-      delete params.status
+      delete params.status;
     }
     const queryString = Object.keys(params)
-      .map(key => encodeURIComponent(key) + '=' + params[key])
+      .map((key) => encodeURIComponent(key) + '=' + params[key])
       .join('&');
     return request({
       url: `/trade/brokerage-record/page?${queryString}`,
@@ -37,23 +37,41 @@ const BrokerageApi = {
     });
   },
   // 创建分销提现
-  createBrokerageWithdraw: data => {
+  createBrokerageWithdraw: (data) => {
     return request({
       url: '/trade/brokerage-withdraw/create',
       method: 'POST',
       data,
     });
   },
+  // 获得分销提现分页
+  getBrokerageWithdrawPage: (params) => {
+    const queryString = Object.keys(params)
+      .map((key) => encodeURIComponent(key) + '=' + params[key])
+      .join('&');
+    return request({
+      url: `/trade/brokerage-withdraw/page?${queryString}`,
+      method: 'GET',
+    });
+  },
+  // 获得分销提现详情
+  getBrokerageWithdraw: (id) => {
+    return request({
+      url: `/trade/brokerage-withdraw/get`,
+      method: 'GET',
+      params: { id },
+    });
+  },
   // 获得商品的分销金额
-  getProductBrokeragePrice: spuId => {
+  getProductBrokeragePrice: (spuId) => {
     return request({
       url: '/trade/brokerage-record/get-product-brokerage-price',
       method: 'GET',
-      params: { spuId }
+      params: { spuId },
     });
   },
   // 获得分销用户排行（基于佣金）
-  getRankByPrice: params => {
+  getRankByPrice: (params) => {
     const queryString = `times=${params.times[0]}&times=${params.times[1]}`;
     return request({
       url: `/trade/brokerage-user/get-rank-by-price?${queryString}`,
@@ -61,9 +79,9 @@ const BrokerageApi = {
     });
   },
   // 获得分销用户排行分页（基于佣金）
-  getBrokerageUserChildSummaryPageByPrice: params => {
+  getBrokerageUserChildSummaryPageByPrice: (params) => {
     const queryString = Object.keys(params)
-      .map(key => encodeURIComponent(key) + '=' + params[key])
+      .map((key) => encodeURIComponent(key) + '=' + params[key])
       .join('&');
     return request({
       url: `/trade/brokerage-user/rank-page-by-price?${queryString}`,
@@ -71,9 +89,9 @@ const BrokerageApi = {
     });
   },
   // 获得分销用户排行分页（基于用户量）
-  getBrokerageUserRankPageByUserCount: params => {
+  getBrokerageUserRankPageByUserCount: (params) => {
     const queryString = Object.keys(params)
-      .map(key => encodeURIComponent(key) + '=' + params[key])
+      .map((key) => encodeURIComponent(key) + '=' + params[key])
       .join('&');
     return request({
       url: `/trade/brokerage-user/rank-page-by-user-count?${queryString}`,
@@ -81,13 +99,13 @@ const BrokerageApi = {
     });
   },
   // 获得下级分销统计分页
-  getBrokerageUserChildSummaryPage: params => {
+  getBrokerageUserChildSummaryPage: (params) => {
     return request({
       url: '/trade/brokerage-user/child-summary-page',
       method: 'GET',
       params,
-    })
-  }
-}
+    });
+  },
+};
 
-export default BrokerageApi
+export default BrokerageApi;
diff --git a/src/sheep/components/s-auth-modal/components/account-login.vue b/src/sheep/components/s-auth-modal/components/account-login.vue
index 579614c3..d5d60563 100644
--- a/src/sheep/components/s-auth-modal/components/account-login.vue
+++ b/src/sheep/components/s-auth-modal/components/account-login.vue
@@ -60,8 +60,8 @@
 
   const props = defineProps({
     agreeStatus: {
-      type: Boolean,
-      default: false,
+      type: [Boolean, null],
+      default: null,
     },
   });
 
@@ -87,10 +87,14 @@
       });
     if (!validate) return;
 
-    // 同意协议
-    if (!props.agreeStatus) {
-      emits('onConfirm', true)
-      sheep.$helper.toast('请勾选同意');
+    // 检查协议状态
+    if (props.agreeStatus !== true) {
+      emits('onConfirm', true);
+      if (props.agreeStatus === false) {
+        sheep.$helper.toast('您已拒绝协议，无法继续登录');
+      } else {
+        sheep.$helper.toast('请选择是否同意协议');
+      }
       return;
     }
 
diff --git a/src/sheep/components/s-auth-modal/components/sms-login.vue b/src/sheep/components/s-auth-modal/components/sms-login.vue
index 0651b780..8b728acd 100644
--- a/src/sheep/components/s-auth-modal/components/sms-login.vue
+++ b/src/sheep/components/s-auth-modal/components/sms-login.vue
@@ -31,9 +31,9 @@
           <template v-slot:right>
             <button
               class="ss-reset-button code-btn code-btn-start"
-              :disabled="state.isMobileEnd"
-              :class="{ 'code-btn-end': state.isMobileEnd }"
-              @tap="getSmsCode('smsLogin', state.model.mobile)"
+              :disabled="state.isMobileEnd || props.agreeStatus === false"
+              :class="{ 'code-btn-end': state.isMobileEnd || props.agreeStatus === false }"
+              @tap="checkAgreementAndGetSmsCode"
             >
               {{ getSmsTimer('smsLogin') }}
             </button>
@@ -71,8 +71,8 @@
 
   const props = defineProps({
     agreeStatus: {
-      type: Boolean,
-      default: false,
+      type: [Boolean, null],
+      default: null,
     },
   });
 
@@ -90,6 +90,20 @@
     },
   });
 
+  // 检查协议并获取验证码
+  function checkAgreementAndGetSmsCode() {
+    if (props.agreeStatus !== true) {
+      emits('onConfirm', true);
+      if (props.agreeStatus === false) {
+        sheep.$helper.toast('您已拒绝协议，无法发送验证码');
+      } else {
+        sheep.$helper.toast('请选择是否同意协议');
+      }
+      return;
+    }
+    getSmsCode('smsLogin', state.model.mobile);
+  }
+
   // 短信登录
   async function smsLoginSubmit() {
     // 参数校验
@@ -101,9 +115,14 @@
     if (!validate) {
       return;
     }
-    if (!props.agreeStatus) {
-      emits('onConfirm', true)
-      sheep.$helper.toast('请勾选同意');
+    // 检查协议状态
+    if (props.agreeStatus !== true) {
+      emits('onConfirm', true);
+      if (props.agreeStatus === false) {
+        sheep.$helper.toast('您已拒绝协议，无法继续登录');
+      } else {
+        sheep.$helper.toast('请选择是否同意协议');
+      }
       return;
     }
     // 提交数据
diff --git a/src/sheep/components/s-auth-modal/s-auth-modal.vue b/src/sheep/components/s-auth-modal/s-auth-modal.vue
index 41a7dbbb..6303b262 100644
--- a/src/sheep/components/s-auth-modal/s-auth-modal.vue
+++ b/src/sheep/components/s-auth-modal/s-auth-modal.vue
@@ -1,187 +1,98 @@
-<template>
-  <!-- 规格弹窗 -->
-  <su-popup :show="authType !== ''" round="10" :showClose="true" @close="closeAuthModal">
-    <view class="login-wrap">
-      <!-- 1. 账号密码登录 accountLogin -->
-      <account-login
-        v-if="authType === 'accountLogin'"
-        :agreeStatus="state.protocol"
-        @onConfirm="onConfirm"
-      />
-
-      <!-- 2. 短信登录  smsLogin -->
-      <sms-login
-        v-if="authType === 'smsLogin'"
-        :agreeStatus="state.protocol"
-        @onConfirm="onConfirm"
-      />
-
-      <!-- 3. 忘记密码 resetPassword-->
-      <reset-password v-if="authType === 'resetPassword'" />
-
-      <!-- 4. 绑定手机号 changeMobile -->
-      <change-mobile v-if="authType === 'changeMobile'" />
-
-      <!-- 5. 修改密码 changePassword-->
-      <changePassword v-if="authType === 'changePassword'" />
-
-      <!-- 6. 微信小程序授权 -->
-      <mp-authorization v-if="authType === 'mpAuthorization'" />
-
-      <!-- 7. 第三方登录 -->
-      <view
-        v-if="['accountLogin', 'smsLogin'].includes(authType)"
-        class="auto-login-box ss-flex ss-flex-col ss-row-center ss-col-center"
-      >
-        <!-- 7.1 微信小程序的快捷登录 -->
-        <view v-if="sheep.$platform.name === 'WechatMiniProgram'" class="ss-flex register-box">
-          <view class="register-title">还没有账号?</view>
-          <button
-            class="ss-reset-button login-btn"
-            open-type="getPhoneNumber"
-            @getphonenumber="getPhoneNumber"
-          >
-            快捷登录
-          </button>
-          <view class="circle" />
-        </view>
-
-        <!-- 7.2 微信的公众号、App、小程序的登录，基于 openid + code -->
-        <button
-          v-if="
-            ['WechatOfficialAccount', 'WechatMiniProgram', 'App'].includes(sheep.$platform.name) &&
-            sheep.$platform.isWechatInstalled
-          "
-          @tap="thirdLogin('wechat')"
-          class="ss-reset-button auto-login-btn"
-        >
-          <image
-            class="auto-login-img"
-            :src="sheep.$url.static('/static/img/shop/platform/wechat.png')"
-          />
-        </button>
-
-        <!-- 7.3 iOS 登录 TODO 芋艿：等后面搞 App 再弄 -->
-        <button
-          v-if="sheep.$platform.os === 'ios' && sheep.$platform.name === 'App'"
-          @tap="thirdLogin('apple')"
-          class="ss-reset-button auto-login-btn"
-        >
-          <image
-            class="auto-login-img"
-            :src="sheep.$url.static('/static/img/shop/platform/apple.png')"
-          />
-        </button>
-      </view>
-
-      <!-- 用户协议的勾选 -->
-      <view
-        v-if="['accountLogin', 'smsLogin'].includes(authType)"
-        class="agreement-box ss-flex ss-row-center"
-        :class="{ shake: currentProtocol }"
-      >
-        <label class="radio ss-flex ss-col-center" @tap="onChange">
-          <radio
-            :checked="state.protocol"
-            color="var(--ui-BG-Main)"
-            style="transform: scale(0.8)"
-            @tap.stop="onChange"
-          />
-          <view class="agreement-text ss-flex ss-col-center ss-m-l-8">
-            我已阅读并遵守
-            <view class="tcp-text" @tap.stop="onProtocol('用户协议')"> 《用户协议》 </view>
-            <view class="agreement-text">与</view>
-            <view class="tcp-text" @tap.stop="onProtocol('隐私协议')"> 《隐私协议》 </view>
-          </view>
-        </label>
-      </view>
-      <view class="safe-box" />
-    </view>
-  </su-popup>
-</template>
+<template></template>
 
 <script setup>
-  import { computed, reactive, ref } from 'vue';
+  // import { computed, reactive, ref } from 'vue';
+  // import sheep from '@/sheep';
+  // import accountLogin from './components/account-login.vue';
+  // import smsLogin from './components/sms-login.vue';
+  // import resetPassword from './components/reset-password.vue';
+  // import changeMobile from './components/change-mobile.vue';
+  // import changePassword from './components/change-password.vue';
+  // import mpAuthorization from './components/mp-authorization.vue';
+  // import { closeAuthModal, showAuthModal } from '@/sheep/hooks/useModal';
   import sheep from '@/sheep';
-  import accountLogin from './components/account-login.vue';
-  import smsLogin from './components/sms-login.vue';
-  import resetPassword from './components/reset-password.vue';
-  import changeMobile from './components/change-mobile.vue';
-  import changePassword from './components/change-password.vue';
-  import mpAuthorization from './components/mp-authorization.vue';
-  import { closeAuthModal, showAuthModal } from '@/sheep/hooks/useModal';
 
-  const modalStore = sheep.$store('modal');
+  // const modalStore = sheep.$store('modal');
   // 授权弹窗类型
-  const authType = computed(() => modalStore.auth);
+  // const authType = computed(() => modalStore.auth);
 
-  const state = reactive({
-    protocol: false,
-  });
+  // const state = reactive({
+  //   protocol: null, // null表示未选择，true表示同意，false表示拒绝
+  // });
 
-  const currentProtocol = ref(false);
+  // const currentProtocol = ref(false);
 
-  // 勾选协议
-  function onChange() {
-    state.protocol = !state.protocol;
-  }
+  // 同意协议
+  // function onAgree() {
+  //   state.protocol = true;
+  // }
 
-  // 查看协议
-  function onProtocol(title) {
-    closeAuthModal();
-    sheep.$router.go('/pages/public/richtext', {
-      title,
-    });
-  }
+  // // 拒绝协议
+  // function onRefuse() {
+  //   state.protocol = false;
+  // }
 
-  // 点击登录 / 注册事件
-  function onConfirm(e) {
-    currentProtocol.value = e;
-    setTimeout(() => {
-      currentProtocol.value = false;
-    }, 1000);
-  }
+  // // 查看协议
+  // function onProtocol(title) {
+  //   closeAuthModal();
+  //   sheep.$router.go('/pages/public/richtext', {
+  //     title,
+  //   });
+  // }
 
-  // 第三方授权登陆（微信小程序、Apple）
-  const thirdLogin = async (provider) => {
-    if (!state.protocol) {
-      currentProtocol.value = true;
-      setTimeout(() => {
-        currentProtocol.value = false;
-      }, 1000);
-      sheep.$helper.toast('请勾选同意');
-      return;
-    }
-    const loginRes = await sheep.$platform.useProvider(provider).login();
-    if (loginRes) {
-      const userInfo = await sheep.$store('user').getInfo();
-      closeAuthModal();
-      // 如果用户已经有头像和昵称，不需要再次授权
-      if (userInfo.avatar && userInfo.nickname) {
-        return;
-      }
+  // // 点击登录 / 注册事件
+  // function onConfirm(e) {
+  //   currentProtocol.value = e;
+  //   setTimeout(() => {
+  //     currentProtocol.value = false;
+  //   }, 1000);
+  // }
 
-      // 触发小程序授权信息弹框
-      // #ifdef MP-WEIXIN
-      showAuthModal('mpAuthorization');
-      // #endif
-    }
-  };
+  // // 第三方授权登陆（微信小程序、Apple）
+  // const thirdLogin = async (provider) => {
+  //   if (state.protocol !== true) {
+  //     currentProtocol.value = true;
+  //     setTimeout(() => {
+  //       currentProtocol.value = false;
+  //     }, 1000);
 
-  // 微信小程序的“手机号快速验证”：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
-  const getPhoneNumber = async (e) => {
-    if (e.detail.errMsg !== 'getPhoneNumber:ok') {
-      sheep.$helper.toast('快捷登录失败');
-      return;
-    }
-    let result = await sheep.$platform.useProvider().mobileLogin(e.detail);
-    if (result) {
-      closeAuthModal();
-    }
-  };
+  //     if (state.protocol === false) {
+  //       sheep.$helper.toast('您已拒绝协议，无法继续登录');
+  //     } else {
+  //       sheep.$helper.toast('请选择是否同意协议');
+  //     }
+  //     return;
+  //   }
+  //   const loginRes = await sheep.$platform.useProvider(provider).login();
+  //   if (loginRes) {
+  //     const userInfo = await sheep.$store('user').getInfo();
+  //     closeAuthModal();
+  //     // 如果用户已经有头像和昵称，不需要再次授权
+  //     if (userInfo.avatar && userInfo.nickname) {
+  //       return;
+  //     }
+
+  //     // 触发小程序授权信息弹框
+  //     // #ifdef MP-WEIXIN
+  //     showAuthModal('mpAuthorization');
+  //     // #endif
+  //   }
+  // };
+
+  // // 微信小程序的“手机号快速验证”：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
+  // const getPhoneNumber = async (e) => {
+  //   if (e.detail.errMsg !== 'getPhoneNumber:ok') {
+  //     sheep.$helper.toast('快捷登录失败');
+  //     return;
+  //   }
+  //   let result = await sheep.$platform.useProvider().mobileLogin(e.detail);
+  //   if (result) {
+  //     closeAuthModal();
+  //   }
+  // };
 </script>
 
-<style lang="scss" scoped>
+<!-- <style lang="scss" scoped>
   @import './index.scss';
 
   .shake {
@@ -244,4 +155,23 @@
   .agreement-text {
     color: $dark-9;
   }
-</style>
+
+  .agreement-title {
+    font-size: 28rpx;
+    color: $dark-9;
+    text-align: left;
+    width: 100%;
+    padding-left: 60rpx;
+  }
+
+  .agreement-options-container {
+    width: 100%;
+    padding-left: 100rpx;
+  }
+
+  .agreement-option {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+  }
+</style> -->
diff --git a/src/sheep/components/s-block-item/s-block-item.vue b/src/sheep/components/s-block-item/s-block-item.vue
index 24fd6ab2..5272dcdb 100644
--- a/src/sheep/components/s-block-item/s-block-item.vue
+++ b/src/sheep/components/s-block-item/s-block-item.vue
@@ -56,23 +56,10 @@
     <s-wallet-card v-if="type === 'UserWallet'" :data="data" :styles="styles" />
     <!-- 用户组件：用户卡券 -->
     <s-coupon-card v-if="type === 'UserCoupon'" :data="data" :styles="styles" />
-
-    <!-- 分销组件：分销中心 -->
-    <!-- 分销组件：分销中心 -->
-    <!-- <img src="@/static/fenxiao.png" alt="分销中心" width="1rpx" height="1rpx" /> -->
-
-    <view class="distribution-item" @click="goToDistribution" v-if="type === 'UserCoupon'">
-      <view class="distribution-icon">
-        <uni-icons type="link" size="30"></uni-icons>
-      </view>
-      <view class="distribution-text">分销中心</view>
-    </view>
   </view>
 </template>
 
 <script setup>
-  import sheep from '@/sheep';
-
   /**
    * 装修组件 - 组件集
    */
@@ -90,45 +77,7 @@
       default() {},
     },
   });
-
   function onSearch() {}
-
-  // 跳转到分销中心
-  function goToDistribution() {
-    sheep.$router.go('/pages/commission/index');
-  }
 </script>
 
-<style scoped>
-  .distribution-item {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    padding-top: 16rpx;
-    margin-left: 64rpx;
-    /* margin: 20rpx; */
-    cursor: pointer;
-    width: auto;
-    align-self: flex-start;
-  }
-
-  .distribution-icon {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    margin-bottom: 10rpx;
-  }
-
-  .distribution-text {
-    font-size: 24rpx;
-    color: #333;
-    text-align: left;
-    margin-left: -8rpx;
-    margin-top: 8rpx;
-  }
-
-  .distribution-item:active {
-    opacity: 0.7;
-  }
-</style>
+<style></style>
diff --git a/src/sheep/components/s-block/s-block.vue b/src/sheep/components/s-block/s-block.vue
index 152b8a67..efebe341 100644
--- a/src/sheep/components/s-block/s-block.vue
+++ b/src/sheep/components/s-block/s-block.vue
@@ -18,17 +18,16 @@
   });
 
   // 组件样式
-
   const elBackground = computed(() => {
     if (props.styles) {
-      if (props.styles.bgType === 'color')
+      if (props.styles.bgType === 'color') {
         return { background: props.styles.bgColor };
-      if (props.styles.bgType === 'img')
+      }
+      if (props.styles.bgType === 'img') {
         return {
-          background: `url(${sheep.$url.cdn(
-            props.styles.bgImage,
-          )}) no-repeat top center / 100% auto`,
+          background: `url(${sheep.$url.cdn(props.styles.bgImg)}) no-repeat top center / 100% auto`,
         };
+      }
     }
   });
 
diff --git a/src/sheep/components/s-coupon-block/s-coupon-block.vue b/src/sheep/components/s-coupon-block/s-coupon-block.vue
index 89a0f0e8..3078247b 100644
--- a/src/sheep/components/s-coupon-block/s-coupon-block.vue
+++ b/src/sheep/components/s-coupon-block/s-coupon-block.vue
@@ -1,176 +1,192 @@
 <!-- 装修营销组件：优惠券  -->
 <template>
-	<scroll-view class="scroll-box" scroll-x scroll-anchoring :style="[bgStyle, { marginLeft: `${data.space}px` }]">
-		<view class="coupon-box ss-flex" :style="couponList.length === 2 ? couponBoxStyleTwo : couponBoxStyleNormal">
-			<view class="coupon-item" :style="[couponBg, { marginLeft: `${data.space}px` }]"
-				v-for="(item, index) in couponList" :key="index">
-				<su-coupon :size="SIZE_LIST[columns - 1]" :textColor="data.textColor" background="" :couponId="item.id"
-					:title="item.name" :type="formatCouponDiscountType(item)" :value="formatCouponDiscountValue(item)"
-					:sellBy="formatValidityType(item)">
-					<template v-slot:btn>
-						<!-- 两列时，领取按钮坚排 -->
-						<button v-if="columns === 2" @click.stop="onGetCoupon(item.id)"
-							class="ss-reset-button card-btn vertical" :style="[btnStyles]">
-							<view class="btn-text">立即领取</view>
-						</button>
-						<button v-else class="ss-reset-button card-btn" :style="[btnStyles]"
-							@click.stop="onGetCoupon(item.id)">
-							立即领取
-						</button>
-					</template>
-				</su-coupon>
-			</view>
-		</view>
-	</scroll-view>
+  <scroll-view
+    class="scroll-box"
+    scroll-x
+    scroll-anchoring
+    :style="[bgStyle, { marginLeft: `${data.space}px` }]"
+  >
+    <view
+      class="coupon-box ss-flex"
+      :style="couponList.length === 2 ? couponBoxStyleTwo : couponBoxStyleNormal"
+    >
+      <view
+        class="coupon-item"
+        :style="[couponBg, { marginLeft: `${data.space}px` }]"
+        v-for="(item, index) in couponList"
+        :key="index"
+      >
+        <su-coupon
+          :size="SIZE_LIST[columns - 1]"
+          :textColor="data.textColor"
+          background=""
+          :couponId="item.id"
+          :title="formatCouponTitle(item)"
+          :type="formatCouponDiscountType(item)"
+          :value="formatCouponDiscountValue(item)"
+          :sellBy="formatValidityType(item)"
+          :surplus="item.totalCount === -1 ? -1 : item.totalCount - item.takeCount"
+        >
+          <template v-slot:btn>
+            <!-- 两列时，领取按钮坚排 -->
+            <button
+              v-if="columns === 2"
+              @click.stop="onGetCoupon(item.id)"
+              class="ss-reset-button card-btn vertical"
+              :style="[btnStyles]"
+            >
+              <view class="btn-text">立即领取</view>
+            </button>
+            <button
+              v-else
+              class="ss-reset-button card-btn"
+              :style="[btnStyles]"
+              @click.stop="onGetCoupon(item.id)"
+            >
+              立即领取
+            </button>
+          </template>
+        </su-coupon>
+      </view>
+    </view>
+  </scroll-view>
 </template>
 
 <script setup>
-	import sheep from '@/sheep';
-	import CouponApi from '@/sheep/api/promotion/coupon';
-	import {
-		ref,
-		onMounted,
-		computed
-	} from 'vue';
-	import {
-		CouponTemplateValidityTypeEnum,
-		PromotionDiscountTypeEnum
-	} from "@/sheep/util/const";
-	import {
-		floatToFixed2,
-		formatDate
-	} from "@/sheep/util";
+  import sheep from '@/sheep';
+  import CouponApi from '@/sheep/api/promotion/coupon';
+  import { ref, onMounted, computed } from 'vue';
+  import { CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum } from '@/sheep/helper/const';
+  import { floatToFixed2, formatDate } from '@/sheep/helper/utils';
+  import { formatDiscountPercent } from '@/sheep/hooks/useGoods';
 
-	const props = defineProps({
-		data: {
-			type: Object,
-			default: () => ({}),
-		},
-		styles: {
-			type: Object,
-			default: () => ({}),
-		},
-	});
-	const {
-		columns,
-		button
-	} = props.data;
-	const SIZE_LIST = ['lg', 'md', 'xs']
-	const couponBg = {
-		background: `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`,
-	};
-	const btnStyles = {
-		background: button.bgColor,
-		color: button.color,
-	};
-	// 两列优惠券时的排版方式
-	const couponBoxStyleNormal = {
-		'display': 'flex',
-		'justify-content': 'space-between'
-	};
-	// 非两列优惠券时的排版方式
-	const couponBoxStyleTwo = {
-		'display': 'flex',
-		'justify-content': 'space-around'
-	};
-	// 设置背景样式
-	const bgStyle = computed(() => {
-		// 直接从 props.styles 解构
-		const {
-			bgType,
-			bgImg,
-			bgColor
-		} = props.styles;
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    styles: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
+  const { columns, button } = props.data;
+  const SIZE_LIST = ['lg', 'md', 'xs'];
+  const couponBg = {
+    background: `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`,
+  };
+  const btnStyles = {
+    background: button.bgColor,
+    color: button.color,
+  };
+  // 两列优惠券时的排版方式
+  const couponBoxStyleNormal = {
+    display: 'flex',
+    'justify-content': 'space-between',
+  };
+  // 非两列优惠券时的排版方式
+  const couponBoxStyleTwo = {
+    display: 'flex',
+    'justify-content': 'space-around',
+  };
+  // 设置背景样式
+  const bgStyle = computed(() => {
+    // 直接从 props.styles 解构
+    const { bgType, bgImg, bgColor } = props.styles;
 
-		// 根据 bgType 返回相应的样式
-		return {
-			background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor
-		};
-	});
-	// 格式化【折扣类型】
-	const formatCouponDiscountType = (coupon) => {
-		if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
-			return 'reduce'
-		}
-		if (coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
-			return 'percent'
-		}
-		return `未知【${coupon.discountType}】`
-	}
+    // 根据 bgType 返回相应的样式
+    return {
+      background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor,
+    };
+  });
+  // 格式化【折扣类型】
+  const formatCouponDiscountType = (coupon) => {
+    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+      return 'reduce';
+    }
+    if (coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
+      return 'percent';
+    }
+    return `未知【${coupon.discountType}】`;
+  };
 
-	// 格式化【折扣】
-	const formatCouponDiscountValue = (coupon) => {
-		if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
-			return floatToFixed2(coupon.discountPrice)
-		}
-		if (coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
-			return coupon.discountPercent
-		}
-		return `未知【${coupon.discountType}】`
-	}
+  // 格式化【折扣】
+  const formatCouponDiscountValue = (coupon) => {
+    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+      return floatToFixed2(coupon.discountPrice);
+    }
+    if (coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
+      return formatDiscountPercent(coupon.discountPercent);
+    }
+    return `未知【${coupon.discountType}】`;
+  };
 
-	// 格式化【有效期限】
-	const formatValidityType = (row) => {
-		if (row.validityType === CouponTemplateValidityTypeEnum.DATE.type) {
-			return `${formatDate(row.validStartTime)} 至 ${formatDate(row.validEndTime)}`
-		}
-		if (row.validityType === CouponTemplateValidityTypeEnum.TERM.type) {
-			return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用`
-		}
-		return '未知【' + row.validityType + '】'
-	}
+  // 格式化【有效期限】
+  const formatValidityType = (row) => {
+    if (row.validityType === CouponTemplateValidityTypeEnum.DATE.type) {
+      return `${formatDate(row.validStartTime)} 至 ${formatDate(row.validEndTime)}`;
+    }
+    if (row.validityType === CouponTemplateValidityTypeEnum.TERM.type) {
+      return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用`;
+    }
+    return '未知【' + row.validityType + '】';
+  };
 
-	const couponList = ref([]);
-	// 立即领取优惠券
-	async function onGetCoupon(id) {
-		const {
-			error,
-			msg
-		} = await CouponApi.takeCoupon(id);
-		if (error === 0) {
-			uni.showToast({
-				title: msg,
-				icon: 'none',
-			});
-			return
-		}
-		await getCouponTemplateList()
-	}
-	const getCouponTemplateList = async () => {
-		const {
-			data
-		} = await CouponApi.getCouponTemplateListByIds(props.data.couponIds.join(','));
-		couponList.value = data;
-	}
-	onMounted(() => {
-		getCouponTemplateList()
-	});
+  // 格式化【优惠券标题】
+  const formatCouponTitle = (coupon) => {
+    return `满${floatToFixed2(coupon.usePrice)}元${
+      coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
+        ? ',减' + floatToFixed2(coupon.discountPrice) + '元'
+        : ',打' + formatDiscountPercent(coupon.discountPercent) + '折'
+    }`;
+  };
+
+  const couponList = ref([]);
+  // 立即领取优惠券
+  async function onGetCoupon(id) {
+    const { error, msg } = await CouponApi.takeCoupon(id);
+    if (error === 0) {
+      uni.showToast({
+        title: msg,
+        icon: 'none',
+      });
+      return;
+    }
+    await getCouponTemplateList();
+  }
+  const getCouponTemplateList = async () => {
+    const { data } = await CouponApi.getCouponTemplateListByIds(props.data.couponIds.join(','));
+    couponList.value = data;
+  };
+  onMounted(() => {
+    getCouponTemplateList();
+  });
 </script>
 
 <style lang="scss" scoped>
-	.card-btn {
-		width: 140rpx;
-		height: 50rpx;
-		border-radius: 25rpx;
-		font-size: 24rpx;
-		line-height: 50rpx;
+  .card-btn {
+    width: 140rpx;
+    height: 50rpx;
+    border-radius: 25rpx;
+    font-size: 24rpx;
+    line-height: 50rpx;
 
-		&.vertical {
-			width: 50rpx;
-			height: 140rpx;
-			margin: auto 20rpx auto 0;
+    &.vertical {
+      width: 50rpx;
+      height: 140rpx;
+      margin: auto 20rpx auto 0;
 
-			.btn-text {
-				font-size: 24rpx;
-				text-align: center;
-				writing-mode: vertical-lr;
-			}
-		}
-	}
+      .btn-text {
+        font-size: 24rpx;
+        text-align: center;
+        writing-mode: vertical-lr;
+      }
+    }
+  }
 
-	.coupon-item {
-		&:nth-of-type(1) {
-			margin-left: 0 !important;
-		}
-	}
-</style>
\ No newline at end of file
+  .coupon-item {
+    &:nth-of-type(1) {
+      margin-left: 0 !important;
+    }
+  }
+</style>
diff --git a/src/sheep/components/s-custom-navbar/components/navbar-item.vue b/src/sheep/components/s-custom-navbar/components/navbar-item.vue
index 7d299b2e..3a1dd2c4 100644
--- a/src/sheep/components/s-custom-navbar/components/navbar-item.vue
+++ b/src/sheep/components/s-custom-navbar/components/navbar-item.vue
@@ -23,10 +23,13 @@
     <view class="ss-flex-1" v-if="data.type === 'search'" :style="[{ width: width }]">
       <s-search-block
         :placeholder="data.placeholder || '搜索关键字'"
+        :placeholder-position="data.placeholderPosition"
         :radius="data.borderRadius"
-        elBackground="#fff"
+        :el-background="data.backgroundColor"
+        :font-color="data.textColor"
         :height="height"
         :width="width"
+        :show-scan="data.showScan"
         @click="sheep.$router.go('/pages/index/search')"
       ></s-search-block>
     </view>
diff --git a/src/sheep/components/s-goods-column/s-goods-column.vue b/src/sheep/components/s-goods-column/s-goods-column.vue
index 74c57b07..2f07705e 100644
--- a/src/sheep/components/s-goods-column/s-goods-column.vue
+++ b/src/sheep/components/s-goods-column/s-goods-column.vue
@@ -40,14 +40,21 @@
           :style="[{ color: goodsFields.price.color }]"
         >
           <!-- 活动价格 -->
-          <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
+          <view
+            class="ss-flex"
+            v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type"
+          >
             <image
               :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
               class="point-img"
             ></image>
             <text class="point-text ss-m-r-16">
               {{ data.point }}
-              {{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
+              {{
+                !data.pointPrice || data.pointPrice === 0
+                  ? ''
+                  : `+${priceUnit}${fen2yuan(data.pointPrice)}`
+              }}
             </text>
           </view>
           <template v-else>
@@ -100,14 +107,21 @@
           :style="[{ color: goodsFields.price.color }]"
         >
           <!-- 活动价格 -->
-          <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
+          <view
+            class="ss-flex"
+            v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type"
+          >
             <image
               :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
               class="point-img"
             ></image>
             <text class="point-text ss-m-r-16">
               {{ data.point }}
-              {{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
+              {{
+                !data.pointPrice || data.pointPrice === 0
+                  ? ''
+                  : `+${priceUnit}${fen2yuan(data.pointPrice)}`
+              }}
             </text>
           </view>
           <template v-else>
@@ -126,7 +140,19 @@
       <view v-if="tagStyle.show" class="tag-icon-box">
         <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" />
       </view>
-      <image class="md-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="widthFix" />
+      <image
+        v-if="data.image_wh"
+        class="md-img-box"
+        :src="sheep.$url.cdn(data.image || data.picUrl)"
+        mode="widthFix"
+      />
+      <image
+        v-else
+        class="md-img-box"
+        :src="sheep.$url.cdn(data.image || data.picUrl)"
+        :style="[{ height: defaultImgWidth * 2 + 'rpx' }]"
+        mode="aspectFill"
+      />
       <view
         class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16"
         :id="elId"
@@ -174,14 +200,21 @@
             :style="[{ color: goodsFields.price.color }]"
           >
             <!-- 活动价格 -->
-            <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
+            <view
+              class="ss-flex"
+              v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type"
+            >
               <image
                 :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
                 class="point-img"
               ></image>
               <text class="point-text ss-m-r-16">
                 {{ data.point }}
-                {{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
+                {{
+                  !data.pointPrice || data.pointPrice === 0
+                    ? ''
+                    : `+${priceUnit}${fen2yuan(data.pointPrice)}`
+                }}
               </text>
             </view>
             <template v-else>
@@ -275,14 +308,23 @@
           <view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS">
             <view class="sl-goods-price ss-m-r-12" :style="[{ color: goodsFields.price.color }]">
               <!-- 活动价格 -->
-              <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
+              <view
+                class="ss-flex"
+                v-if="
+                  data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type
+                "
+              >
                 <image
                   :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
                   class="point-img"
                 ></image>
                 <text class="point-text ss-m-r-16">
                   {{ data.point }}
-                  {{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
+                  {{
+                    !data.pointPrice || data.pointPrice === 0
+                      ? ''
+                      : `+${priceUnit}${fen2yuan(data.pointPrice)}`
+                  }}
                 </text>
               </view>
               <template v-else>
@@ -369,14 +411,23 @@
           <view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS">
             <view class="sl-goods-price ss-m-r-12" :style="[{ color: goodsFields.price.color }]">
               <!-- 活动价格 -->
-              <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
+              <view
+                class="ss-flex"
+                v-if="
+                  data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type
+                "
+              >
                 <image
                   :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
                   class="point-img"
                 ></image>
                 <text class="ss-m-r-16">
                   {{ data.point }}
-                  {{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
+                  {{
+                    !data.pointPrice || data.pointPrice === 0
+                      ? ''
+                      : `+${priceUnit}${fen2yuan(data.pointPrice)}`
+                  }}
                 </text>
               </view>
               <template v-else>
@@ -441,7 +492,7 @@
    * @event {Function()} click                    - 点击卡片
    *
    */
-  import { computed, getCurrentInstance, nextTick, onMounted } from 'vue';
+  import { computed, ref, reactive, getCurrentInstance, nextTick, onMounted } from 'vue';
   import sheep from '@/sheep';
   import {
     fen2yuan,
@@ -451,7 +502,10 @@
     getRewardActivityRuleItemDescriptions,
   } from '@/sheep/hooks/useGoods';
   import { isArray } from 'lodash-es';
-  import { PromotionActivityTypeEnum } from '@/sheep/util/const';
+  import { PromotionActivityTypeEnum } from '@/sheep/helper/const';
+
+  // 数据
+  let defaultImgWidth = ref(0);
 
   // 接收参数
   const props = defineProps({
@@ -578,14 +632,25 @@
   const salesAndStock = computed(() => {
     let text = [];
     if (props.goodsFields.salesCount?.show) {
-      if (props.data.activityType && props.data.activityType === PromotionActivityTypeEnum.POINT.type) {
-        text.push(formatExchange(props.data.sales_show_type, (props.data.pointTotalStock || 0) - (props.data.pointStock || 0)));
+      if (
+        props.data.activityType &&
+        props.data.activityType === PromotionActivityTypeEnum.POINT.type
+      ) {
+        text.push(
+          formatExchange(
+            props.data.sales_show_type,
+            (props.data.pointTotalStock || 0) - (props.data.pointStock || 0),
+          ),
+        );
       } else {
         text.push(formatSales(props.data.sales_show_type, props.data.salesCount));
       }
     }
     if (props.goodsFields.stock?.show) {
-      if (props.data.activityType && props.data.activityType === PromotionActivityTypeEnum.POINT.type) {
+      if (
+        props.data.activityType &&
+        props.data.activityType === PromotionActivityTypeEnum.POINT.type
+      ) {
         text.push(formatStock(props.data.stock_show_type, props.data.pointTotalStock));
       } else {
         text.push(formatStock(props.data.stock_show_type, props.data.stock));
@@ -613,14 +678,17 @@
         scrollOffset: true,
       });
       view.exec((data) => {
+        console.log(data, 'data');
         let totalHeight = 0;
         const goodsPriceCard = data[0];
-        if (props.data.image_wh) {
+        defaultImgWidth.value = data[0].width;
+
+        if (props.data.image_wh && Number(props.data.image_wh.w)) {
           totalHeight =
             (goodsPriceCard.width / props.data.image_wh.w) * props.data.image_wh.h +
             goodsPriceCard.height;
         } else {
-          totalHeight = goodsPriceCard.width;
+          totalHeight = goodsPriceCard.width + goodsPriceCard.height;
         }
         emits('getHeight', totalHeight);
       });
diff --git a/src/sheep/components/s-groupon-block/s-groupon-block.vue b/src/sheep/components/s-groupon-block/s-groupon-block.vue
index b8415567..cf924969 100644
--- a/src/sheep/components/s-groupon-block/s-groupon-block.vue
+++ b/src/sheep/components/s-groupon-block/s-groupon-block.vue
@@ -262,7 +262,6 @@
       const spu = state.spuList.find((spu) => activity.spuId === spu.id);
       if (spu) {
         // 赋值活动名称
-        // TODO 芋艿：暂定活动名。会在调研一些类似有赞、淘宝、京东的选择
         spu.name = activity.name;
         // 赋值最低价格
         spu.price = Math.min(combinationPrice, spu.price);
diff --git a/src/sheep/components/s-image-banner/s-image-banner.vue b/src/sheep/components/s-image-banner/s-image-banner.vue
index 478e7af7..a4e9a01a 100644
--- a/src/sheep/components/s-image-banner/s-image-banner.vue
+++ b/src/sheep/components/s-image-banner/s-image-banner.vue
@@ -9,6 +9,7 @@
     :autoplay="data.autoplay"
     :interval="data.interval * 1000"
     :mode="data.type"
+    :height="px2rpx(data.height)"
   />
 </template>
 
@@ -28,6 +29,12 @@
     },
   });
 
+  function px2rpx(px) {
+    //计算比例
+    let scale = uni.upx2px(100)/100;
+    return px/scale
+  }
+
   const imgList = computed(() =>
       props.data.items.map((item) => {
         const src = item.type === 'img' ? item.imgUrl : item.videoUrl;
diff --git a/src/sheep/components/s-layout/s-layout.vue b/src/sheep/components/s-layout/s-layout.vue
index df15c317..90c388cf 100644
--- a/src/sheep/components/s-layout/s-layout.vue
+++ b/src/sheep/components/s-layout/s-layout.vue
@@ -213,11 +213,11 @@
   // #endif
 
   // 组件中使用 onMounted 监听页面加载，不是页面组件不使用 onShow
-  onMounted(()=>{
+  onMounted(() => {
     if (!isEmpty(shareInfo.value)) {
       sheep.$platform.share.updateShareInfo(shareInfo.value);
     }
-  })
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/sheep/components/s-point-block/s-point-block.vue b/src/sheep/components/s-point-block/s-point-block.vue
index 9de154cf..c2cf117a 100644
--- a/src/sheep/components/s-point-block/s-point-block.vue
+++ b/src/sheep/components/s-point-block/s-point-block.vue
@@ -141,11 +141,11 @@
   /**
    * 商品卡片
    */
-  import { computed, onMounted, reactive, ref } from 'vue';
+  import { computed, onMounted, reactive } from 'vue';
   import sheep from '@/sheep';
   import SpuApi from '@/sheep/api/product/spu';
   import PointApi from '@/sheep/api/promotion/point';
-  import { PromotionActivityTypeEnum } from '@/sheep/util/const';
+  import { PromotionActivityTypeEnum } from '@/sheep/helper/const';
 
   // 布局类型
   const LayoutTypeEnum = {
@@ -260,10 +260,10 @@
       // 查找对应的 spu 并更新价格
       const spu = state.spuList.find((spu) => activity.spuId === spu.id);
       if (spu) {
-        spu.pointStock = activity.stock
-        spu.pointTotalStock = activity.totalStock
-        spu.point = activity.point
-        spu.pointPrice = activity.price
+        spu.pointStock = activity.stock;
+        spu.pointTotalStock = activity.totalStock;
+        spu.point = activity.point;
+        spu.pointPrice = activity.price;
         // 赋值活动ID，为了点击跳转详情页
         spu.activityId = activity.id;
         // 赋值活动类型
diff --git a/src/sheep/components/s-point-card/s-point-card.vue b/src/sheep/components/s-point-card/s-point-card.vue
index 5153d814..1c12c033 100644
--- a/src/sheep/components/s-point-card/s-point-card.vue
+++ b/src/sheep/components/s-point-card/s-point-card.vue
@@ -76,7 +76,12 @@
       <view class="goods-list-box">
         <view
           class="left-list"
-          :style="[{ paddingRight: state.property.space + 'rpx', marginBottom: state.property.space + 'px' }]"
+          :style="[
+            {
+              paddingRight: state.property.space + 'rpx',
+              marginBottom: state.property.space + 'px',
+            },
+          ]"
           v-for="item in state.leftSpuList"
           :key="item.id"
         >
@@ -106,7 +111,12 @@
       <view class="goods-list-box">
         <view
           class="right-list"
-          :style="[{ paddingLeft: state.property.space + 'rpx', marginBottom: state.property.space + 'px' }]"
+          :style="[
+            {
+              paddingLeft: state.property.space + 'rpx',
+              marginBottom: state.property.space + 'px',
+            },
+          ]"
           v-for="item in state.rightSpuList"
           :key="item.id"
         >
@@ -141,10 +151,10 @@
   /**
    * 商品卡片
    */
-  import { computed, nextTick, onMounted, reactive, watch } from 'vue';
+  import { computed, reactive, watch } from 'vue';
   import sheep from '@/sheep';
   import SpuApi from '@/sheep/api/product/spu';
-  import { PromotionActivityTypeEnum } from '@/sheep/util/const';
+  import { PromotionActivityTypeEnum } from '@/sheep/helper/const';
   import { isEmpty } from '@/sheep/helper/utils';
 
   // 布局类型
@@ -162,53 +172,53 @@
     leftSpuList: [],
     rightSpuList: [],
     property: {
-      'layoutType': 'oneColBigImg',
-      'fields': {
-        'name': {
-          'show': true,
-          'color': '#000',
+      layoutType: 'oneColBigImg',
+      fields: {
+        name: {
+          show: true,
+          color: '#000',
         },
-        'introduction': {
-          'show': true,
-          'color': '#999',
+        introduction: {
+          show: true,
+          color: '#999',
         },
-        'price': {
-          'show': true,
-          'color': '#ff3000',
+        price: {
+          show: true,
+          color: '#ff3000',
         },
-        'marketPrice': {
-          'show': true,
-          'color': '#c4c4c4',
+        marketPrice: {
+          show: true,
+          color: '#c4c4c4',
         },
-        'salesCount': {
-          'show': true,
-          'color': '#c4c4c4',
+        salesCount: {
+          show: true,
+          color: '#c4c4c4',
         },
-        'stock': {
-          'show': true,
-          'color': '#c4c4c4',
+        stock: {
+          show: true,
+          color: '#c4c4c4',
         },
       },
-      'badge': {
-        'show': false,
-        'imgUrl': '',
+      badge: {
+        show: false,
+        imgUrl: '',
       },
-      'btnBuy': {
-        'type': 'text',
-        'text': '立即兑换',
-        'bgBeginColor': '#FF6000',
-        'bgEndColor': '#FE832A',
-        'imgUrl': '',
+      btnBuy: {
+        type: 'text',
+        text: '立即兑换',
+        bgBeginColor: '#FF6000',
+        bgEndColor: '#FE832A',
+        imgUrl: '',
       },
-      'borderRadiusTop': 8,
-      'borderRadiusBottom': 8,
-      'space': 8,
-      'style': {
-        'bgType': 'color',
-        'bgColor': '',
-        'marginLeft': 8,
-        'marginRight': 8,
-        'marginBottom': 8,
+      borderRadiusTop: 8,
+      borderRadiusBottom: 8,
+      space: 8,
+      style: {
+        bgType: 'color',
+        bgColor: '',
+        marginLeft: 8,
+        marginRight: 8,
+        marginBottom: 8,
       },
     },
   });
@@ -219,9 +229,13 @@
     },
   });
   // 动态更新 property
-  watch(() => props.property, (newVal) => {
-    state.property = { ...state.property, ...newVal };
-  }, { immediate: true, deep: true });
+  watch(
+    () => props.property,
+    (newVal) => {
+      state.property = { ...state.property, ...newVal };
+    },
+    { immediate: true, deep: true },
+  );
   const { marginLeft, marginRight } = state.property.styles || {};
 
   // 购买按钮样式
@@ -317,7 +331,7 @@
   function getActivityCount() {
     return state.spuList.length;
   }
-  defineExpose({ concatActivity,getActivityCount,calculateGoodsColumn });
+  defineExpose({ concatActivity, getActivityCount, calculateGoodsColumn });
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/sheep/components/s-richtext-block/s-richtext-block.vue b/src/sheep/components/s-richtext-block/s-richtext-block.vue
index 4daa2647..4e67a6d9 100644
--- a/src/sheep/components/s-richtext-block/s-richtext-block.vue
+++ b/src/sheep/components/s-richtext-block/s-richtext-block.vue
@@ -1,6 +1,7 @@
 <!-- 装修营销组件：营销文章 -->
 <template>
   <view
+    class="richtext"
     :style="[
       {
         marginLeft: styles.marginLeft + 'px',
@@ -11,7 +12,7 @@
       },
     ]"
   >
-    <mp-html class="richtext" :content="state.content"></mp-html>
+    <mp-html :content="state.content"></mp-html>
   </view>
 </template>
 <script setup>
@@ -38,3 +39,8 @@
     state.content = data.content;
   });
 </script>
+<style lang="scss" scoped>
+  .richtext {
+    line-height: 0;
+  }
+</style>
diff --git a/src/sheep/components/s-search-block/s-search-block.vue b/src/sheep/components/s-search-block/s-search-block.vue
index 1e9c2b51..0e7bff78 100644
--- a/src/sheep/components/s-search-block/s-search-block.vue
+++ b/src/sheep/components/s-search-block/s-search-block.vue
@@ -12,11 +12,28 @@
     ]"
     :class="[{ 'border-content': navbar }]"
   >
-    <view class="ss-flex ss-col-center" v-if="navbar">
-      <view class="search-icon _icon-search ss-m-l-10" :style="[{ color: props.iconColor }]"></view>
-      <view class="search-input ss-flex-1 ss-line-1" :style="[{ color: fontColor, width: width }]">
+    <view
+      class="ss-flex ss-col-center"
+      :class="[placeholderPosition === 'center' ? 'ss-row-center' : 'ss-row-left']"
+      v-if="navbar"
+      style="width: 100%"
+    >
+      <view
+        class="search-icon _icon-search"
+        :style="{ color: fontColor, margin: '0 10rpx' }"
+      ></view>
+      <view class="search-input ss-line-1" :style="{ color: fontColor }">
         {{ placeholder }}
       </view>
+      <!-- 右侧扫一扫图标 -->
+      <view
+        v-if="showScan"
+        class="scan-icon _icon-scan"
+        :style="{ color: fontColor }"
+        @tap.stop="onScan"
+        style="margin-left: auto"
+      >
+      </view>
     </view>
     <uni-search-bar
       v-if="!navbar"
@@ -34,8 +51,9 @@
           class="ss-m-r-16"
           :style="[{ color: data.textColor }]"
           @tap.stop="sheep.$router.go('/pages/goods/list', { keyword: item })"
-          >{{ item }}</view
         >
+          {{ item }}
+        </view>
       </view>
     </view>
     <view v-if="data.hotKeywords && data.hotKeywords.length && navbar" class="ss-flex">
@@ -55,15 +73,15 @@
   /**
    * 基础组件 - 搜索栏
    *
-   * @property {String} elBackground 			- 输入框背景色
-   * @property {String} iconColor 			- 图标颜色
-   * @property {String} fontColor 		  	- 字体颜色
-   * @property {Number} placeholder 			- 默认placeholder
-   * @property {Number} topRadius 			- 组件上圆角
-   * @property {Number} bottomRadius 			- 组件下圆角
+   * @property {String} elBackground      - 输入框背景色
+   * @property {String} iconColor      - 图标颜色
+   * @property {String} fontColor        - 字体颜色
+   * @property {Number} placeholder      - 默认placeholder
+   * @property {Number} topRadius      - 组件上圆角
+   * @property {Number} bottomRadius      - 组件下圆角
    *
    * @slot keywords							- 关键字
-   * @event {Function} click 					- 点击组件时触发
+   * @event {Function} click          - 点击组件时触发
    */
 
   import { computed, reactive } from 'vue';
@@ -107,6 +125,16 @@
       type: String,
       default: '这是一个搜索框',
     },
+    // placeholder位置（left | center）
+    placeholderPosition: {
+      type: String,
+      default: 'left',
+    },
+    // 是否显示扫一扫图标
+    showScan: {
+      type: Boolean,
+      default: false,
+    },
     radius: {
       type: Number,
       default: 10,
@@ -134,6 +162,116 @@
       }, 100);
     }
   }
+
+  /**
+   * 扫一扫功能
+   */
+  function onScan() {
+    uni.scanCode({
+      onlyFromCamera: false,
+      sound: 'default',
+      scanType: ['qrCode', 'barCode'],
+      success: (res) => {
+        showScanResult(res.result);
+      },
+      fail: (err) => {
+        console.error(err);
+        uni.showToast({
+          title: err.errMsg === 'scanCode:fail cancel' ? '操作已取消' : '扫码失败',
+          icon: 'error',
+        });
+      },
+    });
+  }
+
+  /**
+   * 检测是否为有效URL
+   * @param {string} str 待检测字符串
+   * @returns {boolean} 是否为有效URL
+   */
+  function isValidUrl(str) {
+    try {
+      // 微信环境专用验证方式
+      const url = str.trim();
+      return (
+        (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('ftp://')) &&
+        // 简单长度验证
+        url.length >= 10
+      );
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * 展示扫码结果并处理用户操作
+   * @param {string} text 扫码得到的内容
+   */
+  function showScanResult(text) {
+    const isUrl = isValidUrl(text);
+    // 显示结果弹窗
+    uni.showModal({
+      title: '扫描结果',
+      content: text,
+      confirmText: isUrl ? '访问' : '复制',
+      cancelText: '取消',
+      success: (res) => {
+        if (res.confirm) {
+          if (isUrl) {
+            handleUrl(text);
+          } else {
+            handleCopy(text);
+          }
+        }
+      },
+    });
+  }
+
+  /**
+   * 处理URL跳转
+   * @param {string} url 要访问的URL
+   */
+  function handleUrl(url) {
+    // 方案1：跳转到webview页面（推荐）
+    uni.navigateTo({
+      url: `/pages/public/webview?url=${encodeURIComponent(url)}`,
+    });
+
+    // 方案2：直接复制链接（备选方案）
+    /*
+    uni.setClipboardData({
+      data: url,
+      success: () => {
+        uni.showToast({
+          title: '链接已复制，请在浏览器打开',
+          icon: 'success',
+        });
+      },
+    });
+    */
+  }
+
+  /**
+   * 处理文本复制
+   * @param {string} text 要复制的文本
+   */
+  function handleCopy(text) {
+    uni.setClipboardData({
+      data: text,
+      success: () => {
+        uni.showToast({
+          title: '已复制到剪贴板',
+          icon: 'success',
+        });
+      },
+      fail: () => {
+        uni.showToast({
+          title: '复制失败，请重试',
+          icon: 'error',
+        });
+      },
+    });
+  }
 </script>
 
 <style lang="scss" scoped>
@@ -151,6 +289,11 @@
       margin-right: 20rpx;
     }
 
+    .scan-icon {
+      font-size: 38rpx;
+      margin-right: 20rpx;
+    }
+
     .keyword-link {
       position: absolute;
       right: 16rpx;
diff --git a/src/sheep/components/s-seckill-block/s-seckill-block.vue b/src/sheep/components/s-seckill-block/s-seckill-block.vue
index b5b21a3a..d7e80136 100644
--- a/src/sheep/components/s-seckill-block/s-seckill-block.vue
+++ b/src/sheep/components/s-seckill-block/s-seckill-block.vue
@@ -262,7 +262,6 @@
       const spu = state.spuList.find((spu) => activity.spuId === spu.id);
       if (spu) {
         // 赋值活动名称
-        // TODO 芋艿：暂定活动名。会在调研一些类似有赞、淘宝、京东的选择
         spu.name = activity.name;
         // 赋值最低价格
         spu.price = Math.min(seckillPrice, spu.price);
diff --git a/src/sheep/components/s-select-groupon-sku/s-select-groupon-sku.vue b/src/sheep/components/s-select-groupon-sku/s-select-groupon-sku.vue
index 1325ddc2..9a1090da 100644
--- a/src/sheep/components/s-select-groupon-sku/s-select-groupon-sku.vue
+++ b/src/sheep/components/s-select-groupon-sku/s-select-groupon-sku.vue
@@ -133,7 +133,7 @@
   });
   const state = reactive({
     selectedSku: {}, // 选中的 SKU
-    currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
+    currentPropertyArray: {}, // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
     grouponNum: props.grouponNum,
   });
 
@@ -212,7 +212,7 @@
       noChooseValueIds.splice(index, 1);
     } else {
       // 循环去除当前已选择的 value 属性值 id
-      state.currentPropertyArray.forEach((currentPropertyId) => {
+      Object.entries(state.currentPropertyArray).forEach(([propertyId, currentPropertyId]) => {
         if (currentPropertyId.toString() !== '') {
           return;
         }
@@ -229,8 +229,8 @@
     let choosePropertyIds = [];
     if (!isChecked) {
       // 当前已选择的 property
-      state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => {
-        if (currentPropertyId !== '') {
+      Object.entries(state.currentPropertyArray).forEach(([propertyId, currentValueId]) => {
+        if (currentValueId !== '') {
           // currentPropertyId 为空是反选 填充的
           choosePropertyIds.push(currentValueId);
         }
@@ -261,9 +261,9 @@
         continue;
       }
       let isOk = true;
-      state.currentPropertyArray.forEach((propertyId) => {
-        // propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
-        if (propertyId.toString() !== '' && sku.value_id_array.indexOf(propertyId) < 0) {
+      Object.entries(state.currentPropertyArray).forEach(([propertyId, valueId]) => {
+        // valueId 不为空，并且，这个 条 sku 没有被选中，则排除
+        if (valueId.toString() !== '' && sku.value_id_array.indexOf(valueId) < 0) {
           isOk = false;
         }
       });
@@ -292,7 +292,7 @@
 
     // 选中的 property 大类
     let choosePropertyId = [];
-    state.currentPropertyArray.forEach((currentPropertyId) => {
+    Object.entries(state.currentPropertyArray).forEach(([propertyId, currentPropertyId]) => {
       if (currentPropertyId !== '') {
         // currentPropertyId 为空是反选 填充的
         choosePropertyId.push(currentPropertyId);
diff --git a/src/sheep/components/s-select-seckill-sku/s-select-seckill-sku.vue b/src/sheep/components/s-select-seckill-sku/s-select-seckill-sku.vue
index a6a3e84b..ba6f7bfa 100644
--- a/src/sheep/components/s-select-seckill-sku/s-select-seckill-sku.vue
+++ b/src/sheep/components/s-select-seckill-sku/s-select-seckill-sku.vue
@@ -19,8 +19,10 @@
           <view class="goods-title ss-line-2">{{ state.goodsInfo.name }}</view>
           <view class="header-right-bottom ss-flex ss-col-center ss-row-between">
             <!-- 价格 -->
-            <view v-if="state.goodsInfo.activity_type === PromotionActivityTypeEnum.POINT.type"
-                  class="price-text ss-flex">
+            <view
+              v-if="state.goodsInfo.activity_type === PromotionActivityTypeEnum.POINT.type"
+              class="price-text ss-flex"
+            >
               <image
                 v-if="!isEmpty(state.selectedSku)"
                 :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
@@ -97,21 +99,19 @@
   /**
    * 秒杀活动SKU选择，
    * 与s-select-sku的区别：多一个秒杀价的标签、没有加入购物车按钮、立即购买按钮叫确认、秒杀有最大购买数量限制
-   * 差别不大，可以考虑合并 todo @芋艿
    */
   // 按钮状态： active,nostock
   import { computed, reactive, watch } from 'vue';
   import sheep from '@/sheep';
   import { convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods';
   import { isEmpty, min } from 'lodash-es';
-  import { PromotionActivityTypeEnum } from '@/sheep/util/const';
+  import { PromotionActivityTypeEnum } from '@/sheep/helper/const';
 
   const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
   const props = defineProps({
     modelValue: {
       type: Object,
-      default() {
-      },
+      default() {},
     },
     show: {
       type: Boolean,
@@ -126,7 +126,7 @@
   const state = reactive({
     goodsInfo: computed(() => props.modelValue),
     selectedSku: {},
-    currentPropertyArray: [],
+    currentPropertyArray: {},
   });
   const getShowPriceText = computed(() => {
     let priceText = `￥${fen2yuan(state.goodsInfo.price)}`;
@@ -209,7 +209,7 @@
       noChooseValueIds.splice(index, 1);
     } else {
       // 循环去除当前已选择的 value 属性值 id
-      state.currentPropertyArray.forEach((currentPropertyId) => {
+      Object.entries(state.currentPropertyArray).forEach(([propertyId, currentPropertyId]) => {
         if (currentPropertyId.toString() !== '') {
           return;
         }
@@ -226,8 +226,8 @@
     let choosePropertyIds = [];
     if (!isChecked) {
       // 当前已选择的 property
-      state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => {
-        if (currentPropertyId !== '') {
+      Object.entries(state.currentPropertyArray).forEach(([propertyId, currentValueId]) => {
+        if (currentValueId !== '') {
           // currentPropertyId 为空是反选 填充的
           choosePropertyIds.push(currentValueId);
         }
@@ -258,9 +258,9 @@
         continue;
       }
       let isOk = true;
-      state.currentPropertyArray.forEach((propertyId) => {
-        // propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
-        if (propertyId.toString() !== '' && sku.value_id_array.indexOf(propertyId) < 0) {
+      Object.entries(state.currentPropertyArray).forEach(([propertyId, valueId]) => {
+        // valueId 不为空，并且，这个 条 sku 没有被选中，则排除
+        if (valueId.toString() !== '' && sku.value_id_array.indexOf(valueId) < 0) {
           isOk = false;
         }
       });
@@ -289,7 +289,7 @@
 
     // 选中的 property 大类
     let choosePropertyId = [];
-    state.currentPropertyArray.forEach((currentPropertyId) => {
+    Object.entries(state.currentPropertyArray).forEach(([propertyId, currentPropertyId]) => {
       if (currentPropertyId !== '') {
         // currentPropertyId 为空是反选 填充的
         choosePropertyId.push(currentPropertyId);
diff --git a/src/sheep/components/s-select-sku/s-select-sku.vue b/src/sheep/components/s-select-sku/s-select-sku.vue
index 23b1b43a..7920a90e 100644
--- a/src/sheep/components/s-select-sku/s-select-sku.vue
+++ b/src/sheep/components/s-select-sku/s-select-sku.vue
@@ -111,7 +111,7 @@
 
   const state = reactive({
     selectedSku: {}, // 选中的 SKU
-    currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
+    currentPropertyArray: {}, // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
   });
 
   const propertyList = convertProductPropertyList(props.goodsInfo.skus);
@@ -202,7 +202,7 @@
       noChooseValueIds.splice(index, 1);
     } else {
       // 循环去除当前已选择的 value 属性值 id
-      state.currentPropertyArray.forEach((currentPropertyId) => {
+      Object.entries(state.currentPropertyArray).forEach(([propertyId, currentPropertyId]) => {
         if (currentPropertyId.toString() !== '') {
           return;
         }
@@ -219,8 +219,8 @@
     let choosePropertyIds = [];
     if (!isChecked) {
       // 当前已选择的 property
-      state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => {
-        if (currentPropertyId !== '') {
+      Object.entries(state.currentPropertyArray).forEach(([propertyId, currentValueId]) => {
+        if (currentValueId !== '') {
           // currentPropertyId 为空是反选 填充的
           choosePropertyIds.push(currentValueId);
         }
@@ -251,9 +251,9 @@
         continue;
       }
       let isOk = true;
-      state.currentPropertyArray.forEach((propertyId) => {
-        // propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
-        if (propertyId.toString() !== '' && sku.value_id_array.indexOf(propertyId) < 0) {
+      Object.entries(state.currentPropertyArray).forEach(([propertyId, valueId]) => {
+        // valueId 不为空，并且，这个 条 sku 没有被选中，则排除
+        if (valueId.toString() !== '' && sku.value_id_array.indexOf(valueId) < 0) {
           isOk = false;
         }
       });
@@ -282,7 +282,7 @@
 
     // 选中的 property 大类
     let choosePropertyId = [];
-    state.currentPropertyArray.forEach((currentPropertyId) => {
+    Object.entries(state.currentPropertyArray).forEach(([propertyId, currentPropertyId]) => {
       if (currentPropertyId !== '') {
         // currentPropertyId 为空是反选 填充的
         choosePropertyId.push(currentPropertyId);
diff --git a/src/sheep/components/s-share-modal/canvas-poster/poster/groupon.js b/src/sheep/components/s-share-modal/canvas-poster/poster/groupon.js
index 4b33c8ca..c182d3fe 100644
--- a/src/sheep/components/s-share-modal/canvas-poster/poster/groupon.js
+++ b/src/sheep/components/s-share-modal/canvas-poster/poster/groupon.js
@@ -2,13 +2,16 @@ import sheep from '@/sheep';
 import { formatImageUrlProtocol, getWxaQrcode } from './index';
 
 const groupon = async (poster) => {
+  debugger;
   const width = poster.width;
   const userInfo = sheep.$store('user').userInfo;
   const wxa_qrcode = await getWxaQrcode(poster.shareInfo.path, poster.shareInfo.query);
   return [
     {
       type: 'image',
-      src: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.groupon_bg)),
+      src: formatImageUrlProtocol(
+        sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.groupon_bg),
+      ),
       css: {
         width,
         position: 'fixed',
@@ -80,7 +83,7 @@ const groupon = async (poster) => {
     },
     {
       type: 'text',
-      text: '2人团',
+      text: poster.shareInfo.poster.grouponNum + '人团',
       css: {
         color: '#fff',
         fontSize: 12,
@@ -96,8 +99,8 @@ const groupon = async (poster) => {
       text: poster.shareInfo.link,
       css: {
         position: 'fixed',
-        left: width * 0.5,
-        top: width * 1.3,
+        left: width * 0.75,
+        top: width * 1.4,
         width: width * 0.2,
         height: width * 0.2,
       },
@@ -110,7 +113,7 @@ const groupon = async (poster) => {
       css: {
         position: 'fixed',
         left: width * 0.75,
-        top: width * 1.3,
+        top: width * 1.4,
         width: width * 0.2,
         height: width * 0.2,
       },
diff --git a/src/sheep/components/s-share-modal/canvas-poster/poster/user.js b/src/sheep/components/s-share-modal/canvas-poster/poster/user.js
index 5c4d3b96..aa73922e 100644
--- a/src/sheep/components/s-share-modal/canvas-poster/poster/user.js
+++ b/src/sheep/components/s-share-modal/canvas-poster/poster/user.js
@@ -1,10 +1,11 @@
 import sheep from '@/sheep';
 import { formatImageUrlProtocol, getWxaQrcode } from './index';
-
+import { measureTextWidth } from '@/utils/textUtils'; // 引入新封装的方法
 const user = async (poster) => {
   const width = poster.width;
   const userInfo = sheep.$store('user').userInfo;
   const wxa_qrcode = await getWxaQrcode(poster.shareInfo.path, poster.shareInfo.query);
+  const widthNickName = measureTextWidth(userInfo.nickname, 14); // 使用新方法
   return [
     {
       type: 'image',
@@ -28,7 +29,7 @@ const user = async (poster) => {
         fontFamily: 'sans-serif',
         position: 'fixed',
         top: width * 0.4,
-        left: width / 2,
+        left: (width-widthNickName) / 2,
       },
     },
     {
diff --git a/src/sheep/components/s-title-block/s-title-block.vue b/src/sheep/components/s-title-block/s-title-block.vue
index e9544662..1f39f01b 100644
--- a/src/sheep/components/s-title-block/s-title-block.vue
+++ b/src/sheep/components/s-title-block/s-title-block.vue
@@ -3,33 +3,13 @@
   <view
     class="ss-title-wrap ss-flex ss-col-center"
     :class="[state.typeMap[data.textAlign]]"
-    :style="[bgStyle, { marginLeft: `${data.space}px` }]"
+    :style="[elStyles]"
   >
     <view class="title-content">
       <!-- 主标题 -->
-      <view
-        v-if="data.title"
-        :style="{
-          fontSize: `${data.titleSize}px`,
-          fontWeight: data.titleWeight,
-          color: data.titleColor,
-          textAlign: data.textAlign
-      }"
-        class="title-text"
-      >
-        {{ data.title }}
-      </view>
+      <view v-if="data.title" class="title-text" :style="[titleStyles]">{{ data.title }}</view>
       <!-- 副标题 -->
-      <view
-        v-if="data.description"
-        :style="{
-          fontSize: `${data.descriptionSize}px`,
-          fontWeight: data.descriptionWeight,
-          color: data.descriptionColor,
-          textAlign: data.textAlign
-        }"
-        class="sub-title-text"
-      >
+      <view v-if="data.description" :style="[descStyles]" class="sub-title-text">
         {{ data.description }}
       </view>
     </view>
@@ -40,7 +20,7 @@
       @tap="sheep.$router.go(data.more.url)"
       :style="{ color: data.descriptionColor }"
     >
-      <view v-if="data.more.type !== 'icon'" class="more-text">{{ data.more.text }}</view>
+      <view class="more-text" v-if="data.more.type !== 'icon'">{{ data.more.text }} </view>
       <text class="_icon-forward" v-if="data.more.type !== 'text'"></text>
     </view>
   </view>
@@ -50,7 +30,7 @@
   /**
    * 标题栏
    */
-  import { computed, reactive } from 'vue';
+  import { reactive } from 'vue';
   import sheep from '@/sheep';
 
   // 数据
@@ -63,34 +43,61 @@
 
   // 接收参数
   const props = defineProps({
-    // 装修数据
     data: {
       type: Object,
-      default: () => ({}),
+      default() {},
     },
-    // 装修样式
     styles: {
       type: Object,
-      default: () => ({}),
+      default() {},
     },
   });
-  // 设置背景样式
-  const bgStyle = computed(() => {
-    // 直接从 props.styles 解构
-    const { bgType, bgImg, bgColor } = props.styles;
 
-    // 根据 bgType 返回相应的样式
-    return {
-      background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor,
-    };
-  });
+  // 组件样式
+  const elStyles = {
+    background: `url(${sheep.$url.cdn(props.data.bgImgUrl)}) no-repeat top center / 100% auto`,
+    fontSize: `${props.data.titleSize}px`,
+    fontWeight: `${props.data.titleWeight}`,
+    // add by 芋艿：shopro 是在 props.styles.height，我们是在 props.data.height
+    height: `${props.data.height || 40}px`,
+  };
+
+  // 标题样式
+  const titleStyles = {
+    color: props.data.titleColor,
+    fontSize: `${props.data.titleSize}px`,
+    textAlign: props.data.textAlign,
+    // add by 芋艿：shopro 是在 props.data.skew，我们是在 props.data.marginLeft
+    marginLeft: `${props.data.marginLeft || 0}px`,
+  };
+
+  // 副标题
+  const descStyles = {
+    color: props.data.descriptionColor,
+    textAlign: props.data.textAlign,
+    fontSize: `${props.data.descriptionSize}px`,
+    fontWeight: `${props.data.descriptionWeight}px`,
+    marginLeft: `${props.data.marginLeft || 0}px`,
+  };
 </script>
 
 <style lang="scss" scoped>
   .ss-title-wrap {
-    min-height: 80rpx;
+    height: 80rpx;
     position: relative;
 
+    .title-content {
+      .title-text {
+        font-size: 30rpx;
+        color: #333;
+      }
+
+      .sub-title-text {
+        font-size: 22rpx;
+        color: #999;
+      }
+    }
+
     .more-box {
       white-space: nowrap;
       font-size: 22rpx;
diff --git a/src/sheep/components/s-uploader/choose-and-upload-file.js b/src/sheep/components/s-uploader/choose-and-upload-file.js
index 9c7036cb..878ca11d 100644
--- a/src/sheep/components/s-uploader/choose-and-upload-file.js
+++ b/src/sheep/components/s-uploader/choose-and-upload-file.js
@@ -116,26 +116,14 @@ function normalizeChooseAndUploadFileRes(res, fileType) {
   return res;
 }
 
-function convertToArrayBuffer(uniFile) {
-  return new Promise((resolve, reject) => {
+async function readFile(uniFile) {
+  // 微信小程序
+  if (uni.getFileSystemManager) {
     const fs = uni.getFileSystemManager();
-
-    fs.readFile({
-      filePath: uniFile.path, // 确保路径正确
-      success: (fileRes) => {
-        try {
-          // 将读取的内容转换为 ArrayBuffer
-          const arrayBuffer = new Uint8Array(fileRes.data).buffer;
-          resolve(arrayBuffer);
-        } catch (error) {
-          reject(new Error(`转换为 ArrayBuffer 失败: ${error.message}`));
-        }
-      },
-      fail: (error) => {
-        reject(new Error(`读取文件失败: ${error.errMsg}`));
-      },
-    });
-  });
+    return fs.readFileSync(uniFile.path);
+  }
+  // H5 等
+  return uniFile.arrayBuffer();
 }
 
 function uploadCloudFiles(files, max = 5, onUploadProgress) {
@@ -187,7 +175,25 @@ function uploadCloudFiles(files, max = 5, onUploadProgress) {
   });
 }
 
-async function uploadFiles(choosePromise, { onChooseFile, onUploadProgress }) {
+function uploadFilesFromPath(path, directory = '') {
+  // 目的：用于微信小程序，选择图片时，只有 path
+  return uploadFiles(
+    Promise.resolve({
+      tempFiles: [
+        {
+          path,
+          type: 'image/jpeg',
+          name: path.includes('/') ? path.substring(path.lastIndexOf('/') + 1) : path,
+        },
+      ],
+    }),
+    {
+      directory,
+    },
+  );
+}
+
+async function uploadFiles(choosePromise, { onChooseFile, onUploadProgress, directory }) {
   // 获取选择的文件
   const res = await choosePromise;
   // 处理文件选择回调
@@ -208,30 +214,28 @@ async function uploadFiles(choosePromise, { onChooseFile, onUploadProgress }) {
     const uploadPromises = files.map(async (file) => {
       try {
         // 1.1 获取文件预签名地址
-        const { data: presignedInfo } = await FileApi.getFilePresignedUrl(file.name);
+        const { data: presignedInfo } = await FileApi.getFilePresignedUrl(file.name, directory);
         // 1.2 获取二进制文件对象
-        const fileBuffer = await convertToArrayBuffer(file);
+        const fileBuffer = await readFile(file);
 
         // 返回上传的 Promise
         return new Promise((resolve, reject) => {
+          // 1.3. 上传文件到 S3
           uni.request({
-            url: presignedInfo.uploadUrl, // 预签名的上传 URL
-            method: 'PUT', // 使用 PUT 方法
+            url: presignedInfo.uploadUrl,
+            method: 'PUT',
             header: {
-              'Content-Type':
-                file.fileType + '/' + file.name.substring(file.name.lastIndexOf('.') + 1), // 设置内容类型
+              'Content-Type': file.type,
             },
-            data: fileBuffer, // 文件的路径，适用于小程序
+            data: fileBuffer,
             success: (res) => {
               // 1.4. 记录文件信息到后端（异步）
               createFile(presignedInfo, file);
               // 1.5. 重新赋值
               file.url = presignedInfo.url;
-              console.log('上传成功:', res);
               resolve(file);
             },
             fail: (err) => {
-              console.error('上传失败:', err);
               reject(err);
             },
           });
@@ -247,7 +251,7 @@ async function uploadFiles(choosePromise, { onChooseFile, onUploadProgress }) {
   } else {
     // 后端上传
     for (let file of files) {
-      const { data } = await FileApi.uploadFile(file.path);
+      const { data } = await FileApi.uploadFile(file.path, directory);
       file.url = data;
     }
 
@@ -258,6 +262,7 @@ async function uploadFiles(choosePromise, { onChooseFile, onUploadProgress }) {
 function chooseAndUploadFile(
   opts = {
     type: 'all',
+    directory: undefined,
   },
 ) {
   if (opts.type === 'image') {
@@ -277,7 +282,7 @@ function createFile(vo, file) {
   const fileVo = {
     configId: vo.configId,
     url: vo.url,
-    path: file.name,
+    path: vo.path,
     name: file.name,
     type: file.fileType,
     size: file.size,
@@ -296,4 +301,4 @@ const UPLOAD_TYPE = {
   SERVER: 'server',
 };
 
-export { chooseAndUploadFile, uploadCloudFiles };
+export { chooseAndUploadFile, uploadCloudFiles, uploadFilesFromPath };
diff --git a/src/sheep/components/s-uploader/s-uploader.vue b/src/sheep/components/s-uploader/s-uploader.vue
index 044f4808..fb72cf34 100644
--- a/src/sheep/components/s-uploader/s-uploader.vue
+++ b/src/sheep/components/s-uploader/s-uploader.vue
@@ -48,6 +48,8 @@
   import uploadImage from './upload-image.vue';
   import uploadFile from './upload-file.vue';
   import sheep from '@/sheep';
+  import { isEmpty } from 'lodash-es';
+
   let fileInput = null;
   /**
    * FilePicker 文件选择上传
@@ -199,8 +201,7 @@
       return {
         files: [],
         localValue: [],
-        // imgsrc: sheep.$url.static('/static/img/shop/upload-camera.png'),
-        imgsrc: '/static/upload-icon.png',
+        imgsrc: sheep.$url.static('/static/img/shop/upload-camera.png'),
       };
     },
     watch: {
@@ -517,11 +518,18 @@
        * @param {Object} index
        */
       delFile(index) {
-        this.$emit('delete', {
-          tempFile: this.files[index],
-          tempFilePath: this.files[index].url,
-        });
-        this.files.splice(index, 1);
+        if (!isEmpty(this.files)) {
+          this.$emit('delete', {
+            tempFile: this.files[index],
+            tempFilePath: this.files[index].url,
+          });
+          this.files.splice(index, 1);
+        } else {
+          this.$emit('delete', {
+            tempFilePath: this.url,
+          });
+        }
+
         this.$nextTick(() => {
           this.setEmit();
         });
diff --git a/src/sheep/components/s-user-card/s-user-card.vue b/src/sheep/components/s-user-card/s-user-card.vue
index 754d5361..7efb7389 100644
--- a/src/sheep/components/s-user-card/s-user-card.vue
+++ b/src/sheep/components/s-user-card/s-user-card.vue
@@ -5,7 +5,7 @@
       <view class="left-box ss-flex ss-col-center ss-m-l-36">
         <view class="avatar-box ss-m-r-24">
           <image class="avatar-img" :src="
-              isLogin
+              isLogin && userInfo.avatar
                 ? sheep.$url.cdn(userInfo.avatar)
                 : sheep.$url.static('/static/img/shop/default_avatar.png')"
                  mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')">
@@ -62,7 +62,6 @@
 
   // 用户信息
   const userInfo = computed(() => sheep.$store('user').userInfo);
-  console.log('用户信息', userInfo);
 
   // 是否登录
   const isLogin = computed(() => sheep.$store('user').isLogin);
@@ -182,4 +181,4 @@
       color: #ffffff;
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/sheep/components/segmented/segmented.vue b/src/sheep/components/segmented/segmented.vue
index cc82cf14..151f98a9 100644
--- a/src/sheep/components/segmented/segmented.vue
+++ b/src/sheep/components/segmented/segmented.vue
@@ -4,7 +4,7 @@
     :style="segmentedWidth"
   >
     <view
-      class="relative z-10 flex-1 h-50rpx line-height-50rpx text-center text-sm font-500 active:text-color-theme"
+      class="relative z-10 flex-1 h-40rpx line-height-40rpx text-center text-xs font-500 active:text-color-theme"
       v-for="(item, index) in items"
       :key="item"
       :class="{ active: modelValue === index }"
@@ -38,15 +38,15 @@
   }>();
 
   const activeStyle = computed(() => {
-    const x = 50 * props.modelValue;
+    const x = 40 * props.modelValue;
     return {
-      width: `${50}px`,
+      width: `${40}px`,
       transform: `translate3d(${x}px, 0, 0)`,
     };
   });
 
   const segmentedWidth = computed(() => {
-    return { width: `${props.items.length * 50}px` };
+    return { width: `${props.items.length * 40}px` };
   });
 
   function segmentedItem(index: number) {
diff --git a/src/sheep/config/index.js b/src/sheep/config/index.js
index 7740ad1e..566106cd 100644
--- a/src/sheep/config/index.js
+++ b/src/sheep/config/index.js
@@ -1,16 +1,16 @@
-import packageInfo from "@/../package.json";
+import packageInfo from '@/../package.json';
 
 const { version } = packageInfo;
 
 // 开发环境配置
 export let baseUrl;
-if (process.env.NODE_ENV === "development") {
+if (process.env.NODE_ENV === 'development') {
   baseUrl = import.meta.env.SHOPRO_DEV_BASE_URL;
 } else {
   baseUrl = import.meta.env.SHOPRO_BASE_URL;
 }
-if (typeof baseUrl === "undefined") {
-  console.error("请检查.env配置文件是否存在");
+if (typeof baseUrl === 'undefined') {
+  console.error('请检查.env配置文件是否存在');
 } else {
   console.log(`[芋道商城 ${version}]  https://doc.iocoder.cn`);
 }
diff --git a/src/sheep/helper/const.js b/src/sheep/helper/const.js
new file mode 100644
index 00000000..42e623c3
--- /dev/null
+++ b/src/sheep/helper/const.js
@@ -0,0 +1,153 @@
+// ========== COMMON - 公共模块 ==========
+
+/**
+ * 与后端Terminal枚举一一对应
+ */
+export const TerminalEnum = {
+  UNKNOWN: 0, // 未知, 目的：在无法解析到 terminal 时，使用它
+  WECHAT_MINI_PROGRAM: 10, //微信小程序
+  WECHAT_WAP: 11, // 微信公众号
+  H5: 20, // H5 网页
+  APP: 31, // 手机 App
+};
+
+/**
+ * 将 uni-app 提供的平台转换为后端所需的 terminal值
+ *
+ * @return 终端
+ */
+export const getTerminal = () => {
+  const platformType = uni.getAppBaseInfo().uniPlatform;
+  // 与后端terminal枚举一一对应
+  switch (platformType) {
+    case 'app':
+      return TerminalEnum.APP;
+    case 'web':
+      return TerminalEnum.H5;
+    case 'mp-weixin':
+      return TerminalEnum.WECHAT_MINI_PROGRAM;
+    default:
+      return TerminalEnum.UNKNOWN;
+  }
+};
+
+// ========== MALL - 营销模块 ==========
+
+import dayjs from 'dayjs';
+
+/**
+ * 优惠类型枚举
+ */
+export const PromotionDiscountTypeEnum = {
+  PRICE: {
+    type: 1,
+    name: '满减',
+  },
+  PERCENT: {
+    type: 2,
+    name: '折扣',
+  },
+};
+
+/**
+ * 优惠劵模板的有限期类型的枚举
+ */
+export const CouponTemplateValidityTypeEnum = {
+  DATE: {
+    type: 1,
+    name: '固定日期可用',
+  },
+  TERM: {
+    type: 2,
+    name: '领取之后可用',
+  },
+};
+
+// 时间段的状态枚举
+export const TimeStatusEnum = {
+  WAIT_START: '即将开始',
+  STARTED: '进行中',
+  END: '已结束',
+};
+
+/**
+ * 微信小程序的订阅模版
+ */
+export const WxaSubscribeTemplate = {
+  TRADE_ORDER_DELIVERY: '订单发货通知',
+  PROMOTION_COMBINATION_SUCCESS: '拼团结果通知',
+  PAY_WALLET_RECHARGER_SUCCESS: '充值成功通知',
+};
+export const PromotionActivityTypeEnum = {
+  NORMAL: {
+    type: 0,
+    name: '普通',
+  },
+  SECKILL: {
+    type: 1,
+    name: '秒杀',
+  },
+  BARGAIN: {
+    type: 2,
+    name: '砍价',
+  },
+  COMBINATION: {
+    type: 3,
+    name: '拼团',
+  },
+  POINT: {
+    type: 4,
+    name: '积分商城',
+  },
+};
+/** 配送方式枚举 */
+export const DeliveryTypeEnum = {
+  EXPRESS: { type: 1, name: '快递发货' },
+  PICK_UP: { type: 2, name: '用户自提' },
+};
+export const getTimeStatusEnum = (startTime, endTime) => {
+  const now = dayjs();
+  if (now.isBefore(startTime)) {
+    return TimeStatusEnum.WAIT_START;
+  } else if (now.isAfter(endTime)) {
+    return TimeStatusEnum.END;
+  } else {
+    return TimeStatusEnum.STARTED;
+  }
+};
+/**
+ * 分享页枚举
+ * 按需扩展
+ * */
+export const SharePageEnum = {
+  HOME: {
+    name: '首页',
+    page: '/pages/index/index',
+    value: '1',
+  },
+  GOODS: {
+    name: '普通商品页',
+    page: '/pages/goods/index',
+    value: '2',
+  },
+  GROUPON: {
+    name: '拼团商品页',
+    page: '/pages/goods/groupon',
+    value: '3',
+  },
+  SECKILL: {
+    name: '秒杀商品页',
+    page: '/pages/goods/seckill',
+    value: '4',
+  },
+  GROUPON_DETAIL: {
+    name: '参与拼团页',
+    page: '/pages/activity/groupon/detail',
+    value: '5',
+  },
+  POINT: {
+    name: '积分商品页',
+    page: '/pages/goods/point',
+    value: '6',
+  },
+};
diff --git a/src/sheep/helper/index.js b/src/sheep/helper/index.js
index 59272f5d..99ea1582 100644
--- a/src/sheep/helper/index.js
+++ b/src/sheep/helper/index.js
@@ -45,14 +45,7 @@ export function sleep(value = 30) {
  * @link 运行期判断平台 https://uniapp.dcloud.io/frame?id=判断平台
  */
 export function os() {
-  return uni.getSystemInfoSync().platform.toLowerCase();
-}
-/**
- * @description 获取系统信息同步接口
- * @link 获取系统信息同步接口 https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync
- */
-export function sys() {
-  return uni.getSystemInfoSync();
+  return uni.getDeviceInfo().platform.toLowerCase();
 }
 
 /**
@@ -638,10 +631,13 @@ function pages() {
 export function getRootUrl() {
   let url = '';
   // #ifdef H5
-  url = location.origin + '/';
+  url = location.origin;
+  // + location.pathname;
 
   if (location.hash !== '') {
     url += '#/';
+  } else {
+    url += '/';
   }
   // #endif
   return url;
@@ -679,7 +675,6 @@ export default {
   getPx,
   sleep,
   os,
-  sys,
   random,
   guid,
   $parent,
diff --git a/src/sheep/helper/utils.js b/src/sheep/helper/utils.js
index a0dd86f3..2cdc0f6a 100644
--- a/src/sheep/helper/utils.js
+++ b/src/sheep/helper/utils.js
@@ -23,7 +23,7 @@ export function isString(value) {
 }
 
 export function isEmpty(value) {
-  if (value === '' || value === undefined || value === null){
+  if (value === '' || value === undefined || value === null) {
     return true;
   }
 
@@ -35,7 +35,7 @@ export function isEmpty(value) {
     return Object.keys(value).length === 0;
   }
 
-  return false
+  return false;
 }
 
 export function isBoolean(value) {
@@ -170,3 +170,167 @@ export function isWxBrowser() {
 export function range(min = 0, max = 0, value = 0) {
   return Math.max(min, Math.min(max, Number(value)));
 }
+
+import dayjs from 'dayjs';
+
+/**
+ * 将一个整数转换为分数保留两位小数
+ * @param {number | string | undefined} num 整数
+ * @return {number} 分数
+ */
+export const formatToFraction = (num) => {
+  if (typeof num === 'undefined') return 0;
+  const parsedNumber = typeof num === 'string' ? parseFloat(num) : num;
+  return parseFloat((parsedNumber / 100).toFixed(2));
+};
+
+/**
+ * 将一个数转换为 1.00 这样
+ * 数据呈现的时候使用
+ *
+ * @param {number | string | undefined} num 整数
+ * @return {string} 分数
+ */
+export const floatToFixed2 = (num) => {
+  let str = '0.00';
+  if (typeof num === 'undefined') {
+    return str;
+  }
+  const f = formatToFraction(num);
+  const decimalPart = f.toString().split('.')[1];
+  const len = decimalPart ? decimalPart.length : 0;
+  switch (len) {
+    case 0:
+      str = f.toString() + '.00';
+      break;
+    case 1:
+      str = f.toString() + '.0';
+      break;
+    case 2:
+      str = f.toString();
+      break;
+  }
+  return str;
+};
+
+/**
+ * 时间日期转换
+ * @param {dayjs.ConfigType} date 当前时间，new Date() 格式
+ * @param {string} format 需要转换的时间格式字符串
+ * @description format 字符串随意，如 `YYYY-mm、YYYY-mm-dd`
+ * @description format 季度："YYYY-mm-dd HH:MM:SS QQQQ"
+ * @description format 星期："YYYY-mm-dd HH:MM:SS WWW"
+ * @description format 几周："YYYY-mm-dd HH:MM:SS ZZZ"
+ * @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
+ * @returns {string} 返回拼接后的时间字符串
+ */
+export function formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') {
+  // 日期不存在，则返回空
+  if (!date) {
+    return '';
+  }
+  // 日期存在，则进行格式化
+  if (format === undefined) {
+    format = 'YYYY-MM-DD HH:mm:ss';
+  }
+  return dayjs(date).format(format);
+}
+
+/**
+ * 构造树型结构数据
+ *
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ * @param {*} rootId 根Id 默认 0
+ */
+export function handleTree(
+  data,
+  id = 'id',
+  parentId = 'parentId',
+  children = 'children',
+  rootId = 0,
+) {
+  // 对源数据深度克隆
+  const cloneData = JSON.parse(JSON.stringify(data));
+  // 循环所有项
+  const treeData = cloneData.filter((father) => {
+    let branchArr = cloneData.filter((child) => {
+      //返回每一项的子级数组
+      return father[id] === child[parentId];
+    });
+    branchArr.length > 0 ? (father.children = branchArr) : '';
+    //返回第一层
+    return father[parentId] === rootId;
+  });
+  return treeData !== '' ? treeData : data;
+}
+
+/**
+ * 重置分页对象
+ *
+ * @param pagination 分页对象
+ */
+export function resetPagination(pagination) {
+  pagination.list = [];
+  pagination.total = 0;
+  pagination.pageNo = 1;
+}
+
+/**
+ * 将值复制到目标对象，且以目标对象属性为准，例：target: {a:1} source:{a:2,b:3} 结果为：{a:2}
+ * @param target 目标对象
+ * @param source 源对象
+ */
+export const copyValueToTarget = (target, source) => {
+  const newObj = Object.assign({}, target, source);
+  // 删除多余属性
+  Object.keys(newObj).forEach((key) => {
+    // 如果不是target中的属性则删除
+    if (Object.keys(target).indexOf(key) === -1) {
+      delete newObj[key];
+    }
+  });
+  // 更新目标对象值
+  Object.assign(target, newObj);
+};
+
+/**
+ * 解析 JSON 字符串
+ *
+ * @param str
+ */
+export function jsonParse(str) {
+  try {
+    return JSON.parse(str);
+  } catch (e) {
+    console.warn(`str[${str}] 不是一个 JSON 字符串`);
+    return str;
+  }
+}
+
+/**
+ * 获得当前周的开始和结束时间
+ */
+export function getWeekTimes() {
+  const today = new Date();
+  const dayOfWeek = today.getDay();
+  return [
+    new Date(today.getFullYear(), today.getMonth(), today.getDate() - dayOfWeek, 0, 0, 0),
+    new Date(today.getFullYear(), today.getMonth(), today.getDate() + (6 - dayOfWeek), 23, 59, 59),
+  ];
+}
+
+/**
+ * 获得当前月的开始和结束时间
+ */
+export function getMonthTimes() {
+  const today = new Date();
+  const year = today.getFullYear();
+  const month = today.getMonth();
+  const startDate = new Date(year, month, 1, 0, 0, 0);
+  const nextMonth = new Date(year, month + 1, 1);
+  const endDate = new Date(nextMonth.getTime() - 1);
+  return [startDate, endDate];
+}
diff --git a/src/sheep/hooks/use-scroll.ts b/src/sheep/hooks/use-scroll.ts
index fa979fef..a3889b4d 100644
--- a/src/sheep/hooks/use-scroll.ts
+++ b/src/sheep/hooks/use-scroll.ts
@@ -56,9 +56,6 @@ export default function useScroll(fetchList: (...arg: any) => Promise<any>, fetc
     refresherTriggered.value = true;
     const success = await loadData(true);
     refresherTriggered.value = false;
-    if (success) {
-      uni.showToast({ title: '刷新成功', icon: 'success' });
-    }
   };
 
   // 下拉刷新中止
diff --git a/src/sheep/hooks/useGoods.js b/src/sheep/hooks/useGoods.js
index 9374cab8..27932cbc 100644
--- a/src/sheep/hooks/useGoods.js
+++ b/src/sheep/hooks/useGoods.js
@@ -1,7 +1,7 @@
 import { ref } from 'vue';
 import dayjs from 'dayjs';
 import $url from '@/sheep/url';
-import { formatDate } from '@/sheep/util';
+import { formatDate } from '@/sheep/helper/utils';
 
 /**
  * 格式化销量
diff --git a/src/sheep/hooks/useModal.js b/src/sheep/hooks/useModal.js
index 003fe809..5b4d1633 100644
--- a/src/sheep/hooks/useModal.js
+++ b/src/sheep/hooks/useModal.js
@@ -8,19 +8,20 @@ import AuthUtil from '@/sheep/api/member/auth';
 // 打开授权弹框
 export function showAuthModal(type = 'smsLogin') {
   const modal = $store('modal');
-  if (modal.auth !== '') {
-    // 注意：延迟修改，保证下面的 closeAuthModal 先执行掉
-    setTimeout(() => {
-      modal.$patch((state) => {
-        state.auth = type;
-      });
-    }, 500);
-    closeAuthModal();
-  } else {
+  // #ifdef H5
+  closeAuthModal();
+  setTimeout(() => {
     modal.$patch((state) => {
       state.auth = type;
     });
-  }
+  }, 200);
+  // #endif
+
+  // #ifndef H5
+  modal.$patch((state) => {
+    state.auth = type;
+  });
+  // #endif
 }
 
 // 关闭授权弹框
diff --git a/src/sheep/index.js b/src/sheep/index.js
index 6cd2adec..c135334f 100644
--- a/src/sheep/index.js
+++ b/src/sheep/index.js
@@ -14,20 +14,20 @@ dayjs.locale('zh-cn');
 dayjs.extend(relativeTime);
 dayjs.extend(duration);
 
-let sheep = {
-  // $api,
-  // $store,
-  // $url,
-  // $router,
-  // $platform,
-  // $helper,
-  // $zIndex: zIndex,
+const sheep = {
+  $api,
+  $store,
+  $url,
+  $router,
+  $platform,
+  $helper,
+  $zIndex: zIndex,
 };
 
 // 加载Shopro底层依赖
 export async function ShoproInit() {
   // 应用初始化
-  // await $store('app').init();
+  await $store('app').init();
 
   // 平台初始化加载(各平台provider提供不同的加载流程)
   $platform.load();
diff --git a/src/sheep/libs/permission.js b/src/sheep/libs/permission.js
index 59f9413b..3e05a268 100644
--- a/src/sheep/libs/permission.js
+++ b/src/sheep/libs/permission.js
@@ -234,9 +234,7 @@ function gotoAppPermissionSetting() {
 
 const permission = {
   get isIOS() {
-    return typeof isIOS === 'boolean'
-      ? isIOS
-      : (isIOS = uni.getSystemInfoSync().platform === 'ios');
+    return typeof isIOS === 'boolean' ? isIOS : (isIOS = uni.getDeviceInfo().platform === 'ios');
   },
   requestIOS: requestIOS,
   requestAndroid: requestAndroid,
diff --git a/src/sheep/libs/sdk-h5-weixin.js b/src/sheep/libs/sdk-h5-weixin.js
index 984b8dbd..c5537803 100644
--- a/src/sheep/libs/sdk-h5-weixin.js
+++ b/src/sheep/libs/sdk-h5-weixin.js
@@ -30,7 +30,7 @@ export default {
     }
 
     // 调用后端接口，获得 JSSDK 初始化所需的签名
-    const url = location.href.split('#')[0];
+    const url = location.origin;
     const { code, data } = await AuthUtil.createWeixinMpJsapiSignature(url);
     if (code === 0) {
       jweixin.config({
@@ -39,9 +39,18 @@ export default {
         timestamp: data.timestamp,
         nonceStr: data.nonceStr,
         signature: data.signature,
-        jsApiList: ['chooseWXPay', 'openLocation', 'getLocation','updateTimelineShareData','scanQRCode'], // TODO 芋艿：后续可以设置更多权限；
-        openTagList: data.openTagList
+        jsApiList: [
+          'chooseWXPay',
+          'openLocation',
+          'getLocation',
+          'updateAppMessageShareData',
+          'updateTimelineShareData',
+          'scanQRCode',
+        ], // TODO 芋艿：后续可以设置更多权限；
+        openTagList: data.openTagList,
       });
+    } else {
+      console.log('请求 JSSDK 配置失败，错误码：', code);
     }
 
     // 监听结果
@@ -49,13 +58,13 @@ export default {
     jweixin.error((err) => {
       configSuccess = false;
       console.error('微信 JSSDK 初始化失败', err);
-      // $helper.toast('微信JSSDK:' + err.errMsg);
+      $helper.toast('微信JSSDK:' + err.errMsg);
     });
     jweixin.ready(() => {
       if (configSuccess) {
         console.log('微信 JSSDK 初始化成功');
       }
-    })
+    });
 
     // 回调
     if (callback) {
@@ -110,7 +119,7 @@ export default {
     });
   },
 
-  // 更新微信分享信息 TODO 芋艿：未测试
+  // 更新微信分享信息
   updateShareInfo(data, callback = null) {
     this.isReady(() => {
       const shareData = {
@@ -141,7 +150,7 @@ export default {
         ...data,
         success: function (res) {
           console.log(res);
-        }
+        },
       });
     });
   },
diff --git a/src/sheep/platform/index.js b/src/sheep/platform/index.js
index 0956bb03..bf48e521 100644
--- a/src/sheep/platform/index.js
+++ b/src/sheep/platform/index.js
@@ -18,9 +18,9 @@ import apple from './provider/apple';
 import share from './share';
 import Pay from './pay';
 
-const device = uni.getSystemInfoSync();
+const device = uni.getWindowInfo();
 
-const os = device.platform;
+const os = uni.getDeviceInfo().platform;
 
 let name = '';
 let provider = '';
diff --git a/src/sheep/platform/pay.js b/src/sheep/platform/pay.js
index 5f20fa20..52d4fb15 100644
--- a/src/sheep/platform/pay.js
+++ b/src/sheep/platform/pay.js
@@ -93,7 +93,7 @@ export default class SheepPay {
       };
       // 特殊逻辑：微信公众号、小程序支付时，必须传入 openid
       if (['wx_pub', 'wx_lite'].includes(channel)) {
-        const openid = await sheep.$platform.useProvider('wechat').getOpenid();
+        const openid = await sheep.$platform.useProvider('wechat').getOpenid(true);
         // 如果获取不到 openid，微信无法发起支付，此时需要引导
         if (!openid) {
           this.bindWeixin();
@@ -235,7 +235,8 @@ export default class SheepPay {
     if (code !== 0) {
       return;
     }
-    
+
+    // TODO @芋艿：【可优化】如果是沙箱支付，EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX)，相关 https://t.zsxq.com/yjyJQ
     uni.requestPayment({
       provider: 'alipay',
       orderInfo: data.displayContent, // 直接使用返回的支付参数
@@ -263,8 +264,16 @@ export default class SheepPay {
     }
 
     // 解析支付参数
-    const payConfig = JSON.parse(data.displayContent);
-    
+    let payConfig = JSON.parse(data.displayContent);
+    if(typeof payConfig.appId === 'undefined'){
+      payConfig.appId = payConfig.appid;
+    }
+    if(typeof payConfig.nonceStr === 'undefined'){
+      payConfig.nonceStr = payConfig.noncestr;
+    }
+    if(typeof payConfig.timeStamp === 'undefined'){
+      payConfig.timeStamp = payConfig.timestamp;
+    }
     // 调用微信支付
     uni.requestPayment({
       provider: 'wxpay',
@@ -283,7 +292,7 @@ export default class SheepPay {
           sheep.$helper.toast('支付失败：' + err.errMsg);
           that.payResult('fail');
         }
-      }
+      },
     });
   }
 
@@ -294,15 +303,7 @@ export default class SheepPay {
 
   // 引导绑定微信
   bindWeixin() {
-    uni.showModal({
-      title: '微信支付',
-      content: '请先绑定微信再使用微信支付',
-      success: function (res) {
-        if (res.confirm) {
-          sheep.$platform.useProvider('wechat').bind();
-        }
-      },
-    });
+    goBindWeixin();
   }
 }
 
@@ -383,3 +384,32 @@ export function goPayResult(id, orderType, resultType) {
     payState: resultType,
   });
 }
+
+export function goBindWeixin() {
+  uni.showModal({
+    title: '微信支付',
+    content: '请先绑定微信再使用微信支付',
+    success: function (res) {
+      if (res.confirm) {
+        sheep.$platform.useProvider('wechat').bind();
+      }
+    },
+  });
+}
+
+// 获取微信支付渠道码
+export function getWeixinPayChannelCode() {
+  const platform = sheep.$platform.name;
+  switch (platform) {
+    case 'WechatOfficialAccount':
+      return 'wx_pub';
+    case 'WechatMiniProgram':
+      return 'wx_lite';
+    case 'App':
+      return 'wx_app';
+    case 'H5':
+      return 'wx_wap';
+    default:
+      return '';
+  }
+}
diff --git a/src/sheep/platform/provider/wechat/miniProgram.js b/src/sheep/platform/provider/wechat/miniProgram.js
index 5e95edad..1fe18091 100644
--- a/src/sheep/platform/provider/wechat/miniProgram.js
+++ b/src/sheep/platform/provider/wechat/miniProgram.js
@@ -1,6 +1,7 @@
 import AuthUtil from '@/sheep/api/member/auth';
 import SocialApi from '@/sheep/api/member/social';
 import UserApi from '@/sheep/api/member/user';
+import sheep from '@/sheep';
 
 const socialType = 34; // 社交类型 - 微信小程序
 
@@ -126,14 +127,14 @@ async function getInfo() {
 const checkUpdate = async (silence = true) => {
   if (uni.canIUse('getUpdateManager')) {
     const updateManager = uni.getUpdateManager();
-    updateManager.onCheckForUpdate(function(res) {
+    updateManager.onCheckForUpdate(function (res) {
       // 请求完新版本信息的回调
       if (res.hasUpdate) {
-        updateManager.onUpdateReady(function() {
+        updateManager.onUpdateReady(function () {
           uni.showModal({
             title: '更新提示',
             content: '新版本已经准备好，是否重启应用？',
-            success: function(res) {
+            success: function (res) {
               if (res.confirm) {
                 // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
                 updateManager.applyUpdate();
@@ -141,7 +142,7 @@ const checkUpdate = async (silence = true) => {
             },
           });
         });
-        updateManager.onUpdateFailed(function() {
+        updateManager.onUpdateFailed(function () {
           // 新的版本下载失败
           // uni.showModal({
           //   title: '已经有新版本了哟~',
@@ -169,17 +170,17 @@ async function getSubscribeTemplate() {
 }
 
 // 订阅消息
-function subscribeMessage(event, callback= undefined) {
+function subscribeMessage(event, callback = undefined) {
   let tmplIds = [];
   if (typeof event === 'string') {
-    const temp = subscribeEventList.find(item => item.title.includes(event));
+    const temp = subscribeEventList.find((item) => item.title.includes(event));
     if (temp) {
       tmplIds.push(temp.id);
     }
   }
   if (typeof event === 'object') {
     event.forEach((e) => {
-      const temp = subscribeEventList.find(item => item.title.includes(e));
+      const temp = subscribeEventList.find((item) => item.title.includes(e));
       if (temp) {
         tmplIds.push(temp.id);
       }
@@ -189,16 +190,42 @@ function subscribeMessage(event, callback= undefined) {
 
   uni.requestSubscribeMessage({
     tmplIds,
-		success: ()=>{
+    success: () => {
       // 不管是拒绝还是同意都触发
-      callback && callback()
-		},
+      callback && callback();
+    },
     fail: (err) => {
       console.log(err);
     },
   });
 }
 
+// 商家转账用户确认模式下，拉起页面请求用户确认收款 Transfer
+function requestMerchantTransfer(mchId, packageInfo, successCallback, failCallback) {
+  if (!wx.canIUse('requestMerchantTransfer')) {
+    wx.showModal({
+      content: '你的微信版本过低，请更新至最新版本。',
+      showCancel: false,
+    });
+    return;
+  }
+  wx.requestMerchantTransfer({
+    mchId: mchId,
+    appId: wx.getAccountInfoSync().miniProgram.appId,
+    package: packageInfo,
+    success: (res) => {
+      // res.err_msg 将在页面展示成功后返回应用时返回 ok，并不代表付款成功
+      console.log('success:', res);
+      successCallback && successCallback(res);
+    },
+    fail: (res) => {
+      console.log('fail:', res);
+      sheep.$helper.toast(res.errMsg);
+      failCallback && failCallback(res);
+    },
+  });
+}
+
 export default {
   load,
   login,
@@ -210,4 +237,5 @@ export default {
   getOpenid,
   subscribeMessage,
   checkUpdate,
+  requestMerchantTransfer,
 };
diff --git a/src/sheep/platform/provider/wechat/officialAccount.js b/src/sheep/platform/provider/wechat/officialAccount.js
index ed7beb32..18adbe0a 100644
--- a/src/sheep/platform/provider/wechat/officialAccount.js
+++ b/src/sheep/platform/provider/wechat/officialAccount.js
@@ -19,7 +19,7 @@ async function login(code = '', state = '') {
       uni.setStorageSync('returnUrl', location.href);
       window.location = loginUrl;
     }
-  // 情况二：有 code 时，使用 code 去自动登录
+    // 情况二：有 code 时，使用 code 去自动登录
   } else {
     // 解密 code 发起登陆
     const loginResult = await AuthUtil.socialLogin(socialType, code, state);
@@ -59,8 +59,7 @@ const unbind = async (openid) => {
 
 // 获取公众号登陆地址
 async function getLoginUrl(event = 'login') {
-  const page = getRootUrl() + 'pages/index/login'
-    + '?event=' + event; // event 目的，区分是 login 还是 bind
+  const page = getRootUrl() + 'pages/index/login' + '?event=' + event; // event 目的，区分是 login 还是 bind
   const { code, data } = await AuthUtil.socialAuthRedirect(socialType, page);
   if (code !== 0) {
     return undefined;
diff --git a/src/sheep/platform/share.js b/src/sheep/platform/share.js
index 2390d66f..b566a9d4 100644
--- a/src/sheep/platform/share.js
+++ b/src/sheep/platform/share.js
@@ -3,7 +3,7 @@ import $platform from '@/sheep/platform';
 import $router from '@/sheep/router';
 import $url from '@/sheep/url';
 import BrokerageApi from '@/sheep/api/trade/brokerage';
-import { SharePageEnum } from '@/sheep/util/const';
+import { SharePageEnum } from '@/sheep/helper/const';
 
 // #ifdef H5
 import $wxsdk from '@/sheep/libs/sdk-h5-weixin';
@@ -15,7 +15,6 @@ const platformMap = ['H5', 'WechatOfficialAccount', 'WechatMiniProgram', 'App'];
 // 设置分享方式: 1=直接转发,2=海报,3=复制链接,...按需扩展
 const fromMap = ['forward', 'poster', 'link'];
 
-// TODO 芋艿：分享的接入
 // 设置分享信息参数
 const getShareInfo = (
   scene = {
@@ -37,7 +36,7 @@ const getShareInfo = (
     link: '', // 分享Url+参数
     query: '', // 分享参数
     poster, // 海报所需数据
-    forward: {} // 转发所需参数
+    forward: {}, // 转发所需参数
   };
   shareInfo.title = scene.title;
   shareInfo.image = $url.cdn(scene.image);
diff --git a/src/sheep/request/index.js b/src/sheep/request/index.js
index 891d8f3b..67e754b2 100644
--- a/src/sheep/request/index.js
+++ b/src/sheep/request/index.js
@@ -3,30 +3,31 @@
  * @description api模块管理，loading配置，请求拦截，错误处理
  */
 
-import Request from "luch-request";
-import { apiPath, baseUrl, tenantId } from "@/sheep/config";
-import $store from "@/sheep/store";
-import $platform from "@/sheep/platform";
-import { showAuthModal } from "@/sheep/hooks/useModal";
-import AuthUtil from "@/sheep/api/member/auth";
-import { getTerminal } from "@/sheep/util/const";
+import Request from 'luch-request';
+import { apiPath, baseUrl, tenantId } from '@/sheep/config';
+import $store from '@/sheep/store';
+import $platform from '@/sheep/platform';
+// import { showAuthModal } from '@/sheep/hooks/useModal';
+import AuthUtil from '@/sheep/api/member/auth';
+import { getTerminal } from '@/sheep/helper/const';
 
 const options = {
   // 显示操作成功消息 默认不显示
   showSuccess: false,
   // 成功提醒 默认使用后端返回值
-  successMsg: "",
+  successMsg: '',
   // 显示失败消息 默认显示
   showError: true,
   // 失败提醒 默认使用后端返回信息
-  errorMsg: "",
+  errorMsg: '',
   // 显示请求时loading模态框 默认显示
   showLoading: true,
   // loading提醒文字
-  loadingMsg: "加载中",
+  loadingMsg: '加载中',
   // 需要授权才能请求 默认放开
   auth: false,
-  // ...
+  // 是否传递 token
+  isToken: true,
 };
 
 // Loading全局实例
@@ -49,10 +50,10 @@ function closeLoading() {
 const http = new Request({
   baseURL: baseUrl + apiPath,
   timeout: 8000,
-  method: "GET",
+  method: 'GET',
   header: {
-    Accept: "text/json",
-    "Content-Type": "application/json;charset=UTF-8",
+    Accept: 'text/json',
+    'Content-Type': 'application/json;charset=UTF-8',
     platform: $platform.name,
   },
   // #ifdef APP-PLUS
@@ -71,8 +72,8 @@ const http = new Request({
 http.interceptors.request.use(
   (config) => {
     // 自定义处理【auth 授权】：必须登录的接口，则跳出 AuthModal 登录弹窗
-    if (config.custom.auth && !$store("user").isLogin) {
-      showAuthModal();
+    if (config.custom.auth && !$store('user').isLogin) {
+      // showAuthModal();
       return Promise.reject();
     }
 
@@ -90,19 +91,19 @@ http.interceptors.request.use(
     }
 
     // 增加 token 令牌、terminal 终端、tenant 租户的请求头
-    const token = getAccessToken();
+    const token = config.custom.isToken ? getAccessToken() : undefined;
     if (token) {
-      config.header["Authorization"] = token;
+      config.header['Authorization'] = token;
     }
-    config.header["terminal"] = getTerminal();
+    config.header['terminal'] = getTerminal();
 
-    config.header["Accept"] = "*/*";
-    config.header["tenant-id"] = tenantId;
+    config.header['Accept'] = '*/*';
+    config.header['tenant-id'] = getTenantId();
     return config;
   },
   (error) => {
     return Promise.reject(error);
-  }
+  },
 );
 
 /**
@@ -111,8 +112,8 @@ http.interceptors.request.use(
 http.interceptors.response.use(
   (response) => {
     // 约定：如果是 /auth/ 下的 URL 地址，并且返回了 accessToken 说明是登录相关的接口，则自动设置登陆令牌
-    if (response.config.url.indexOf("/member/auth/") >= 0 && response.data?.data?.accessToken) {
-      $store("user").setToken(response.data.data.accessToken, response.data.data.refreshToken);
+    if (response.config.url.indexOf('/member/auth/') >= 0 && response.data?.data?.accessToken) {
+      $store('user').setToken(response.data.data.accessToken, response.data.data.refreshToken);
     }
 
     // 自定处理【loading 加载中】：如果需要显示 loading，则关闭 loading
@@ -125,23 +126,27 @@ http.interceptors.response.use(
         return refreshToken(response.config);
       }
       // 特殊：处理分销用户绑定失败的提示
-      if ((response.data.code + "").includes("1011007")) {
+      if ((response.data.code + '').includes('1011007')) {
         console.error(`分销用户绑定失败，原因：${response.data.msg}`);
       } else if (response.config.custom.showError) {
         // 错误提示
         uni.showToast({
-          title: response.data.msg || "服务器开小差啦,请稍后再试~",
-          icon: "none",
+          title: response.data.msg || '服务器开小差啦,请稍后再试~',
+          icon: 'none',
           mask: true,
         });
       }
     }
 
     // 自定义处理【showSuccess 成功提示】：如果需要显示成功提示，则显示成功提示
-    if (response.config.custom.showSuccess && response.config.custom.successMsg !== "" && response.data.code === 0) {
+    if (
+      response.config.custom.showSuccess &&
+      response.config.custom.successMsg !== '' &&
+      response.data.code === 0
+    ) {
       uni.showToast({
         title: response.config.custom.successMsg,
-        icon: "none",
+        icon: 'none',
       });
     }
 
@@ -149,60 +154,61 @@ http.interceptors.response.use(
     return Promise.resolve(response.data);
   },
   (error) => {
-    const userStore = $store("user");
+    const userStore = $store('user');
     const isLogin = userStore.isLogin;
-    let errorMessage = "网络请求出错";
+    let errorMessage = '网络请求出错';
     if (error !== undefined) {
       switch (error.statusCode) {
         case 400:
-          errorMessage = "请求错误";
+          errorMessage = '请求错误';
           break;
         case 401:
-          errorMessage = isLogin ? "您的登陆已过期" : "请先登录";
+          errorMessage = isLogin ? '您的登陆已过期' : '请先登录';
           // 正常情况下，后端不会返回 401 错误，所以这里不处理 handleAuthorized
           break;
         case 403:
-          errorMessage = "拒绝访问";
+          errorMessage = '拒绝访问';
           break;
         case 404:
-          errorMessage = "请求出错";
+          errorMessage = '请求出错';
           break;
         case 408:
-          errorMessage = "请求超时";
+          errorMessage = '请求超时';
           break;
         case 429:
-          errorMessage = "请求频繁, 请稍后再访问";
+          errorMessage = '请求频繁, 请稍后再访问';
           break;
         case 500:
-          errorMessage = "服务器开小差啦,请稍后再试~";
+          errorMessage = '服务器开小差啦,请稍后再试~';
           break;
         case 501:
-          errorMessage = "服务未实现";
+          errorMessage = '服务未实现';
           break;
         case 502:
-          errorMessage = "网络错误";
+          errorMessage = '网络错误';
           break;
         case 503:
-          errorMessage = "服务不可用";
+          errorMessage = '服务不可用';
           break;
         case 504:
-          errorMessage = "网络超时";
+          errorMessage = '网络超时';
           break;
         case 505:
-          errorMessage = "HTTP 版本不受支持";
+          errorMessage = 'HTTP 版本不受支持';
           break;
       }
-      if (error.errMsg.includes("timeout")) errorMessage = "请求超时";
+      if (error.errMsg.includes('timeout')) errorMessage = '请求超时';
       // #ifdef H5
-      if (error.errMsg.includes("Network")) errorMessage = window.navigator.onLine ? "服务器异常" : "请检查您的网络连接";
+      if (error.errMsg.includes('Network'))
+        errorMessage = window.navigator.onLine ? '服务器异常' : '请检查您的网络连接';
       // #endif
     }
 
     if (error && error.config) {
-      if (error.config.custom.showError === false) {
+      if (error.config.custom.showError) {
         uni.showToast({
           title: error.data?.msg || errorMessage,
-          icon: "none",
+          icon: 'none',
           mask: true,
         });
       }
@@ -210,7 +216,7 @@ http.interceptors.response.use(
     }
 
     return false;
-  }
+  },
 );
 
 // Axios 无感知刷新令牌，参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现
@@ -218,8 +224,8 @@ let requestList = []; // 请求队列
 let isRefreshToken = false; // 是否正在刷新中
 const refreshToken = async (config) => {
   // 如果当前已经是 refresh-token 的 URL 地址，并且还是 401 错误，说明是刷新令牌失败了，直接返回 Promise.reject(error)
-  if (config.url.indexOf("/member/auth/refresh-token") >= 0) {
-    return Promise.reject("error");
+  if (config.url.indexOf('/member/auth/refresh-token') >= 0) {
+    return Promise.reject('error');
   }
 
   // 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了
@@ -236,10 +242,10 @@ const refreshToken = async (config) => {
       if (refreshTokenResult.code !== 0) {
         // 如果刷新不成功，直接抛出 e 触发 2.2 的逻辑
         // noinspection ExceptionCaughtLocallyJS
-        throw new Error("刷新令牌失败");
+        throw new Error('刷新令牌失败');
       }
       // 2.1 刷新成功，则回放队列的请求 + 当前请求
-      config.header.Authorization = "Bearer " + getAccessToken();
+      config.header.Authorization = 'Bearer ' + getAccessToken();
       requestList.forEach((cb) => {
         cb();
       });
@@ -261,7 +267,7 @@ const refreshToken = async (config) => {
     // 添加到队列，等待刷新获取到新的令牌
     return new Promise((resolve) => {
       requestList.push(() => {
-        config.header.Authorization = "Bearer " + getAccessToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
+        config.header.Authorization = 'Bearer ' + getAccessToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
         resolve(request(config));
       });
     });
@@ -272,24 +278,29 @@ const refreshToken = async (config) => {
  * 处理 401 未登录的错误
  */
 const handleAuthorized = () => {
-  const userStore = $store("user");
+  const userStore = $store('user');
   userStore.logout(true);
-  showAuthModal();
+  // showAuthModal();
   // 登录超时
   return Promise.reject({
     code: 401,
-    msg: userStore.isLogin ? "您的登陆已过期" : "请先登录",
+    msg: userStore.isLogin ? '您的登陆已过期' : '请先登录',
   });
 };
 
 /** 获得访问令牌 */
 export const getAccessToken = () => {
-  return uni.getStorageSync("token");
+  return uni.getStorageSync('token');
 };
 
 /** 获得刷新令牌 */
 export const getRefreshToken = () => {
-  return uni.getStorageSync("refresh-token");
+  return uni.getStorageSync('refresh-token');
+};
+
+/** 获得租户编号 */
+export const getTenantId = () => {
+  return uni.getStorageSync('tenant-id') || tenantId;
 };
 
 const request = (config) => {
diff --git a/src/sheep/scss/icon/_icon.scss b/src/sheep/scss/icon/_icon.scss
index f277fc8d..9d22c6e1 100644
--- a/src/sheep/scss/icon/_icon.scss
+++ b/src/sheep/scss/icon/_icon.scss
@@ -1,6 +1,6 @@
 @font-face {
   font-family: 'colorui'; /* Project id 2620914 */
-  src: url('data:application/x-font-woff2;charset=utf-8;base64,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')
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,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')
     format('woff2');
   /* #ifdef MP-ALIPAY */
   src: url('//at.alicdn.com/t/font_2620914_57y9q5zpbel.woff?t=1624238023908') format('woff'),
@@ -179,3 +179,7 @@
 ._icon-move-round-o:before {
   content: '\e603';
 }
+
+._icon-scan:before {
+  content: '\e85d';
+}
diff --git a/src/sheep/store/app.js b/src/sheep/store/app.js
index 36f767f1..fae0336f 100644
--- a/src/sheep/store/app.js
+++ b/src/sheep/store/app.js
@@ -1,9 +1,12 @@
 import DiyApi from '@/sheep/api/promotion/diy';
+import { getTenantByWebsite } from '@/sheep/api/infra/tenant';
+import { getTenantId } from '@/sheep/request';
 import { defineStore } from 'pinia';
 import $platform from '@/sheep/platform';
 import $router from '@/sheep/router';
 import user from './user';
 import sys from './sys';
+import { baseUrl, h5Url } from '@/sheep/config';
 
 const app = defineStore({
   id: 'app',
@@ -54,17 +57,25 @@ const app = defineStore({
         $router.error('NetworkError');
       }
 
+      // 检查配置
+      if (typeof baseUrl === 'undefined') {
+        $router.error('EnvError');
+      }
+
+      // 加载租户
+      await adaptTenant();
+
       // 加载装修配置
       await adaptTemplate(this.template, templateId);
 
-      // TODO 芋艿：未来支持管理后台可配；对应 https://api.shopro.sheepjs.com/shop/api/init
+      // TODO 芋艿：【初始化优化】未来支持管理后台可配；对应 https://api.shopro.sheepjs.com/shop/api/init
       if (true) {
         this.info = {
           name: '芋道商城',
           logo: 'https://static.iocoder.cn/ruoyi-vue-pro-logo.png',
-          version: '2.4.0',
+          version: '2025.10',
           copyright: '全部开源，个人与企业可 100% 免费使用',
-          copytime: 'Copyright© 2018-2024',
+          copytime: 'Copyright© 2018-2025',
 
           cdnurl: 'https://file.sheepjs.com', // 云存储域名
           filesystem: 'qcloud', // 云存储平台
@@ -72,7 +83,7 @@ const app = defineStore({
         this.platform = {
           share: {
             methods: ['forward', 'poster', 'link'],
-            linkAddress: 'http://127.0.0.1:3000', // TODO 芋艿：可以考虑改到 .env 那
+            linkAddress: h5Url,
             posterInfo: {
               user_bg: '/static/img/shop/config/user-poster-bg.png',
               goods_bg: '/static/img/shop/config/goods-poster-bg.png',
@@ -113,7 +124,55 @@ const app = defineStore({
   },
 });
 
-// todo: @owen 先做数据适配，后期重构
+/** 初始化租户编号 */
+const adaptTenant = async () => {
+  // 1. 获取当前租户 ID
+  const oldTenantId = getTenantId();
+  let newTenantId = null;
+
+  try {
+    // 2.1 情况一：H5：根据 url 参数、域名来获取新的租户ID
+    // #ifdef H5
+    // H5 环境下的处理逻辑
+    if (window?.location) {
+      // 优先从 URL 查询参数获取 tenantId
+      const urlParams = new URLSearchParams(window.location.search);
+      newTenantId = urlParams.get('tenantId');
+
+      // 如果 URL 参数中没有，则通过 host 获取
+      if (!newTenantId && window.location.host) {
+        const { data } = await getTenantByWebsite(window.location.host);
+        newTenantId = data?.id;
+      }
+    }
+    // #endif
+
+    // 2.2 情况二：微信小程序：小程序环境下的处理逻辑 - 根据 appId 获取租户
+    // #ifdef MP
+    const appId = uni.getAccountInfoSync()?.miniProgram?.appId;
+    if (appId) {
+      const { data } = await getTenantByWebsite(appId);
+      newTenantId = data?.id;
+    }
+    // #endif
+
+    // 3. 如果是新租户（不相等），则进行切换
+    // noinspection EqualityComparisonWithCoercionJS
+    if (newTenantId && newTenantId != oldTenantId) {
+      // 清理掉登录用户的 token
+      const userStore = user();
+      userStore.setToken();
+
+      // 设置新的 tenantId 到本地存储
+      uni.setStorageSync('tenant-id', newTenantId);
+      console.log('租户 ID 已更新:', `${oldTenantId} -> ${newTenantId}`);
+    }
+  } catch (error) {
+    console.error('adaptTenant 执行失败:', error);
+  }
+};
+
+/** 初始化装修模版 */
 const adaptTemplate = async (appTemplate, templateId) => {
   const { data: diyTemplate } = templateId
     ? // 查询指定模板，一般是预览时使用
diff --git a/src/sheep/store/cart.js b/src/sheep/store/cart.js
index edde779d..ab96a2bc 100644
--- a/src/sheep/store/cart.js
+++ b/src/sheep/store/cart.js
@@ -4,26 +4,29 @@ import CartApi from '@/sheep/api/trade/cart';
 const cart = defineStore({
   id: 'cart',
   state: () => ({
-    list: [], // 购物车列表
+    list: [], // 购物车列表（invalidList + validList）
     selectedIds: [], // 已选列表
     isAllSelected: false, // 是否全选
     totalPriceSelected: 0, // 选中项总金额
+    newList: [], // 除去已下架的购物车列表（validList）
+    editMode: false, // 是否是编辑模式
   }),
   actions: {
     // 获取购物车列表
     async getList() {
       const { data, code } = await CartApi.getCartList();
       if (code === 0) {
-        this.list = data.validList;
+        this.list = [...data.validList, ...data.invalidList];
+        this.newList = data.validList;
 
         // 计算各种关联属性
         this.selectedIds = [];
         this.isAllSelected = true;
         this.totalPriceSelected = 0;
-        this.list.forEach((item) => {
+        (this.editMode ? this.list : this.newList).forEach((item) => {
           if (item.selected) {
             this.selectedIds.push(item.id);
-            this.totalPriceSelected += item.count * item.sku.price;
+            this.totalPriceSelected += item.count * item.sku?.price;
           } else {
             this.isAllSelected = false;
           }
@@ -31,6 +34,12 @@ const cart = defineStore({
       }
     },
 
+    onChangeEditMode(flag) {
+      this.editMode = flag;
+      this.selectedIds = [];
+      this.getList();
+    },
+
     // 添加购物车
     async add(goodsInfo) {
       // 添加购物项
@@ -84,7 +93,7 @@ const cart = defineStore({
     async selectAll(flag) {
       const { code } = await CartApi.updateCartSelected({
         ids: this.list.map((item) => item.id),
-        selected: flag
+        selected: flag,
       });
       if (code === 0) {
         await this.getList();
diff --git a/src/sheep/store/user.js b/src/sheep/store/user.js
index 57471e4d..8892d466 100644
--- a/src/sheep/store/user.js
+++ b/src/sheep/store/user.js
@@ -44,7 +44,7 @@ const user = defineStore({
     isLogin: !!uni.getStorageSync('token'), // 登录状态
     numData: cloneDeep(defaultNumData), // 用户其他数据
     lastUpdateTime: 0, // 上次更新时间
-    userCity: { t: '', v: 0 },
+    userCity: JSON.parse(uni.getStorageSync('user-store')).userCity || {},
   }),
 
   actions: {
@@ -129,7 +129,6 @@ const user = defineStore({
     },
 
     // 登录后，加载各种信息
-    // TODO 芋艿：整理下；
     async loginAfter() {
       await this.updateUserData();
 
diff --git a/src/sheep/ui/su-coupon/su-coupon.vue b/src/sheep/ui/su-coupon/su-coupon.vue
index 472d17fe..23a76de1 100644
--- a/src/sheep/ui/su-coupon/su-coupon.vue
+++ b/src/sheep/ui/su-coupon/su-coupon.vue
@@ -43,7 +43,8 @@
         </view>
         <view class="ss-m-b-28">
           <view class="title-text ss-m-b-10">{{ props.title }}</view>
-          <view class="surplus-text" v-if="props.surplus">仅剩：{{ props.surplus }}张</view>
+          <view class="surplus-text" v-if="props.surplus >= 0">仅剩：{{ props.surplus }}张</view>
+          <view class="surplus-text" v-else-if="props.surplus === -1">仅限：不限制</view>
         </view>
       </view>
       <view class="card-right ss-flex ss-row-center">
diff --git a/src/sheep/ui/su-navbar/su-navbar.vue b/src/sheep/ui/su-navbar/su-navbar.vue
index af96f248..fb34cf16 100644
--- a/src/sheep/ui/su-navbar/su-navbar.vue
+++ b/src/sheep/ui/su-navbar/su-navbar.vue
@@ -212,8 +212,8 @@
   });
 
   const searchModel = computed(() => {
-		return props.defaultSearch
-	})
+    return props.defaultSearch;
+  });
 
   const themeBgColor = computed(() => {
     if (props.dark) {
diff --git a/src/sheep/ui/su-sticky/su-sticky.vue b/src/sheep/ui/su-sticky/su-sticky.vue
index a8831a26..959318d9 100644
--- a/src/sheep/ui/su-sticky/su-sticky.vue
+++ b/src/sheep/ui/su-sticky/su-sticky.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-  import { deepMerge, addStyle, addUnit, sleep, guid, getPx, os, sys } from '@/sheep/helper';
+  import { deepMerge, addStyle, addUnit, guid, getPx, os } from '@/sheep/helper';
   import sheep from '@/sheep';
   /**
    * sticky 吸顶
@@ -130,7 +130,8 @@
       },
       $uGetRect(selector, all) {
         return new Promise((resolve) => {
-          uni.createSelectorQuery()
+          uni
+            .createSelectorQuery()
             .in(this)
             [all ? 'selectAll' : 'select'](selector)
             .boundingClientRect((rect) => {
@@ -194,7 +195,7 @@
         // #endif
 
         // 如果安卓版本高于8.0，依然认为是支持css sticky的(因为安卓7在某些机型，可能不支持sticky)
-        if (os() === 'android' && Number(sys().system) > 8) {
+        if (os() === 'android' && Number(uni.getDeviceInfo().system) > 8) {
           this.cssSticky = true;
         }
 
@@ -218,7 +219,8 @@
         // 方法内进行判断，避免在其他平台生成无用代码
         // #ifdef APP-VUE || MP-WEIXIN
         return new Promise((resolve) => {
-          uni.createSelectorQuery()
+          uni
+            .createSelectorQuery()
             .in(this)
             .select('.u-sticky')
             .fields({
diff --git a/src/sheep/ui/su-tab-item/su-tab-item.vue b/src/sheep/ui/su-tab-item/su-tab-item.vue
index 615df2f4..bcbbed71 100644
--- a/src/sheep/ui/su-tab-item/su-tab-item.vue
+++ b/src/sheep/ui/su-tab-item/su-tab-item.vue
@@ -89,7 +89,8 @@
   const titleStyle = computed(() => uiTabProvide?.props?.titleStyle);
 
   const computedQuery = () => {
-    uni.createSelectorQuery()
+    uni
+      .createSelectorQuery()
       .in(vm)
       .select('#tab-' + props.index)
       .boundingClientRect((data) => {
diff --git a/src/sheep/ui/su-tabbar-item/su-tabbar-item.vue b/src/sheep/ui/su-tabbar-item/su-tabbar-item.vue
index 6807dfe3..9fff2111 100644
--- a/src/sheep/ui/su-tabbar-item/su-tabbar-item.vue
+++ b/src/sheep/ui/su-tabbar-item/su-tabbar-item.vue
@@ -104,7 +104,7 @@
       // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
       badgeStyle: {
         type: Object,
-        default: ()=>{},
+        default: () => {},
       },
       isCenter: {
         type: Boolean,
diff --git a/src/sheep/ui/su-tabs/su-tabs.vue b/src/sheep/ui/su-tabs/su-tabs.vue
index 05d7dcb3..0cd0b93c 100644
--- a/src/sheep/ui/su-tabs/su-tabs.vue
+++ b/src/sheep/ui/su-tabs/su-tabs.vue
@@ -72,7 +72,7 @@
 </template>
 
 <script>
-  import { deepMerge, addStyle, addUnit, sleep, getPx, sys } from '@/sheep/helper';
+  import { deepMerge, addStyle, addUnit, sleep, getPx } from '@/sheep/helper';
   // #ifdef APP-NVUE
   const animation = uni.requireNativePlugin('animation');
   const dom = uni.requireNativePlugin('dom');
@@ -221,7 +221,8 @@
     methods: {
       $uGetRect(selector, all) {
         return new Promise((resolve) => {
-          uni.createSelectorQuery()
+          uni
+            .createSelectorQuery()
             .in(this)
             [all ? 'selectAll' : 'select'](selector)
             .boundingClientRect((rect) => {
@@ -301,7 +302,7 @@
           return total + curr.rect.width;
         }, 0);
         // 此处为屏幕宽度
-        const windowWidth = sys().windowWidth;
+        const windowWidth = uni.getWindowInfo().windowWidth;
         // 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
         let scrollLeft =
           offsetLeft -
diff --git a/src/sheep/ui/su-video/components/dom-video.vue b/src/sheep/ui/su-video/components/dom-video.vue
new file mode 100644
index 00000000..6f79a50f
--- /dev/null
+++ b/src/sheep/ui/su-video/components/dom-video.vue
@@ -0,0 +1,213 @@
+<!-- eslint-disable -->
+<template>
+  <view
+    v-html="videoHtml"
+    id="dom-video"
+    class="dom-video"
+    :eventDrive="eventDrive"
+    :change:eventDrive="domVideo.eventHandle"
+    :videoSrc="videoSrc"
+    :change:videoSrc="domVideo.srcChange"
+    :videoProps="videoProps"
+    :change:videoProps="domVideo.propsChange"
+    :randomNum="randomNum"
+    :change:randomNum="domVideo.randomNumChange"
+  />
+</template>
+
+<script>
+  export default {
+    props: {
+      src: {
+        type: String,
+        default: '',
+      },
+      autoplay: {
+        type: Boolean,
+        default: false,
+      },
+      loop: {
+        type: Boolean,
+        default: false,
+      },
+      controls: {
+        type: Boolean,
+        default: false,
+      },
+      objectFit: {
+        type: String,
+        default: 'contain',
+      },
+      muted: {
+        type: Boolean,
+        default: false,
+      },
+      poster: {
+        type: String,
+        default: '',
+      },
+    },
+
+    // 数据状态
+    data() {
+      return {
+        videoHtml: '',
+        videoSrc: '',
+        eventDrive: null,
+        videoProps: {},
+        randomNum: Math.floor(Math.random() * 100000000 + 1),
+      };
+    },
+    watch: {
+      // 监听视频资源文件更新
+      src: {
+        handler(val) {
+          if (!val) return;
+          this.initVideoHtml();
+          setTimeout(() => {
+            this.videoSrc = val;
+          }, 0);
+        },
+        immediate: true,
+      },
+      // 监听首次加载
+      autoplay: {
+        handler(val) {
+          this.videoProps.autoplay = val;
+        },
+        immediate: true,
+      },
+    },
+    // 生命周期
+    mounted() {
+      this.initVideoHtml();
+    },
+
+    // 方法
+    methods: {
+      // 将video的事件传递给父组件
+      videoEvent(data) {
+        // console.log('向父组件传递事件 =>', data)
+        this.$emit(data);
+      },
+      // 初始化视频
+      initVideoHtml() {
+        this.videoHtml = `<video
+          src="${this.src}"
+          id="dom-html-video_${this.randomNum}"
+          class="dom-html-video"
+          ${this.autoplay ? 'autoplay' : ''}
+          ${this.loop ? 'loop' : ''}
+          ${this.controls ? 'controls' : ''}
+          ${this.muted ? 'muted' : ''}
+          ${this.poster ? 'poster="' + this.poster + '"' : ''}
+          preload="auto"
+          playsinline
+          webkit-playsinline
+          width="100%"
+          height="100%"
+          style="object-fit: ${this.objectFit};padding:0;"
+        >
+          <source src="${this.src}" type="video/mp4">
+          <source src="${this.src}" type="video/ogg">
+          <source src="${this.src}" type="video/webm">
+        </video>
+      `;
+        // console.log('视频html =>', this.videoHtml)
+      },
+      resetEventDrive() {
+        this.eventDrive = null;
+      },
+      // 将service层的事件/数据 => 传递给renderjs层
+      play() {
+        this.eventDrive = 'play';
+      },
+      pause() {
+        this.eventDrive = 'pause';
+      },
+      stop() {
+        this.eventDrive = 'stop';
+      },
+    },
+  };
+</script>
+
+<script module="domVideo" lang="renderjs">
+  export default {
+    data() {
+      return {
+        video: null,
+        num: '',
+        options: {}
+      }
+    },
+    mounted() {
+      this.initVideoEvent()
+    },
+    methods: {
+      initVideoEvent() {
+        setTimeout(() => {
+          let video = document.getElementById(`dom-html-video_${this.num}`)
+          this.video = video
+
+          // 监听视频事件
+          video.addEventListener('play', () => {
+            this.$ownerInstance.callMethod('videoEvent', 'play')
+          })
+          video.addEventListener('pause', () => {
+            this.$ownerInstance.callMethod('videoEvent', 'pause')
+          })
+          video.addEventListener('ended', () => {
+            this.$ownerInstance.callMethod('videoEvent', 'ended')
+            this.$ownerInstance.callMethod('resetEventDrive')
+          })
+        }, 100)
+      },
+      eventHandle(eventType) {
+        if (eventType) {
+          this.video = document.getElementById(`dom-html-video_${this.num}`)
+
+          if (eventType === 'play') {
+            this.video.play()
+          } else if (eventType === 'pause') {
+            this.video.pause()
+          } else if (eventType === 'stop') {
+            this.video.stop()
+          }
+        }
+      },
+      srcChange(val) {
+        // 实现视频的第一帧作为封面，避免视频展示黑屏
+        this.initVideoEvent()
+        setTimeout(() => {
+          let video = document.getElementById(`dom-html-video_${this.num}`)
+
+          video.addEventListener('loadedmetadata', () => {
+            let { autoplay } = this.options
+            video.play()
+            if (!autoplay) {
+              video.pause()
+            }
+          })
+        }, 0)
+      },
+      propsChange(obj) {
+        this.options = obj
+      },
+      randomNumChange(val) {
+        this.num = val
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .dom-video {
+    overflow: hidden;
+    height: 100%;
+    padding: 0;
+    &-height {
+      height: 100%;
+    }
+  }
+</style>
diff --git a/src/sheep/ui/su-video/su-video.vue b/src/sheep/ui/su-video/su-video.vue
index a75a79c9..f52965fb 100644
--- a/src/sheep/ui/su-video/su-video.vue
+++ b/src/sheep/ui/su-video/su-video.vue
@@ -1,5 +1,6 @@
 <template>
   <view class="ui-video-wrap">
+    <!-- #ifndef APP-PLUS -->
     <video
       :id="`sVideo${uid}`"
       class="radius"
@@ -18,12 +19,40 @@
       @pause="pause"
       @ended="end"
       :poster="poster"
-      :autoplay="autoplay"
     >
-      <!-- #ifdef APP-PLUS -->
-      <cover-view :style="{ transform: 'translateX(' + moveX + 'px)' }" />
-      <!-- #endif -->
     </video>
+    <!-- #endif -->
+    <!-- #ifdef APP-PLUS -->
+    <dom-video
+      ref="domVideo"
+      :id="`sVideo${uid}`"
+      class="radius"
+      :style="[{ height: height + 'rpx' }]"
+      object-fit="contain"
+      :controls="true"
+      :show-progress="false"
+      :show-fullscreen-btn="false"
+      :show-play-btn="false"
+      :show-bottom-progress="false"
+      :autoplay="false"
+      :src="src"
+      @play="play"
+      @pause="pause"
+      @ended="end"
+      :poster="poster"
+    />
+    <!-- #endif -->
+    <!-- <view
+      v-show="!state.isplay"
+      class="poster-wrap radius"
+      :style="{ height: height + 'px' }"
+      @click="beforePlay"
+    >
+      <image class="poster-image" mode="aspectFill" :src="poster" v-if="poster" />
+      <view class="play-icon ss-flex ss-row-center ss-col-center">
+        <text class="cicon-play-arrow ss-font-40"></text>
+      </view>
+    </view> -->
   </view>
 </template>
 <script setup>
@@ -43,6 +72,7 @@
    */
 
   import { reactive, nextTick, getCurrentInstance } from 'vue';
+  import DomVideo from './components/dom-video.vue';
   import sheep from '@/sheep';
   const vm = getCurrentInstance();
 
@@ -81,7 +111,7 @@
     // 指定视频初始播放位置，单位为秒（s）
     initialTime: {
       type: Number,
-      default: 1,
+      default: 0,
     },
     src: {
       type: String,
@@ -91,10 +121,6 @@
       type: String,
       default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
     },
-    autoplay: {
-      type: Boolean,
-      default: false,
-    }
   });
 
   // 事件
@@ -137,6 +163,7 @@
   const beforePlay = () => {
     uni.getNetworkType({
       success: (res) => {
+        console.log(res.networkType, 'res.networkType');
         const networkType = res.networkType;
         // if (networkType === 'wifi' || networkType === 'ethernet') {
         //   startPlay();
@@ -169,6 +196,7 @@
   .radius {
     width: 100%;
   }
+
   .ui-video-wrap {
     display: flex;
     align-items: center;
diff --git a/src/sheep/url/index.js b/src/sheep/url/index.js
index d216f83f..a7b82e4f 100644
--- a/src/sheep/url/index.js
+++ b/src/sheep/url/index.js
@@ -71,7 +71,8 @@ function append_thumbnail_params(url, params) {
       if (!gravity && gravity != 'center') {
         // 指定了裁剪区域
         mode = 'mfit';
-        crop_str = '/crop,g_' + gravityFormatMap('aliyun', gravity) + ',w_' + width + ',h_' + height;
+        crop_str =
+          '/crop,g_' + gravityFormatter('aliyun', gravity) + ',w_' + width + ',h_' + height;
       }
 
       // 质量压缩
@@ -91,7 +92,7 @@ function append_thumbnail_params(url, params) {
         // 指定了裁剪区域
         mode_str = 'crop';
         mode = 'fill';
-        crop_str = '/gravity/' + gravityFormatMap('qcloud', gravity);
+        crop_str = '/gravity/' + gravityFormatter('qcloud', gravity);
       }
 
       // 质量压缩
@@ -121,7 +122,7 @@ function append_thumbnail_params(url, params) {
       if (mode == 'fill' || (!gravity && gravity != 'center')) {
         // 指定了裁剪区域,全部转为 mfit
         mode = 'mfit';
-        crop_str = '/gravity/' + gravityFormatMap('qiniu', gravity) + '/crop/' + size;
+        crop_str = '/gravity/' + gravityFormatter('qiniu', gravity) + '/crop/' + size;
       }
       // 质量压缩
       if (quality > 0 && quality < 100) {
@@ -158,8 +159,8 @@ function append_thumbnail_params(url, params) {
  *
  * @return string
  */
-function gravityFormatMap(type, gravity) {
-  let gravityFormat = {
+function gravityFormatter(type, gravity) {
+  let gravityFormatMap = {
     aliyun: {
       north_west: 'nw', // 左上
       north: 'north', // 中上
@@ -195,5 +196,5 @@ function gravityFormatMap(type, gravity) {
     },
   };
 
-  return gravityFormat[type][gravity];
+  return gravityFormatMap[type][gravity];
 }
diff --git a/src/uni.scss b/src/uni.scss
index f7e0a709..89c83dfb 100644
--- a/src/uni.scss
+++ b/src/uni.scss
@@ -5,7 +5,7 @@
  * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
  *
  */
-
+@import '@/sheep/scss/_var.scss';
 /**
  * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
  *
@@ -21,27 +21,27 @@ $uni-color-warning: #f0ad4e;
 $uni-color-error: #dd524d;
 
 /* 文字基本颜色 */
-$uni-text-color: #333; // 基本色
-$uni-text-color-inverse: #fff; // 反色
-$uni-text-color-grey: #999; // 辅助灰色，如加载更多的提示信息
+$uni-text-color: #333; //基本色
+$uni-text-color-inverse: #fff; //反色
+$uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息
 $uni-text-color-placeholder: #808080;
 $uni-text-color-disable: #c0c0c0;
 
 /* 背景颜色 */
-$uni-bg-color: #222222;
+$uni-bg-color: #ffffff;
 $uni-bg-color-grey: #f8f8f8;
-$uni-bg-color-hover: #f1f1f1; // 点击状态颜色
-$uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色
+$uni-bg-color-hover: #f1f1f1; //点击状态颜色
+$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色
 
 /* 边框颜色 */
-$uni-border-color: #c8c7cc;
+$uni-border-color: #e5e5e5;
 
 /* 尺寸变量 */
 
 /* 文字尺寸 */
 $uni-font-size-sm: 12px;
 $uni-font-size-base: 14px;
-$uni-font-size-lg: 16px;
+$uni-font-size-lg: 16;
 
 /* 图片尺寸 */
 $uni-img-size-sm: 20px;
@@ -70,7 +70,7 @@ $uni-opacity-disabled: 0.3; // 组件禁用态的透明度
 /* 文章场景相关 */
 $uni-color-title: #2c405a; // 文章标题颜色
 $uni-font-size-title: 20px;
-$uni-color-subtitle: #555; // 二级标题颜色
-$uni-font-size-subtitle: 18px;
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-font-size-subtitle: 26px;
 $uni-color-paragraph: #3f536e; // 文章段落颜色
 $uni-font-size-paragraph: 15px;
diff --git a/src/uni_modules/lime-painter/changelog.md b/src/uni_modules/lime-painter/changelog.md
new file mode 100644
index 00000000..588fa02e
--- /dev/null
+++ b/src/uni_modules/lime-painter/changelog.md
@@ -0,0 +1,225 @@
+## 1.9.6.6（2024-09-25）
+- fix: 修复background-position无效的问题
+## 1.9.6.5（2024-04-14）
+- fix: 修复`nvue`无法生图的问题
+## 1.9.6.4（2024-03-10）
+- fix: 修复代理ctx导致H5不能使用ctx.save
+## 1.9.6.3（2024-03-08）
+- fix: 修复支付宝真机无法使用的问题
+## 1.9.6.2（2024-02-22）
+- fix: 修复使用render函数报错的问题
+## 1.9.6.1（2023-12-22）
+- fix: 修复字节小程序非2d字体偏移
+- fix: 修复`canvasToTempFilePathSync`会触发两次的问题
+- fix: 修复`parser`图片没有宽度的问题
+## 1.9.6（2023-12-06）
+- fix: 修复背景图受padding影响
+- fix: 修复因字节报错改了代理实现导致微信报错
+- 1.9.5.8（2023-11-16）
+- fix: 修复margin问题
+- fix: 修复borderWidth问题
+- fix: 修复textBox问题
+- fix: 修复字节开发工具报`could not be cloned.`问题
+## 1.9.5.7（2023-07-27）
+- fix: 去掉多余的方法
+- chore: 更新文档，增加自定义字体说明
+## 1.9.5.6（2023-07-21）
+- feat: 有限的支持富文本
+- feat: H5和APP 增加 `hidpi` prop，主要用于大尺寸无法生成图片时用
+- fix: 修复 钉钉小程序 缺少 `measureText` 方法
+- chore: 由于微信小程序 pc 端的 canvas 2d 时不时抽风，故不使用canvas 2d
+## 1.9.5.5（2023-06-27）
+- fix: 修复把`emoji`表情字符拆分成多个字符的情况
+## 1.9.5.4（2023-06-05）
+- fix: 修复因`canvasToTempFilePathSync`监听导致重复调用
+## 1.9.5.3（2023-05-23）
+- fix: 因isPc错写成了isPC导致小程序PC不能生成图片
+## 1.9.5.2（2023-05-22）
+- feat: 删除多余文件
+## 1.9.5.1（2023-05-22）
+- fix: 修复 文字行数与`line-clamp`相同但不满一行时也加了省略号的问题
+## 1.9.5（2023-05-14）
+- feat: 增加 `text-indent` 和 `calc` 方法
+- feat: 优化 布局时间
+## 1.9.4.4（2023-04-15）
+- fix: 修复无法匹配负值
+- fix: 修复 Nvue IOS getImageInfo `useCORS` 为 undefined
+## 1.9.4.3（2023-04-01）
+- feat: 增加支持文字描边 `text-stroke: '5rpx #fff'`
+## 1.9.4.2（2023-03-30）
+- fix: 修复 支付宝小程序 isPC 在手机也为true的问题
+- feat: 由 微信开发工具 3060 版 无法获取图片尺寸，现 微信开发工具 3220 版 修复该问题，故还原上一版的获取图片方式。
+## 1.9.4.1（2023-03-28）
+- fix: 修复固定高度不正确问题
+## 1.9.4（2023-03-17）
+- fix: nvue ios getImageInfo缺少this报错
+- fix: pathType 非2d无效问题
+- fix: 修复 小米9se 可能会存在多次init 导致画面多次放大
+- fix: 修复 border 分开写 width style无效问题
+- fix: 修复 支付宝小程序IOS 再次进入不渲染的问题
+- fix: 修复 支付宝小程序安卓Zindex排序错乱问题
+- fix: 修复 微信开发工具 3060 版 无法获取图片的问题
+- feat: 把 for in 改为 forEach
+- feat: 增加 hidden
+- feat: 根节点 box-sizing 默认 `border-box`
+- feat: 增加支持 `vw` `wh`
+- chore: pathType 取消 默认值，因为字节开发工具不能显示
+- chore: 支付宝小程序开发工具不支持 生成图片 请以真机调试为准
+- bug: 企业微信 2.20.3无法使用
+## 1.9.3.5（2022-06-29）
+- feat: justifyContent 增加 `space-around`、`space-between`
+- feat: canvas 2d 也使用`getImageInfo`
+- fix: 修复 `text`的 `text-decoration`错位
+## 1.9.3.4（2022-06-20）
+- fix: 修复 因创建节点速度问题导致顺序出错。 
+- fix: 修复 微信小程序 PC 无法显示本地图片 
+- fix: 修复 flex-box 对齐问题 
+- feat: 增加 `text-shadow`
+- feat: 重写 `text` 对齐方式
+- chore: 更新文档
+## 1.9.3.3（2022-06-17）
+- fix: 修复 支付宝小程序 canvas 2d 存在ctx.draw问题导致报错
+- fix: 修复 支付宝小程序 toDataURL 存在权限问题改用 `toTempFilePath`
+- fix: 修复 支付宝小程序 image size 问题导致 `objectFit` 无效
+## 1.9.3.2（2022-06-14）
+- fix: 修复 image 设置背景色不生效问题
+- fix: 修复 nvue 环境判断缺少参数问题
+## 1.9.3.1（2022-06-14）
+- fix: 修复 bottom 定位不对问题
+- fix: 修复 因小数导致计算出错换行问题
+- feat: 增加 `useCORS` h5端图片跨域 在设置请求头无效果后试一下设置这个值
+- chore: 更新文档
+## 1.9.3（2022-06-13）
+- feat: 增加 `zIndex`
+- feat: 增加 `flex-box` 该功能处于原始阶段，非常简陋。
+- tips: QQ小程序 vue3 不支持, 为 uni 官方BUG
+## 1.9.2.9（2022-06-10）
+- fix: 修复`text-align`及`margin`居中问题
+## 1.9.2.8（2022-06-10）
+- fix: 修复 Nvue `canvasToTempFilePathSync` 不生效问题
+## 1.9.2.7（2022-06-10）
+- fix: 修复 margin及padding的bug
+- fix: 修复 Nvue `isCanvasToTempFilePath` 不生效问题
+## 1.9.2.6（2022-06-09）
+- fix: 修复 Nvue 不显示
+- feat: 增加支持字体渐变
+```html
+<l-painter-text 
+	text="水调歌头\n明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。"
+	css="background: linear-gradient(,#ff971b 0%, #1989fa 100%); background-clip: text" />
+```
+## 1.9.2.5（2022-06-09）
+- chore: 更变获取父级宽度的设定
+- chore: `pathType` 在canvas 2d 默认为 `url`
+## 1.9.2.4（2022-06-08）
+- fix: 修复 `pathType` 不生效问题
+## 1.9.2.3（2022-06-08）
+- fix: 修复 `canvasToTempFilePath` 漏写 `success` 参数
+## 1.9.2.2（2022-06-07）
+- chore: 更新文档
+## 1.9.2.1（2022-06-07）
+- fix: 修复 vue3 赋值给this再传入导致image无法绘制
+- fix: 修复 `canvasToTempFilePathSync` 时机问题
+- feat: canvas 2d 更改图片生成方式 `toDataURL` 
+## 1.9.2（2022-05-30）
+- fix: 修复 `canvasToTempFilePathSync` 在 vue3 下只生成一次
+## 1.9.1.7（2022-05-28）
+- fix: 修复 `qrcode`显示不全问题
+## 1.9.1.6（2022-05-28）
+- fix: 修复 `canvasToTempFilePathSync` 会重复多次问题
+- fix: 修复 `view` css `backgroundImage` 图片下载失败导致 子节点不渲染
+## 1.9.1.5（2022-05-27）
+- fix: 修正支付宝小程序 canvas 2d版本号 2.7.15
+## 1.9.1.4（2022-05-22）
+- fix: 修复字节小程序无法使用xml方式
+- fix: 修复字节小程序无法使用base64(非2D情况下工具上无法显示)
+- fix: 修复支付宝小程序 `canvasToTempFilePath` 报错
+## 1.9.1.3（2022-04-29）
+- fix: 修复vue3打包后uni对象为空后的报错
+## 1.9.1.2（2022-04-25）
+- fix: 删除多余文件
+## 1.9.1.1（2022-04-25）
+- fix: 修复图片不显示问题
+## 1.9.1（2022-04-12）
+- fix: 因四舍五入导致有些机型错位
+- fix: 修复无views报错 
+- chore: nvue下因ios无法读取插件内static文件，改由下载方式
+## 1.9.0（2022-03-20）
+- fix: 因无法固定尺寸导致生成图片不全
+- fix: 特定情况下text判断无效
+- chore: 本地化APP Nvue webview
+## 1.8.9（2022-02-20）
+- fix: 修复 小程序下载最多10次并发的问题
+- fix: 修复 APP端无法获取本地图片
+- fix: 修复 APP Nvue端不执行问题
+- chore: 增加图片缓存机制
+## 1.8.8.8（2022-01-27）
+- fix: 修复 主动调用尺寸问题
+## 1.8.8.6（2022-01-26）
+- fix: 修复 nvue 下无宽度时获取父级宽度 
+- fix: 修复 ios app 无法渲染问题
+## 1.8.8（2022-01-23）
+- fix: 修复 主动调用时无节点问题
+- fix: 修复 `box-shadow` 颜色问题
+- fix: 修复 `transform:rotate` 角度位置问题
+- feat: 增加 `overflow:hidden`
+## 1.8.7（2022-01-07）
+- fix: 修复 image 方向为 `right` 时原始宽高问题
+- feat: 支持 view 设置背景图 `background-image: url(xxx)`
+- chore: 去掉可选链
+## 1.8.6（2021-11-28）
+- feat: 支持`view`对`inline-block`的子集使用`text-align`
+## 1.8.5.5（2021-08-17）
+- chore: 更新文档，删除 replace
+- fix: 修复 text 值为 number时报错
+## 1.8.5.4（2021-08-16）
+- fix: 字节小程序兼容
+## 1.8.5.3（2021-08-15）
+- fix: 修复线性渐变与css现实效果不一致的问题
+- chore: 更新文档
+## 1.8.5.2（2021-08-13）
+- chore: 增加`background-image`、`background-repeat` 能力，主要用于背景纹理的绘制，并不是代替`image`。例如：大面积的重复平铺的水印
+- 注意：这个功能H5暂时无法使用，因为[官方的API有BUG](https://ask.dcloud.net.cn/question/128793)，待官方修复！！！
+## 1.8.5.1（2021-08-10）
+- fix: 修复因`margin`报错问题
+## 1.8.5（2021-08-09）
+- chore: 增加margin支持`auto`,以达到居中效果
+## 1.8.4（2021-08-06）
+- chore: 增加判断缓存文件条件
+- fix: 修复css 多余空格报错问题
+## 1.8.3（2021-08-04）
+- tips: 1.6.x 以下的版本升级到1.8.x后要为每个元素都加上定位：position: 'absolute'
+- fix: 修复只有一个view子元素时不计算高度的问题
+## 1.8.2（2021-08-03）
+- fix: 修复 path-type 为 `url` 无效问题
+- fix: 修复 qrcode `text` 为空时报错问题
+- fix: 修复 image `src` 动态设置时不生效问题
+- feat: 增加 css 属性 `min-width` `max-width`
+## 1.8.1（2021-08-02）
+- fix: 修复无法加载本地图片
+## 1.8.0（2021-08-02）
+- chore 文档更新
+- 使用旧版的同学不要升级！
+## 1.8.0-beta（2021-07-30）
+- ## 全新布局方式 不兼容旧版！
+- chore: 布局方式变更
+- tips: 微信canvas 2d 不支持真机调试
+## 1.6.6（2021-07-09）
+- chore: 统一命名规范，无须主动引入组件
+## 1.6.5（2021-06-08）
+- chore: 去掉console
+## 1.6.4（2021-06-07）
+- fix: 修复 数字 为纯字符串时不转换的BUG
+## 1.6.3（2021-06-06）
+- fix: 修复 PC 端放大的BUG
+## 1.6.2（2021-05-31）
+- fix: 修复 报`adaptor is not a function`错误
+- fix: 修复 text 多行高度
+- fix: 优化 默认文字的基准线
+- feat: `@progress`事件，监听绘制进度
+## 1.6.1（2021-02-28）
+- 删除多余节点
+## 1.6.0（2021-02-26）
+- 调整为uni_modules目录规范
+- 修复：transform的rotate不能为负数问题
+- 新增：`pathType` 指定生成图片返回的路径类型,可选值有 `base64`、`url`
diff --git a/src/uni_modules/lime-painter/components/common/relation.js b/src/uni_modules/lime-painter/components/common/relation.js
new file mode 100644
index 00000000..6ed37e81
--- /dev/null
+++ b/src/uni_modules/lime-painter/components/common/relation.js
@@ -0,0 +1,150 @@
+const styles = (v ='') =>  v.split(';').filter(v => v && !/^[\n\s]+$/.test(v)).map(v => {
+						const key = v.slice(0, v.indexOf(':'))
+						const value = v.slice(v.indexOf(':')+1)
+						return {
+							[key
+								.replace(/-([a-z])/g, function() { return arguments[1].toUpperCase()})
+								.replace(/\s+/g, '')
+							]: value.replace(/^\s+/, '').replace(/\s+$/, '') || ''
+						}
+					})
+export function parent(parent) {
+	return {
+		provide() {
+			return {
+				[parent]: this
+			}
+		},
+		data() {
+			return {
+				el: {
+					id: null,
+					css: {},
+					views: []
+				},
+			}
+		},
+		watch: {
+			css: { 
+				handler(v) {
+					if(this.canvasId) {
+						this.el.css = (typeof v == 'object' ? v : v && Object.assign(...styles(v))) || {}
+						this.canvasWidth = this.el.css && this.el.css.width || this.canvasWidth
+						this.canvasHeight = this.el.css && this.el.css.height || this.canvasHeight
+					}
+				},
+				immediate: true
+			}
+		}
+	}
+}
+export function children(parent, options = {}) {
+	const indexKey = options.indexKey || 'index'
+	return {
+		inject: {
+			[parent]: {
+				default: null
+			}
+		},
+		watch: {
+			el: {
+				handler(v, o) {
+					if(JSON.stringify(v) != JSON.stringify(o))
+						this.bindRelation()
+				},
+				deep: true,
+				immediate: true
+			},
+			src: {
+				handler(v, o) {
+					if(v != o)
+						this.bindRelation()
+				},
+				immediate: true
+			},
+			text: {
+				handler(v, o) {
+					if(v != o) this.bindRelation()
+				},
+				immediate: true
+			},
+			css: {
+				handler(v, o) {
+					if(v != o)
+						this.el.css = (typeof v == 'object' ? v : v && Object.assign(...styles(v))) || {}
+				},
+				immediate: true
+			},
+			replace: {
+				handler(v, o) {
+					if(JSON.stringify(v) != JSON.stringify(o))
+						this.bindRelation()
+				},
+				deep: true,
+				immediate: true
+			}
+		},
+		created() {
+			if(!this._uid) {
+				this._uid = this._.uid
+			}
+			Object.defineProperty(this, 'parent', {
+				get: () => this[parent] || [],
+			})
+			Object.defineProperty(this, 'index', {
+				get: () =>  {
+					this.bindRelation();
+					const {parent: {el: {views=[]}={}}={}} = this
+					return views.indexOf(this.el)
+				},
+			});
+			this.el.type = this.type
+			if(this.uid) {
+				this.el.uid = this.uid
+			}
+			this.bindRelation()
+		},
+		// #ifdef VUE3
+		beforeUnmount() {
+			this.removeEl()
+		},
+		// #endif
+		// #ifdef VUE2
+		beforeDestroy() {
+			this.removeEl()
+		},
+		// #endif
+		methods: {
+			removeEl() {
+				if (this.parent) {
+					this.parent.el.views = this.parent.el.views.filter(
+						(item) => item._uid !== this._uid
+					);
+				}
+			},
+			bindRelation() {
+				if(!this.el._uid) {
+					this.el._uid = this._uid 
+				}
+				if(['text','qrcode'].includes(this.type)) {
+					this.el.text = this.$slots && this.$slots.default && this.$slots.default[0].text || `${this.text || ''}`.replace(/\\n/g, '\n')
+				}
+				if(this.type == 'image') {
+					this.el.src = this.src
+				}
+				if (!this.parent) {
+					return;
+				}
+				let views = this.parent.el.views || [];
+				if(views.indexOf(this.el) !== -1) {
+					this.parent.el.views = views.map(v => v._uid == this._uid ? this.el : v)
+				} else {
+					this.parent.el.views = [...views, this.el];
+				}
+			}
+		},
+		mounted() {
+			// this.bindRelation()
+		},
+	}
+}
\ No newline at end of file
diff --git a/src/uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue b/src/uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue
new file mode 100644
index 00000000..e24e3aa1
--- /dev/null
+++ b/src/uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue
@@ -0,0 +1,28 @@
+<template>
+	
+</template>
+
+<script>
+	import {parent, children} from '../common/relation';
+	export default {
+		name: 'lime-painter-image',
+		mixins:[children('painter')],
+		props: {
+			id: String,
+			css: [String, Object],
+			src: String
+		},
+		data() {
+			return {
+				type: 'image',
+				el: {
+					css: {},
+					src: null
+				},
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue b/src/uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue
new file mode 100644
index 00000000..a73e5ed3
--- /dev/null
+++ b/src/uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue
@@ -0,0 +1,27 @@
+<template>
+</template>
+
+<script>
+	import {parent, children} from '../common/relation';
+	export default {
+		name: 'lime-painter-qrcode',
+		mixins:[children('painter')],
+		props: {
+			id: String,
+			css: [String, Object],
+			text: String
+		},
+		data() {
+			return {
+				type: 'qrcode',
+				el: {
+					css: {},
+					text: null
+				},
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue b/src/uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue
new file mode 100644
index 00000000..b332b027
--- /dev/null
+++ b/src/uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue
@@ -0,0 +1,33 @@
+<template>
+	<text style="opacity: 0;height: 0;"><slot/></text>
+</template>
+
+<script>
+	import {parent, children} from '../common/relation';
+	export default {
+		name: 'lime-painter-text',
+		mixins:[children('painter')],
+		props: {
+			type: {
+				type: String,
+				default: 'text'
+			},
+			uid: String,
+			css: [String, Object],
+			text: [String, Number],
+			replace: Object,
+		},
+		data() {
+			return {
+				// type: 'text',
+				el: {
+					css: {},
+					text: null
+				},
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue b/src/uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue
new file mode 100644
index 00000000..94596e57
--- /dev/null
+++ b/src/uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue
@@ -0,0 +1,34 @@
+<template>
+	<view><slot/></view>
+</template>
+
+<script>
+	import {parent, children} from '../common/relation';
+	export default {
+		name: 'lime-painter-view',
+		mixins:[children('painter'), parent('painter')],
+		props: {
+			id: String,
+			type: {
+				type: String,
+				default: 'view'
+			},
+			css: [String, Object],
+		},
+		data() {
+			return {
+				// type: 'view',
+				el: {
+					css: {},
+					views:[]
+				},
+			}
+		},
+		mounted() {
+			
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/uni_modules/lime-painter/components/l-painter/l-painter.vue b/src/uni_modules/lime-painter/components/l-painter/l-painter.vue
new file mode 100644
index 00000000..83926fd8
--- /dev/null
+++ b/src/uni_modules/lime-painter/components/l-painter/l-painter.vue
@@ -0,0 +1,461 @@
+<template>
+	<view class="lime-painter" ref="limepainter">
+		<view v-if="canvasId && size" :style="styles">
+			<!-- #ifndef APP-NVUE -->
+			<canvas class="lime-painter__canvas" v-if="use2dCanvas" :id="canvasId" type="2d" :style="size"></canvas>
+			<canvas class="lime-painter__canvas" v-else :id="canvasId" :canvas-id="canvasId" :style="size"
+				:width="boardWidth * dpr" :height="boardHeight * dpr" :hidpi="hidpi"></canvas>
+
+			<!-- #endif -->
+			<!-- #ifdef APP-NVUE -->
+			<web-view :style="size" ref="webview"
+				src="/uni_modules/lime-painter/hybrid/html/index.html"
+				class="lime-painter__canvas" @pagefinish="onPageFinish" @error="onError" @onPostMessage="onMessage">
+			</web-view>
+			<!-- #endif -->
+		</view>
+		<slot />
+	</view>
+</template>
+
+<script>
+	import { parent } from '../common/relation'
+	import props from './props'
+	import {toPx, base64ToPath, pathToBase64, isBase64, sleep, getImageInfo }from './utils';
+	//  #ifndef APP-NVUE
+	import { canIUseCanvas2d, isPC} from './utils';
+	import Painter from './painter';
+	// import Painter from '@painter'
+	const nvue = {}
+	//  #endif
+	//  #ifdef APP-NVUE
+	import nvue from './nvue'
+	//  #endif
+	export default {
+		name: 'lime-painter',
+		mixins: [props, parent('painter'), nvue],
+		data() {
+			return {
+				use2dCanvas: false,
+				canvasHeight: 150,
+				canvasWidth: null,
+				parentWidth: 0,
+				inited: false,
+				progress: 0,
+				firstRender: 0,
+				done: false,
+				tasks: []
+			};
+		},
+		computed: {
+			styles() {
+				return `${this.size}${this.customStyle||''};` + (this.hidden && 'position: fixed; left: 1500rpx;')
+			},
+			canvasId() {
+				return `l-painter${this._ && this._.uid || this._uid}`
+			},
+			size() {
+				if (this.boardWidth && this.boardHeight) {
+					return `width:${this.boardWidth}px; height: ${this.boardHeight}px;`;
+				}
+			},
+			dpr() {
+				return this.pixelRatio || uni.getSystemInfoSync().pixelRatio;
+			},
+			boardWidth() {
+				const {width = 0} = (this.elements && this.elements.css) || this.elements || this
+				const w = toPx(width||this.width)
+				return w || Math.max(w, toPx(this.canvasWidth));
+			},
+			boardHeight() {
+				const {height = 0} = (this.elements && this.elements.css) || this.elements || this
+				const h = toPx(height||this.height)
+				return h || Math.max(h, toPx(this.canvasHeight));
+			},
+			hasBoard() {
+				return this.board && Object.keys(this.board).length
+			},
+			elements() {
+				return this.hasBoard ? this.board : JSON.parse(JSON.stringify(this.el))
+			}
+		},
+		created() {
+			this.use2dCanvas = this.type === '2d' && canIUseCanvas2d() && !isPC
+		},
+		async mounted() {
+			await sleep(30)
+			await this.getParentWeith()
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this.$watch('elements', this.watchRender, {
+						deep: true,
+						immediate: true
+					});
+				}, 30)
+			})
+		},
+		// #ifdef VUE3
+		unmounted() {
+			this.done = false
+			this.inited = false
+			this.firstRender = 0
+			this.progress = 0
+			this.painter = null
+			clearTimeout(this.rendertimer)
+		},
+		// #endif
+		// #ifdef VUE2
+		destroyed() {
+			this.done = false
+			this.inited = false
+			this.firstRender = 0
+			this.progress = 0
+			this.painter = null
+			clearTimeout(this.rendertimer)
+		},
+		// #endif
+		methods: {
+			async watchRender(val, old) {
+				if (!val || !val.views || (!this.firstRender ? !val.views.length : !this.firstRender) || !Object.keys(val).length || JSON.stringify(val) == JSON.stringify(old)) return;
+				this.firstRender = 1
+				this.progress = 0
+				this.done = false
+				clearTimeout(this.rendertimer)
+				this.rendertimer = setTimeout(() => {
+					this.render(val);
+				}, this.beforeDelay)
+			},
+			async setFilePath(path, param) {
+				let filePath = path
+				const {pathType = this.pathType} =  param || this
+				if (pathType == 'base64' && !isBase64(path)) {
+					filePath = await pathToBase64(path)
+				} else if (pathType == 'url' && isBase64(path)) {
+					filePath = await base64ToPath(path)
+				}
+				if (param && param.isEmit) {
+					this.$emit('success', filePath);
+				}
+				return filePath
+			},
+			async getSize(args) {
+				const {width} = args.css || args
+				const {height} = args.css || args
+				if (!this.size) {
+					if (width || height) {
+						this.canvasWidth = width || this.canvasWidth
+						this.canvasHeight = height || this.canvasHeight
+						await sleep(30);
+					} else {
+						await this.getParentWeith()
+					}
+				}
+			},
+			canvasToTempFilePathSync(args) {
+				// this.stopWatch && this.stopWatch()
+				// this.stopWatch = this.$watch('done', (v) => {
+				// 	if (v) {
+				// 		this.canvasToTempFilePath(args)
+				// 		this.stopWatch && this.stopWatch()
+				// 	}
+				// }, {
+				// 	immediate: true
+				// })
+				this.tasks.push(args)
+				if(this.done){
+					this.runTask()
+				}
+			},
+			runTask(){
+				while(this.tasks.length){
+					const task = this.tasks.shift()	
+					 this.canvasToTempFilePath(task)
+				}
+			},
+			// #ifndef APP-NVUE
+			getParentWeith() {
+				return new Promise(resolve => {
+					uni.createSelectorQuery()
+						.in(this)
+						.select(`.lime-painter`)
+						.boundingClientRect()
+						.exec(res => {
+							const {width, height} = res[0]||{}
+							this.parentWidth = Math.ceil(width||0)
+							this.canvasWidth = this.parentWidth || 300
+							this.canvasHeight = height || this.canvasHeight||150
+							resolve(res[0])
+						})
+				})
+			},
+			async render(args = {}) {
+				if(!Object.keys(args).length) {
+					return console.error('空对象')
+				}
+				this.progress = 0
+				this.done = false
+				// #ifdef APP-NVUE
+				this.tempFilePath.length = 0
+				// #endif
+				await this.getSize(args)
+				const ctx = await this.getContext();
+				
+				let {
+					use2dCanvas,
+					boardWidth,
+					boardHeight,
+					canvas,
+					afterDelay
+				} = this;
+				if (use2dCanvas && !canvas) {
+					return Promise.reject(new Error('canvas 没创建'));
+				}
+				this.boundary = {
+					top: 0,
+					left: 0,
+					width: boardWidth,
+					height: boardHeight
+				};
+				this.painter = null
+				if (!this.painter) {
+					const {width} = args.css || args
+					const {height} = args.css || args
+					if(!width && this.parentWidth) {
+						Object.assign(args, {width: this.parentWidth})
+					}
+					const param = {
+						context: ctx,
+						canvas,
+						width: boardWidth,
+						height: boardHeight,
+						pixelRatio: this.dpr,
+						useCORS: this.useCORS,
+						createImage: getImageInfo.bind(this),
+						performance: this.performance,
+						listen: {
+							onProgress: (v) => {
+								this.progress = v
+								this.$emit('progress', v)
+							},
+							onEffectFail: (err) => {
+								this.$emit('faill', err)
+							}
+						}
+					}
+					this.painter = new Painter(param)
+				} 
+				try{
+					// vue3 赋值给data会引起图片无法绘制
+					const { width, height } = await this.painter.source(JSON.parse(JSON.stringify(args)))
+					this.boundary.height = this.canvasHeight = height
+					this.boundary.width = this.canvasWidth = width
+					await sleep(this.sleep);
+					await this.painter.render()
+					await new Promise(resolve => this.$nextTick(resolve));
+					if (!use2dCanvas) {
+						await this.canvasDraw();
+					}
+					if (afterDelay && use2dCanvas) {
+						await sleep(afterDelay);
+					}
+					this.$emit('done');
+					this.done = true
+					if (this.isCanvasToTempFilePath) {
+						this.canvasToTempFilePath()
+							.then(res => {
+								this.$emit('success', res.tempFilePath)
+							})
+							.catch(err => {
+								this.$emit('fail', new Error(JSON.stringify(err)));
+							});
+					}
+					this.runTask()
+					return Promise.resolve({
+						ctx,
+						draw: this.painter,
+						node: this.node
+					});
+				}catch(e){
+					//TODO handle the exception
+				}
+				
+			},
+			canvasDraw(flag = false) {
+				return new Promise((resolve, reject) => this.ctx.draw(flag, () => setTimeout(() => resolve(), this
+					.afterDelay)));
+			},
+			async getContext() {
+				if (!this.canvasWidth) {
+					this.$emit('fail', 'painter no size')
+					console.error('[lime-painter]: 给画板或父级设置尺寸')
+					return Promise.reject();
+				}
+				if (this.ctx && this.inited) {
+					return Promise.resolve(this.ctx);
+				}
+				const { type, use2dCanvas, dpr, boardWidth, boardHeight } = this;
+				const _getContext = () => {
+					return new Promise(resolve => {
+						uni.createSelectorQuery()
+							.in(this)
+							.select(`#${this.canvasId}`)
+							.boundingClientRect()
+							.exec(res => {
+								if (res) {
+									const ctx = uni.createCanvasContext(this.canvasId, this);
+									if (!this.inited) {
+										this.inited = true;
+										this.use2dCanvas = false;
+										this.canvas = res;
+									}
+									
+									// 钉钉小程序框架不支持 measureText 方法，用此方法 mock
+									if (!ctx.measureText) {
+										function strLen(str) {
+											let len = 0;
+											for (let i = 0; i < str.length; i++) {
+												if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
+													len++;
+												} else {
+													len += 2;
+												}
+											}
+											return len;
+										}
+										ctx.measureText = text => {
+											let fontSize = ctx.state && ctx.state.fontSize || 12;
+											const font = ctx.__font
+											if (font && fontSize == 12) {
+												fontSize = parseInt(font.split(' ')[3], 10);
+											}
+											fontSize /= 2;
+											return {
+												width: strLen(text) * fontSize
+											};
+										}
+									}
+									
+									// #ifdef MP-ALIPAY
+									ctx.scale(dpr, dpr);
+									// #endif
+									this.ctx = ctx
+									resolve(this.ctx);
+								} else {
+									console.error('[lime-painter] no node')
+								}
+							});
+					});
+				};
+				if (!use2dCanvas) {
+					return _getContext();
+				}
+				return new Promise(resolve => {
+					uni.createSelectorQuery()
+						.in(this)
+						.select(`#${this.canvasId}`)
+						.node()
+						.exec(res => {
+							let {node: canvas} = res && res[0]||{};
+							if(canvas) {
+								const ctx = canvas.getContext(type);
+								if (!this.inited) {
+									this.inited = true;
+									this.use2dCanvas = true;
+									this.canvas = canvas;
+								}
+								this.ctx = ctx
+								resolve(this.ctx);
+							} else {
+								console.error('[lime-painter]: no size')
+							}
+						});
+				});
+			},
+			canvasToTempFilePath(args = {}) {
+				return new Promise(async (resolve, reject) => {
+					const { use2dCanvas, canvasId, dpr, fileType, quality } = this;
+					const success = async (res) => {
+						try {
+							const tempFilePath = await this.setFilePath(res.tempFilePath || res, args)
+							const result = Object.assign(res, {tempFilePath})
+							args.success && args.success(result)
+							resolve(result)
+						} catch (e) {
+							this.$emit('fail', e)
+						}
+					}
+					
+					let { top: y = 0, left: x = 0, width, height } = this.boundary || this;
+					// let destWidth = width * dpr;
+					// let destHeight = height * dpr;
+					// #ifdef MP-ALIPAY
+					// width = destWidth;
+					// height = destHeight;
+					// #endif
+					
+					const copyArgs = Object.assign({
+						// x,
+						// y,
+						// width,
+						// height,
+						// destWidth,
+						// destHeight,
+						canvasId,
+						id: canvasId,
+						fileType,
+						quality,
+					}, args, {success});
+					// if(this.isPC || use2dCanvas) {
+					// 	copyArgs.canvas = this.canvas
+					// }
+					if (use2dCanvas) {
+						copyArgs.canvas = this.canvas
+						try{
+							// #ifndef MP-ALIPAY
+							const oFilePath = this.canvas.toDataURL(`image/${args.fileType||fileType}`.replace(/pg/, 'peg'), args.quality||quality)
+							if(/data:,/.test(oFilePath)) {
+								uni.canvasToTempFilePath(copyArgs, this);
+							} else {
+								const tempFilePath = await this.setFilePath(oFilePath, args)
+								args.success && args.success({tempFilePath})
+								resolve({tempFilePath})
+							}
+							// #endif
+							// #ifdef MP-ALIPAY
+							this.canvas.toTempFilePath(copyArgs)
+							// #endif
+						}catch(e){
+							args.fail && args.fail(e)
+							reject(e)
+						}
+					} else {
+						// #ifdef MP-ALIPAY
+						if(this.ctx.toTempFilePath) {
+							// 钉钉
+							const ctx = uni.createCanvasContext(canvasId);
+							ctx.toTempFilePath(copyArgs);
+						} else {
+							my.canvasToTempFilePath(copyArgs);
+						}
+						// #endif
+						// #ifndef MP-ALIPAY
+						uni.canvasToTempFilePath(copyArgs, this);
+						// #endif
+					}
+				})
+			}
+			// #endif
+		}
+	};
+</script>
+<style>
+	.lime-painter,
+	.lime-painter__canvas {
+		// #ifndef APP-NVUE
+		width: 100%;
+		// #endif
+		// #ifdef APP-NVUE
+		flex: 1;
+		// #endif
+	}
+</style>
diff --git a/src/uni_modules/lime-painter/components/l-painter/nvue.js b/src/uni_modules/lime-painter/components/l-painter/nvue.js
new file mode 100644
index 00000000..25645fba
--- /dev/null
+++ b/src/uni_modules/lime-painter/components/l-painter/nvue.js
@@ -0,0 +1,214 @@
+// #ifdef APP-NVUE
+import {
+	sleep,
+	getImageInfo,
+	isBase64,
+	networkReg
+} from './utils';
+const dom = weex.requireModule('dom')
+import {
+	version
+} from '../../package.json'
+
+export default {
+	data() {
+		return {
+			tempFilePath: [],
+			isInitFile: false,
+			osName: uni.getSystemInfoSync().osName
+		}
+	},
+	methods: {
+		getParentWeith() {
+			return new Promise(resolve => {
+				dom.getComponentRect(this.$refs.limepainter, (res) => {
+					this.parentWidth = Math.ceil(res.size.width)
+					this.canvasWidth = this.canvasWidth || this.parentWidth || 300
+					this.canvasHeight = res.size.height || this.canvasHeight || 150
+					resolve(res.size)
+				})
+			})
+		},
+		onPageFinish() {
+			this.webview = this.$refs.webview
+			this.webview.evalJS(`init(${this.dpr})`)
+		},
+		onMessage(e) {
+			const res = e.detail.data[0] || null;
+			if (res.event) {
+				if (res.event == 'inited') {
+					this.inited = true
+				}
+				if (res.event == 'fail') {
+					this.$emit('fail', res)
+				}
+				if (res.event == 'layoutChange') {
+					const data = typeof res.data == 'string' ? JSON.parse(res.data) : res.data
+					this.canvasWidth = Math.ceil(data.width);
+					this.canvasHeight = Math.ceil(data.height);
+				}
+				if (res.event == 'progressChange') {
+					this.progress = res.data * 1
+				}
+				if (res.event == 'file') {
+					this.tempFilePath.push(res.data)
+					if (this.tempFilePath.length > 7) {
+						this.tempFilePath.shift()
+					}
+					return
+				}
+				if (res.event == 'success') {
+					if (res.data) {
+						this.tempFilePath.push(res.data)
+						if (this.tempFilePath.length > 8) {
+							this.tempFilePath.shift()
+						}
+						if (this.isCanvasToTempFilePath) {
+							this.setFilePath(this.tempFilePath.join(''), {
+								isEmit: true
+							})
+						}
+					} else {
+						this.$emit('fail', 'canvas no data')
+					}
+					return
+				}
+				this.$emit(res.event, JSON.parse(res.data));
+			} else if (res.file) {
+				this.file = res.data;
+			} else {
+				console.info(res[0])
+			}
+		},
+		getWebViewInited() {
+			if (this.inited) return Promise.resolve(this.inited);
+			return new Promise((resolve) => {
+				this.$watch(
+					'inited',
+					async val => {
+						if (val) {
+							resolve(val)
+						}
+					}, {
+						immediate: true
+					}
+				);
+			})
+		},
+		getTempFilePath() {
+			if (this.tempFilePath.length == 8) return Promise.resolve(this.tempFilePath)
+			return new Promise((resolve) => {
+				this.$watch(
+					'tempFilePath',
+					async val => {
+						if (val.length == 8) {
+							resolve(val.join(''))
+						}
+					}, {
+						deep: true
+					}
+				);
+			})
+		},
+		getWebViewDone() {
+			if (this.progress == 1) return Promise.resolve(this.progress);
+			return new Promise((resolve) => {
+				this.$watch(
+					'progress',
+					async val => {
+						if (val == 1) {
+							this.$emit('done')
+							this.done = true
+							this.runTask()
+							resolve(val)
+						}
+					}, {
+						immediate: true
+					}
+				);
+			})
+		},
+		async render(args) {
+			try {
+				await this.getSize(args)
+				const {
+					width
+				} = args.css || args
+				if (!width && this.parentWidth) {
+					Object.assign(args, {
+						width: this.parentWidth
+					})
+				}
+				const newNode = await this.calcImage(args);
+				await this.getWebViewInited()
+				this.webview.evalJS(`source(${JSON.stringify(newNode)})`)
+				await this.getWebViewDone()
+				await sleep(this.afterDelay)
+				if (this.isCanvasToTempFilePath) {
+					const params = {
+						fileType: this.fileType,
+						quality: this.quality
+					}
+					this.webview.evalJS(`save(${JSON.stringify(params)})`)
+				}
+				return Promise.resolve()
+			} catch (e) {
+				this.$emit('fail', e)
+			}
+		},
+		async calcImage(args) {
+			let node = JSON.parse(JSON.stringify(args))
+			const urlReg = /url\((.+)\)/
+			const {
+				backgroundImage
+			} = node.css || {}
+			const isBG = backgroundImage && urlReg.exec(backgroundImage)[1]
+			const url = node.url || node.src || isBG
+			if (['text', 'qrcode'].includes(node.type)) {
+				return node
+			}
+			if ((node.type === "image" || isBG) && url && !isBase64(url) && (this.osName == 'ios' || !networkReg
+					.test(url))) {
+				let {
+					path
+				} = await getImageInfo(url, true)
+				if (isBG) {
+					node.css.backgroundImage = `url(${path})`
+				} else {
+					node.src = path
+				}
+			} else if (node.views && node.views.length) {
+				for (let i = 0; i < node.views.length; i++) {
+					node.views[i] = await this.calcImage(node.views[i])
+				}
+			}
+			return node
+		},
+		async canvasToTempFilePath(args = {}) {
+			if (!this.inited) {
+				return this.$emit('fail', 'no init')
+			}
+			this.tempFilePath = []
+			if (args.fileType == 'jpg') {
+				args.fileType = 'jpeg'
+			}
+
+			this.webview.evalJS(`save(${JSON.stringify(args)})`)
+			try {
+				let tempFilePath = await this.getTempFilePath()
+
+				tempFilePath = await this.setFilePath(tempFilePath, args)
+				args.success({
+					errMsg: "canvasToTempFilePath:ok",
+					tempFilePath
+				})
+			} catch (e) {
+				console.log('e', e)
+				args.fail({
+					error: e
+				})
+			}
+		}
+	}
+}
+// #endif
\ No newline at end of file
diff --git a/src/uni_modules/lime-painter/components/l-painter/painter.js b/src/uni_modules/lime-painter/components/l-painter/painter.js
new file mode 100644
index 00000000..a8e3483e
--- /dev/null
+++ b/src/uni_modules/lime-painter/components/l-painter/painter.js
@@ -0,0 +1 @@
+var t=function(){return t=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var r in e=arguments[i])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t},t.apply(this,arguments)};function e(t,e,i,n){return new(i||(i=Promise))((function(r,o){function s(t){try{h(n.next(t))}catch(t){o(t)}}function a(t){try{h(n.throw(t))}catch(t){o(t)}}function h(t){var e;t.done?r(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,a)}h((n=n.apply(t,e||[])).next())}))}function i(t,e){var i,n,r,o,s={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return o={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function a(o){return function(a){return function(o){if(i)throw new TypeError("Generator is already executing.");for(;s;)try{if(i=1,n&&(r=2&o[0]?n.return:o[0]?n.throw||((r=n.return)&&r.call(n),0):n.next)&&!(r=r.call(n,o[1])).done)return r;switch(n=0,r&&(o=[2&o[0],r.value]),o[0]){case 0:case 1:r=o;break;case 4:return s.label++,{value:o[1],done:!1};case 5:s.label++,n=o[1],o=[0];continue;case 7:o=s.ops.pop(),s.trys.pop();continue;default:if(!(r=s.trys,(r=r.length>0&&r[r.length-1])||6!==o[0]&&2!==o[0])){s=0;continue}if(3===o[0]&&(!r||o[1]>r[0]&&o[1]<r[3])){s.label=o[1];break}if(6===o[0]&&s.label<r[1]){s.label=r[1],r=o;break}if(r&&s.label<r[2]){s.label=r[2],s.ops.push(o);break}r[2]&&s.ops.pop(),s.trys.pop();continue}o=e.call(t,s)}catch(t){o=[6,t],n=0}finally{i=r=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,a])}}}var n={MP_WEIXIN:"mp-weixin",MP_QQ:"mp-qq",MP_ALIPAY:"mp-alipay",MP_BAIDU:"mp-baidu",MP_TOUTIAO:"mp-toutiao",MP_DINGDING:"mp-dingding",H5:"h5",WEB:"web",PLUS:"plus"},r=["Top","Right","Bottom","Left"],o="right",s="bottom",a=["contentSize","clientSize","borderSize","offsetSize"],h="row",c="column",f={TOP:"top",MIDDLE:"middle",BOTTOM:s},l={LEFT:"left",CENTER:"center",RIGHT:o},d="view",u="text",p="image",g="qrcode",v="block",y="inline-block",x="none",b="flex",w="absolute",m="fixed",S={display:v,color:"#000000",lineHeight:"1.4em",fontSize:14,fontWeight:400,fontFamily:"sans-serif",lineCap:"butt",flexDirection:h,flexWrap:"nowrap",textAlign:"left",alignItems:"flex-start",justifyContent:"flex-start",position:"static",transformOrigin:"".concat("center"," ").concat("center")},z={upx2px:function(t){return window.innerWidth/750*t},getSystemInfoSync:function(){return{screenWidth:window.innerWidth,screenHeight:window.innerHeight}},getImageInfo:function(t){var e=t.src,i=t.success,n=t.fail,r=new Image;r.onload=function(){i({width:r.naturalWidth,height:r.naturalHeight,path:r.src,src:e})},r.onerror=n,r.src=e}},I="object"==typeof window?"undefined"==typeof uni||"undefined"!=typeof uni&&!uni.addInterceptor?n.WEB:n.H5:"object"==typeof swan?n.MP_BAIDU:"object"==typeof tt?n.MP_TOUTIAO:"object"==typeof plus?n.PLUS:"object"==typeof wx?n.MP_WEIXIN:void 0,M=I==n.MP_WEIXIN?wx:"undefined"!=typeof uni?uni.getImageInfo?{upx2px:function(t){return uni.upx2px(t)},getSystemInfoSync:function(){return uni.getSystemInfoSync()},getImageInfo:function(t){return uni.getImageInfo(t)},downloadFile:function(t){return uni.downloadFile(t)}}:Object.assign(uni,z):"undefined"!=typeof window?z:uni;if(!M.upx2px){var k=((M.getSystemInfoSync&&M.getSystemInfoSync()).screenWidth||375)/750;M.upx2px=function(t){return k*t}}function B(t){return/^-?\d+(\.\d+)?$/.test(t)}function W(t,e,i){if(B(t))return 1*t;if("string"==typeof t){var n=/^-?([0-9]+)?([.]{1}[0-9]+){0,1}(em|rpx|vw|vh|px|%)$/g.exec(t);if(!t||!n)return 0;var r=n[3];t=parseFloat(t);var o=0;if("rpx"===r)o=M.upx2px(t);else if("px"===r)o=1*t;else if("%"===r&&e)o=t*W(e)/100;else if("em"===r&&e)o=t*W(e||14);else if(["vw","vh"].includes(r)){var s=M.getSystemInfoSync(),a=s.screenWidth,h=s.screenHeight;o=t*("vw"==r?a:h)/100}return 1*o.toFixed(2)}return 0}function P(t){return/%$/.test(t)}function O(t){return/^-?([0-9]+)?([.]{1}[0-9]+){0,1}(rpx|px)$/.test(t)}var T=function(t){return!(!t||!t.startsWith("linear")&&!t.startsWith("radial"))},L=function(t,e,i,n,r,o){t.startsWith("linear")?function(t,e,i,n,r,o){for(var s=function(t,e,i,n,r){void 0===n&&(n=0);void 0===r&&(r=0);var o=t.match(/([-]?\d{1,3})deg/),s=o&&o[1]?parseFloat(o[1]):0;s>=360&&(s-=360);s<0&&(s+=360);if(0===(s=Math.round(s)))return{x0:Math.round(e/2)+n,y0:i+r,x1:Math.round(e/2)+n,y1:r};if(180===s)return{x0:Math.round(e/2)+n,y0:r,x1:Math.round(e/2)+n,y1:i+r};if(90===s)return{x0:n,y0:Math.round(i/2)+r,x1:e+n,y1:Math.round(i/2)+r};if(270===s)return{x0:e+n,y0:Math.round(i/2)+r,x1:n,y1:Math.round(i/2)+r};var a=Math.round(180*Math.asin(e/Math.sqrt(Math.pow(e,2)+Math.pow(i,2)))/Math.PI);if(s===a)return{x0:n,y0:i+r,x1:e+n,y1:r};if(s===180-a)return{x0:n,y0:r,x1:e+n,y1:i+r};if(s===180+a)return{x0:e+n,y0:r,x1:n,y1:i+r};if(s===360-a)return{x0:e+n,y0:i+r,x1:n,y1:r};var h=0,c=0,f=0,l=0;if(s<a||s>180-a&&s<180||s>180&&s<180+a||s>360-a){var d=s*Math.PI/180,u=s<a||s>360-a?i/2:-i/2,p=Math.tan(d)*u,g=s<a||s>180-a&&s<180?e/2-p:-e/2-p;h=-(f=p+(v=Math.pow(Math.sin(d),2)*g)),c=-(l=u+v/Math.tan(d))}if(s>a&&s<90||s>90&&s<90+a||s>180+a&&s<270||s>270&&s<360-a){var v;d=(90-s)*Math.PI/180,p=s>a&&s<90||s>90&&s<90+a?e/2:-e/2,u=Math.tan(d)*p,g=s>a&&s<90||s>270&&s<360-a?i/2-u:-i/2-u;h=-(f=p+(v=Math.pow(Math.sin(d),2)*g)/Math.tan(d)),c=-(l=u+v)}return h=Math.round(h+e/2)+n,c=Math.round(i/2-c)+r,f=Math.round(f+e/2)+n,l=Math.round(i/2-l)+r,{x0:h,y0:c,x1:f,y1:l}}(r,t,e,i,n),a=s.x0,h=s.y0,c=s.x1,f=s.y1,l=o.createLinearGradient(a,h,c,f),d=r.match(/linear-gradient\((.+)\)/)[1],u=R(d.substring(d.indexOf(",")+1)),p=0;p<u.colors.length;p++)l.addColorStop(u.percents[p],u.colors[p]);o.setFillStyle(l)}(e,i,n,r,t,o):t.startsWith("radial")&&function(t,e,i,n,r,o){for(var s=R(r.match(/radial-gradient\((.+)\)/)[1]),a=Math.round(t/2)+i,h=Math.round(e/2)+n,c=o.createRadialGradient(a,h,0,a,h,Math.max(t,e)/2),f=0;f<s.colors.length;f++)c.addColorStop(s.percents[f],s.colors[f]);o.setFillStyle(c)}(e,i,n,r,t,o)};function R(t){for(var e=[],i=[],n=0,r=t.substring(0,t.length-1).split("%,");n<r.length;n++){var o=r[n];e.push(o.substring(0,o.lastIndexOf(" ")).trim()),i.push(o.substring(o.lastIndexOf(" "),o.length)/100)}return{colors:e,percents:i}}function F(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function A(){return A=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t},A.apply(this,arguments)}function j(t,e){return j=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},j(t,e)}function E(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}function C(t,e){var i="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(i)return(i=i.call(t)).next.bind(i);if(Array.isArray(t)||(i=function(t,e){if(t){if("string"==typeof t)return E(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?E(t,e):void 0}}(t))||e&&t&&"number"==typeof t.length){i&&(t=i);var n=0;return function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function H(t){return"number"==typeof t}function D(t){return"auto"===t||null===t}function $(t){return/%$/.test(t)}var Y=p,U=u,N=d,X=g,_=y,q=w,G=m;function V(t){return t.replace(/-([a-z])/g,(function(t,e){return e.toUpperCase()}))}function J(t,e){var i,n,o=function(t){var e=t.match(/([a-z]+)/)[1];return[e,V(t.split(e)[1])]}(t),s=o[0],a=o[1],h=e.split(" ");if(a)return(i={})[s+a]=e,i;if(h.length&&!a){var c=h[0],f=h[1],l=h[2],d=h[3];return(n={})[s+r[0]]=c,n[s+r[1]]=f||c,n[s+r[2]]=l||c,n[s+r[3]]=d||f||c,n}}function Q(t){t=t.trim();for(var e=new Array,i="+",n="",r=t.length,o=0;o<r;++o){if("."===t[o]||!isNaN(Number(t[o]))&&" "!==t[o])n+=t[o];else if("("===t[o]){for(var s=1,a=o;s>0;)"("===t[a+=1]&&(s+=1),")"===t[a]&&(s-=1);n="".concat(Q(t.slice(o+1,a))),o=a}if(isNaN(Number(t[o]))&&"."!==t[o]||o===r-1){var h=parseFloat(n);switch(i){case"+":e.push(h);break;case"-":e.push(-h);break;case"*":e.push(e.pop()*h);break;case"/":e.push(e.pop()/h)}i=t[o],n=""}}for(var c=0;e.length;)c+=e.pop();return c}var Z,K=0,et=function(){function t(){F(this,"elements",[]),F(this,"afterElements",[]),F(this,"beforeElements",[]),F(this,"ids",[]),F(this,"width",0),F(this,"height",0),F(this,"top",0),F(this,"left",0),F(this,"pre",null),F(this,"offsetX",0),F(this,"offsetY",0),K++,this.id=K}var e=t.prototype;return e.fixedBind=function(t,e){void 0===e&&(e=0),this.container=e?t.parent:t.root,this.container.fixedLine=this,this.fixedAdd(t)},e.fixedAdd=function(t){if(!this.ids.includes(t.id)){this.ids.push(t.id),this.elements.push(t);var e=t.computedStyle.zIndex;(void 0===e?0:e)>=0?this.afterElements.push(t):this.beforeElements.push(t),this.refreshLayout()}},e.bind=function(t){this.container=t.parent,this.container.line=null,this.container.lines?(this.container.lines.push(this),this.pre=this.getPreLine(),this.top=this.pre.top+this.pre.height,this.left=this.container.contentSize.left):(this.top=this.container.contentSize.top,this.left=this.container.contentSize.left,this.container.lines=[this]),this.isInline=t.isInline(),this.container.line=this,this.outerWidth=t.parent&&t.parent.contentSize.width?t.parent.contentSize.width:1/0,this.add(t)},e.getPreLine=function(){return this.container.lines[this.container.lines.length-2]},e.canIEnter=function(t){return!((100*t.offsetSize.width+100*this.width)/100>this.outerWidth)||(this.closeLine(),!1)},e.closeLine=function(){delete this.container.line},e.add=function(t){this.ids.includes(t.id)||(this.ids.push(t.id),this.elements.push(t),this.refreshWidthHeight(t))},e.refreshWidthHeight=function(t){t.offsetSize.height>this.height&&(this.height=t.offsetSize.height),this.width+=t.offsetSize.width||0,(this.container.lineMaxWidth||0)<this.width&&(this.container.lineMaxWidth=this.width)},e.refreshXAlign=function(){if(this.isInline){var t=this.container.contentSize.width-this.width,e=this.container.style.textAlign;"center"===e?t/=2:"left"===e&&(t=0),this.offsetX=t}},e.getOffsetY=function(t){if(!t||!t.style)return 0;var e=(t.style||{}).verticalAlign;return e===s?this.height-t.contentSize.height:"middle"===e?(this.height-t.contentSize.height)/2:0},e.setIndent=function(t){var e=t.style.textIndent;if(e&&/^calc/.test(e)){var i=/^calc\((.+)\)$/.exec(e);if(i&&i[1]){var n=i[1].replace(/([^\s\(\+\-\*\/]+)\.(left|right|bottom|top|width|height)/g,(function(e){var i=e.split("."),n=i[0],r=i[1],o=t.parent.querySelector(n);if(o&&o.offsetSize){var s={right:o.offsetSize.left+o.offsetSize.width,bottom:o.offsetSize.top+o.offsetSize.height};return o.offsetSize[r]||s[r]||0}})),r=Q(n.replace(new RegExp(/-?[0-9]+(\.[0-9]+)?(rpx|px|%)/,"g"),W));t.style.textIndent=r}}},e.layout=function(t,e){var i=this;this.refreshXAlign(),this.pre?(this.top=this.pre.top+this.pre.height+this.offsetY,this.left=e+this.offsetX):(this.top=Math.max(this.top,this.container.contentSize.top,t)+this.offsetY,this.left=Math.max(this.left,this.container.contentSize.left,e)+this.offsetX),this.elements.forEach((function(t,e){i.setIndent(t);var n=i.elements[e-1],r=i.getOffsetY(t);t.style.top=i.top+r,t.style.left=n?n.offsetSize.left+n.offsetSize.width:i.left,t.getBoxPosition()}))},e.refreshLayout=function(){this.afterElements=this.afterElements.sort((function(t,e){return t.computedStyle.zIndex-e.computedStyle.zIndex})),this.beforeElements=this.beforeElements.sort((function(t,e){return t.computedStyle.zIndex-e.computedStyle.zIndex}))},t}(),it=((Z={})[h]={width:"width",contentWidth:"width",lineMaxWidth:"lineMaxWidth",left:"left",top:"top",height:"height",lineMaxHeight:"lineMaxHeight",marginLeft:"marginLeft"},Z[c]={width:"height",contentWidth:"height",lineMaxWidth:"lineMaxWidth",left:"top",top:"left",height:"width",lineMaxHeight:"lineMaxHeight",marginLeft:"marginTop"},Z),nt=function(t){var e,i;function n(){var e;return F(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e=t.call(this)||this),"outerWidth",0),e.exactValue=0,e.flexTotal=0,e.width=0,e.key=null,e.flexDirection="row",e}i=t,(e=n).prototype=Object.create(i.prototype),e.prototype.constructor=e,j(e,i);var r=n.prototype;return r.bind=function(t){this.container=t.parent,this.container.line=this,this.container.lines?(this.container.lines.push(this),this.pre=this.getPreLine(),this.top=this.pre.top+this.pre.height,this.left=this.container.contentSize.left):(this.top=this.container.contentSize.top,this.left=this.container.contentSize.left,this.container.lines=[this]),t.parent&&(this.flexDirection=t.parent.style.flexDirection,this.key=it[this.flexDirection]),this.initHeight(t),this.outerWidth=t.parent&&t.parent.contentSize[this.key.contentWidth]?t.parent.contentSize[this.key.contentWidth]:1/0,this.add(t)},r.add=function(t){this.ids.push(t.id);var e=t.style.flex;H(e)?this.flexTotal+=e:H(this.getWidth(t.style))&&(this.exactValue+=this.getWidth(t.offsetSize)),this.elements.push(t),this.refreshWidthHeight(t),t.next||this.closeLine()},r.closeLine=function(){this.calcFlex()},r.initHeight=function(t){this[this.key.height]=0},r.getWidth=function(t){return t[this.key.width]||0},r.getHeight=function(t){return t[this.key.height]||0},r.setWidth=function(t,e){t[this.key.width]=e},r.setHeight=function(t,e){t[this.key.height]=e},r.calcFlex=function(){var t=this,e=this.container.contentSize[this.key.contentWidth],i=0;this.elements.forEach((function(n){var r=n.style,o=n.contentSize,s=t.getWidth(r)||t.getWidth(o);H(r.flex)&&(s=r.flex/t.flexTotal*(e-t.exactValue)),t.setWidth(n.computedStyle,s),n.isFlexCalc=!0,delete n.line,delete n.lines,delete n.lineMaxWidth,n.getBoxWidthHeight(),i=Math.max(i,t.getHeight(n.offsetSize))})),this.setHeight(this,i)},r.refreshWidthHeight=function(t){var e=this.container.style.alignItems;e&&!t.style.alignSelf&&(t.style.alignSelf=e);var i=this.getHeight(t.offsetSize);i>this[this.key.height]&&(this.container[this.key.lineMaxHeight]=this[this.key.height]=i),this[this.key.width]+=this.getWidth(t.offsetSize);var n=Math.min(this.getWidth(this),!this.getWidth(this.container.contentSize)&&1/0);(this.container[this.key.lineMaxWidth]||0)<n&&(this.container[this.key.lineMaxWidth]=n)},r.refreshXAlign=function(){var t=this,e=this.elements.reduce((function(e,i){return e+t.getWidth(i.offsetSize)}),0),i=(this.outerWidth==1/0?0:this.outerWidth-e)||0,n=this.container.style.justifyContent;"center"===n?i/=2:"flex-start"===n?i=0:["space-between","space-around"].includes(n)&&(!function(e,i){void 0===i&&(i=0),i/=t.elements.length+(e?-1:1),t.elements.forEach((function(n,r){var o;e&&!r||(n.style.margin?n.style.margin[t.key.marginLeft]+=i:n.style.margin=((o={})[t.key.marginLeft]=i,o),n.getBoxPosition())})),i=0}("space-between"==n,i),i=0),this.offsetX=i||0,this.refreshYAlign()},r.refreshYAlign=function(){var t=this;if(1==this.container.lines.length)return 0;var e=this.container.lines.reduce((function(e,i){return e+t.getHeight(i)}),0),i=this.container.style.alignItems,n=this.getHeight(this.container.contentSize);if("center"===i){var r=(n-e)/(this.container.lines.length+1);this.container.lines.forEach((function(t){t.offsetY=r}))}if("flex-end"===i){var o=n-e;this.container.lines[0].offsetY=o}},r.getOffsetY=function(t){if(this.container.lines.length>1)return 0;var e=t.style.alignSelf,i=this.getHeight(this.container.contentSize),n=i-this.getHeight(t.offsetSize);return"flex-end"===e?n:"center"===e?n/2:"stretch"===e?(n&&t.name==d&&(t.style[this.key.width]=this.getWidth(t.offsetSize),t.style[this.key.height]=i,delete t.line,delete t.lines,t.getBoxWidthHeight()),0):0},r.layout=function(t,e){var i=this;this.refreshXAlign(),this.pre?(this.top=this.pre.top+this.pre.height+this.offsetY,this.left=e+this.offsetX):(this.top=Math.max(this.top,this.container.contentSize.top,t)+this.offsetY,this.left=Math.max(this.left,this.container.contentSize.left,e)+this.offsetX),this.elements.forEach((function(t,e){i.setIndent(t);var n=i.elements[e-1],r=i.getOffsetY(t);t.style[i.key.top]=i[i.key.top]+r,t.style[i.key.left]=n?n.offsetSize[i.key.left]+i.getWidth(n.offsetSize):i[i.key.left],t.getBoxPosition()}))},n}(et),rt=p,ot=u,st=d,at=v,ht=y,ct=b,ft=w,lt=m,dt=0,ut={left:null,top:null,width:null,height:null},pt=new Map,gt=function(){function t(t,e,i,n){var o=this;F(this,"id",dt++),F(this,"style",{left:null,top:null,width:null,height:null}),F(this,"computedStyle",{}),F(this,"originStyle",{}),F(this,"children",{}),F(this,"layoutBox",A({},ut)),F(this,"contentSize",A({},ut)),F(this,"clientSize",A({},ut)),F(this,"borderSize",A({},ut)),F(this,"offsetSize",A({},ut)),this.ctx=n,this.root=i,e&&(this.parent=e),this.name=t.type||t.name,this.attributes=this.getAttributes(t);var s=function(t,e){var i,n=["color","fontSize","lineHeight","verticalAlign","fontWeight","textAlign"],o=t.type,s=void 0===o?N:o,a=t.styles,h=void 0===a?{}:a,c=(e||{}).computedStyle,f=Object.assign({},S);if([U,Y,X].includes(s)&&!h.display&&(f.display=_),c)for(var l=0;l<n.length;l++){var d=n[l];(h[d]||c[d])&&(h[d]=h[(i=d,i.replace(/([A-Z])/g,"-$1").toLowerCase())]||h[d]||c[d])}for(var u=function(t){var e,i,n,o,a=h[t];if(/-/.test(t)&&(t=V(t),f[t]=a),/^(box|text)?shadow$/i.test(t)){var c=[];return a.replace(/((-?\d+(rpx|px|vw|vh)?\s+?){3})(.+)/,(function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];c=t[1].match(/-?\d+(rpx|px|vw|vh)?/g).map((function(t){return W(t)})).concat(t[4])})),/^text/.test(t)?f.textShadow=c:f.boxShadow=c,"continue"}if(/^border/i.test(t)&&!/radius$/i.test(t)){var l=t.match(/^border([BTRLa-z]+)?/)[0],d=t.match(/[W|S|C][a-z]+/),u=a.replace(/([\(,])\s+|\s+([\),])/g,"$1$2").split(" ").map((function(t){return/^\d/.test(t)?W(t,""):t}));return f[l]||(f[l]={}),1==u.length&&d?f[l][l+d[0]]=u[0]:f[l]=((e={})[l+"Width"]=B(u[0])?u[0]:0,e[l+"Style"]=u[1]||"solid",e[l+"Color"]=u[2]||"black",e),"continue"}if(/^background(color)?$/i.test(t))return f.backgroundColor=a,"continue";if(/^objectPosition$/i.test(t))return f[t]=a.split(" "),"continue";if(/^backgroundPosition$/i.test(t))return f[t]=a.split(" "),"continue";if(/padding|margin|radius/i.test(t)){var p=/radius$/i.test(t),g="borderRadius",v=p?g:t.match(/[a-z]+/)[0],y=function(t,e){return"border".concat(t).concat(e,"Radius")},x=[0,0,0,0].map((function(t,e){return p?[y(r[0],r[3]),y(r[0],r[1]),y(r[2],r[1]),y(r[2],r[3])][e]:v+r[e]}));if("padding"===t||"margin"===t||/^(border)?radius$/i.test(t)){u="".concat(a).split(" ").map((function(e){return/^-?\d+(rpx|px|vh|vw)?$/.test(e)?W(e):"margin"!=t&&/auto/.test(e)?0:e}),[])||[0];var b=p?g:t,w=u[0],m=u[1],S=u[2],z=u[3];f[b]=((i={})[x[0]]=D(w)?0:w,i[x[1]]=B(m)||D(m)?m:w,i[x[2]]=D(B(S)?S:w)?0:B(S)?S:w,i[x[3]]=B(z)?z:null!=m?m:w,i)}else"object"==typeof f[v]||(f[v]=((n={})[x[0]]=f[v]||0,n[x[1]]=f[v]||0,n[x[2]]=f[v]||0,n[x[3]]=f[v]||0,n)),f[v][t]="margin"==v&&D(a)||$(a)?a:W(a);return"continue"}if(/^transform$/i.test(t))return f[t]={},a.replace(/([a-zA-Z]+)\(([0-9,-\.%rpxdeg\s]+)\)/g,(function(e,i,n){var r=n.split(",").map((function(t){return t.replace(/(^\s*)|(\s*$)/g,"")})),o=function(t,e){return t.includes("deg")?1*t:e&&!$(e)?W(t,e):t};i.includes("matrix")?f[t][i]=r.map((function(t){return 1*t})):i.includes("rotate")?f[t][i]=1*n.match(/^-?\d+(\.\d+)?/)[0]:/[X, Y]/.test(i)?f[t][i]=/[X]/.test(i)?o(r[0],h.width):o(r[0],h.height):(f[t][i+"X"]=o(r[0],h.width),f[t][i+"Y"]=o(r[1]||r[0],h.height))})),"continue";if(/^font$/i.test(t)&&console.warn("font 不支持简写"),/^textindent/i.test(t)&&(f[t]=/^calc/.test(a)?a:W(a)),/^textstroke/i.test(t)){var I=t.match(/color|width|type$/i),M=(l="textStroke",a.split(" ").map((function(t){return/^\d+(rpx|px|vh|vw)?$/.test(t)?W(t):t})));return I?f[l]?f[l][I[0]]=M[0]:f[l]=((o={})[I[0]]=M[0],o):f[l]={width:M[0],color:M[1],type:M[2]},"continue"}/^left|top$/i.test(t)&&![q,G].includes(h.position)?f[t]=0:f[t]=/^-?[\d\.]+(px|rpx|vw|vh)?$/.test(a)?W(a):/em$/.test(a)&&s==U?W(a,h.fontSize):a},p=0,g=Object.keys(h);p<g.length;p++)u(g[p]);return f}(t,e);this.isAbsolute=s.position==ft,this.isFixed=s.position==lt,this.originStyle=s,this.styles=t.styles,Object.keys(s).forEach((function(t){Object.defineProperty(o.style,t,{configurable:!0,enumerable:!0,get:function(){return s[t]},set:function(e){s[t]=e}})}));var a={contentSize:A({},this.contentSize),clientSize:A({},this.clientSize),borderSize:A({},this.borderSize),offsetSize:A({},this.offsetSize)};Object.keys(a).forEach((function(t){Object.keys(o[t]).forEach((function(e){Object.defineProperty(o[t],e,{configurable:!0,enumerable:!0,get:function(){return a[t][e]},set:function(i){a[t][e]=i}})}))})),this.computedStyle=this.style}var e=t.prototype;return e.add=function(t){t.parent=this,this.children[t.id]=t},e.getChildren=function(){var t=this;return Object.keys(this.children).map((function(e){return t.children[e]}))},e.prev=function(t){void 0===t&&(t=this);var e=t.parent.getChildren();return e[e.findIndex((function(e){return e.id==t.id}))-1]},e.querySelector=function(t){var e=this.getChildren();if("string"!=typeof t)return null;var i=e.find((function(e){var i=e.id,n=e.attributes;return i==t||n&&n.uid==t}));return i||(this.parent&&this.parent.querySelector&&this.parent.querySelector(t)||null)},e.getLineRect=function(t,e){var i={width:0,height:0},n=e?e.lines:this.parent&&this.parent.lines;return n&&n.find((function(e){return e.ids.includes(t)}))||i},e.setPosition=function(t,e){var i={left:"width",top:"height",right:"width",bottom:"height"};Object.keys(i).forEach((function(n){var r=n==o?"left":"top";[o,s].includes(n)&&void 0!==t.style[n]&&!B(t.originStyle[r])?t.style[r]=e[i[n]]-t.offsetSize[i[n]]-W(t.style[n],e[i[n]]):t.style[n]=W(t.style[n],e[i[n]])}))},e.getAttributes=function(t){var e=t.attributes,i=void 0===e?{}:e,n=t.uid,r=t.url,o=t.src,s=t.replace,a=t.text;return n&&(i.uid=n),(r||o)&&(i.src=i.src||r||o),s&&(i.replace=s),a&&(i.text=a),i},e.getOffsetSize=function(t,e,i){void 0===i&&(i=a[3]);var n=e||{},r=n.margin,o=(r=void 0===r?{}:r).marginLeft,s=void 0===o?0:o,h=r.marginTop,c=void 0===h?0:h,f=r.marginRight,l=void 0===f?0:f,d=r.marginBottom,u=void 0===d?0:d,p=n.padding,g=(p=void 0===p?{}:p).paddingLeft,v=void 0===g?0:g,y=p.paddingTop,x=void 0===y?0:y,b=p.paddingRight,w=void 0===b?0:b,m=p.paddingBottom,S=void 0===m?0:m,z=n.border,I=(z=void 0===z?{}:z).borderWidth,M=void 0===I?0:I,k=n.borderTop,B=(k=void 0===k?{}:k).borderTopWidth,W=void 0===B?M:B,P=n.borderBottom,O=(P=void 0===P?{}:P).borderBottomWidth,T=void 0===O?M:O,L=n.borderRight,R=(L=void 0===L?{}:L).borderRightWidth,F=void 0===R?M:R,A=n.borderLeft,j=(A=void 0===A?{}:A).borderLeftWidth,E=void 0===j?M:j,C=s<0&&l<0?Math.abs(s+l):0,H=c<0&&u<0?Math.abs(c+u):0,D=s>=0&&l<0,$=c>=0&&u<0;return i==a[0]&&(this[i].left=t.left+s+v+E+(D?2*-l:0),this[i].top=t.top+c+x+W+($?2*-u:0),this[i].width=t.width+(this[i].widthAdd?0:C),this[i].height=t.height+(this[i].heightAdd?0:H),this[i].widthAdd=C,this[i].heightAdd=H),i==a[1]&&(this[i].left=t.left+s+E+(D<0?-l:0),this[i].top=t.top+c+W+($?-u:0),this[i].width=t.width+v+w,this[i].height=t.height+x+S),i==a[2]&&(this[i].left=t.left+s+E/2+(D<0?-l:0),this[i].top=t.top+c+W/2+($?-u:0),this[i].width=t.width+v+w+E/2+F/2,this[i].height=t.height+x+S+T/2+W/2),i==a[3]&&(this[i].left=t.left+(D<0?-l:0),this[i].top=t.top+($?-u:0),this[i].width=t.width+v+w+E+F+s+l,this[i].height=t.height+x+S+T+W+u+c),this[i]},e.layoutBoxUpdate=function(t,e,i,n){var r=this;if(void 0===i&&(i=-1),"border-box"==e.boxSizing){var o=e||{},s=o.border,h=(s=void 0===s?{}:s).borderWidth,c=void 0===h?0:h,f=o.borderTop,l=(f=void 0===f?{}:f).borderTopWidth,d=void 0===l?c:l,u=o.borderBottom,p=(u=void 0===u?{}:u).borderBottomWidth,g=void 0===p?c:p,v=o.borderRight,y=(v=void 0===v?{}:v).borderRightWidth,x=void 0===y?c:y,b=o.borderLeft,w=(b=void 0===b?{}:b).borderLeftWidth,m=void 0===w?c:w,S=o.padding,z=(S=void 0===S?{}:S).paddingTop,I=void 0===z?0:z,M=S.paddingRight,k=void 0===M?0:M,B=S.paddingBottom,W=void 0===B?0:B,P=S.paddingLeft,O=void 0===P?0:P;i||(t.width-=O+k+x+m),1!==i||n||(t.height-=I+W+d+g)}this.layoutBox&&(a.forEach((function(i){return r.layoutBox[i]=r.getOffsetSize(t,e,i)})),this.layoutBox=Object.assign({},this.layoutBox,this.layoutBox.borderSize))},e.getBoxPosition=function(){var t=this.computedStyle,e=this.fixedLine,i=this.lines,n=t.left,r=void 0===n?0:n,o=t.top,s=void 0===o?0:o,a=A({},this.contentSize,{left:r,top:s}),h=this.contentSize.top-this.offsetSize.top,c=this.contentSize.left-this.offsetSize.left;if(this.root.fixedLine&&!this.root.isDone){this.root.isDone=!0;for(var f,l=C(this.root.fixedLine.elements);!(f=l()).done;){var d=f.value;d.setPosition(d,this.root.offsetSize),d.getBoxPosition()}}if(e)for(var u,p=C(e.elements);!(u=p()).done;){var g=u.value,v=A({},this.borderSize,{left:r,top:s});g.setPosition(g,v);var y=this.borderSize.top-this.offsetSize.top,x=this.borderSize.left-this.offsetSize.left;g.style.left+=r+x,g.style.top+=s+y,g.getBoxPosition()}if(i)for(var b,w=C(i);!(b=w()).done;){b.value.layout(a.top+h,a.left+c)}return this.layoutBoxUpdate(a,t),this.layoutBox},e.getBoxState=function(t,e){return this.isBlock(t)||this.isBlock(e)},e.isBlock=function(t){return void 0===t&&(t=this),t&&t.style.display==at},e.isFlex=function(t){return void 0===t&&(t=this),t&&t.style.display==ct},e.isInFlow=function(){return!(this.isAbsolute||this.isFixed)},e.inFlexBox=function(t){return void 0===t&&(t=this),!!t.isInFlow()&&(!!t.parent&&(!(!t.parent||t.parent.style.display!==ct)||void 0))},e.isInline=function(t){return void 0===t&&(t=this),t&&t.style.display==ht},e.contrastSize=function(t,e,i){var n=t;return i&&(n=Math.min(n,i)),e&&(n=Math.max(n,e)),n},e.measureText=function(t,e){var i=this.ctx.measureText(t),n=i.width,r=i.actualBoundingBoxAscent,o=i.actualBoundingBoxDescent;return{ascent:r,descent:o,width:n,fontHeight:r+o||.7*e+1}},e.getParentSize=function(t,e){if(void 0===t&&(t=this),void 0===e&&(e=!1),t&&t.parent){if(t.parent.contentSize.width)return t.parent.contentSize;if(e)return this.getParentSize(t.parent,e)}return null},e.getBoxWidthHeight=function(){var t=this,e=this.name,i=this.computedStyle,n=this.attributes,r=this.parent,o=void 0===r?{}:r,s=this.ctx,a=this.getChildren(),h=i.left,c=void 0===h?0:h,f=i.top,l=void 0===f?0:f,d=i.bottom,u=i.right,p=i.width,g=void 0===p?0:p,v=i.minWidth,y=i.maxWidth,x=i.minHeight,b=i.maxHeight,w=i.height,m=void 0===w?0:w,S=i.fontSize,z=i.fontWeight,I=i.fontFamily,M=i.fontStyle,k=i.position;i.textIndent;var B=i.lineClamp,P=i.lineHeight,O=i.padding,T=void 0===O?{}:O,L=i.margin,R=void 0===L?{}:L,F=i.border,A=(F=void 0===F?{}:F).borderWidth,j=void 0===A?0:A,E=i.borderRight,C=(E=void 0===E?{}:E).borderRightWidth,H=void 0===C?j:C,Y=i.borderLeft,U=(Y=void 0===Y?{}:Y).borderLeftWidth,N=void 0===U?j:U,X=o.contentSize&&o.contentSize.width,_=o.contentSize&&o.contentSize.height;if($(g)&&X&&(g=W(g,X)),$(g)&&!X&&(g=null),$(m)&&_&&(m=W(m,_)),$(m)&&!_&&(m=null),$(v)&&X&&(v=W(v,X)),$(y)&&X&&(y=W(y,X)),$(x)&&_&&(x=W(x,_)),$(b)&&_&&(b=W(b,_)),i.padding&&X)for(var q in i.padding)Object.hasOwnProperty.call(T,q)&&(T[q]=W(T[q],X));var G=T.paddingRight,V=void 0===G?0:G,J=T.paddingLeft,Q=void 0===J?0:J;if(i.margin&&[R.marginLeft,R.marginRight].includes("auto"))if(g){var Z=X&&X-g-V-Q-N-H||0;R.marginLeft==R.marginRight?R.marginLeft=R.marginRight=Z/2:D(R.marginLeft)?R.marginLeft=Z:R.marginRight=Z}else R.marginLeft=R.marginRight=0;var K=R.marginRight,tt=void 0===K?0:K,it=R.marginLeft,at={width:g,height:m,left:0,top:0},ht=Q+V+N+H+(void 0===it?0:it)+tt;if(this.offsetWidth=ht,e==ot&&!this.attributes.widths){var ct=n.text||"";s.save(),s.setFonts({fontFamily:I,fontSize:S,fontWeight:z,fontStyle:M}),ct.length,"\n"==ct&&(ct="",this.isBr=!0),(""+ct).split("\n").map((function(e){var i=Array.from(e).map((function(e){var i=""+(/^[\u4e00-\u9fa5]+$/.test(e)?"cn":e)+I+S+z+M,n=pt.get(i);if(n)return{width:n,text:e};var r=t.measureText(e,S).width;return pt.set(i,r),{width:r,text:e}})),n=t.measureText(e,S),r=n.fontHeight,o=n.ascent,s=n.descent;t.attributes.fontHeight=r,t.attributes.ascent=o,t.attributes.descent=s,t.attributes.widths||(t.attributes.widths=[]),t.attributes.widths.push({widths:i,total:i.reduce((function(t,e){return t+e.width}),0)})})),s.restore()}if(e==rt&&null==g){var lt=n.width,dt=n.height;at.width=this.contrastSize(Math.round(lt*m/dt)||0,v,y),this.layoutBoxUpdate(at,i,0)}if(e==ot&&null==g){var ut=this.attributes.widths,gt=Math.max.apply(Math,ut.map((function(t){return t.total})));if(o&&X>0&&(gt>X||this.isBlock(this))&&!this.isAbsolute&&!this.isFixed)gt=X;at.width=this.contrastSize(gt,v,y),this.layoutBoxUpdate(at,i,0)}if(e==ot&&(o.style.flex||!this.attributes.lines)){var vt=this.attributes.widths.length;this.attributes.widths.forEach((function(t){return t.widths.reduce((function(t,e,i){return t+e.width>at.width?(vt++,e.width):t+e.width}),0)})),vt=B&&vt>B?B:vt,this.attributes.lines=vt}if(e==rt&&null==m){var yt=n.width,xt=n.height;n.text,at.height=this.contrastSize(W(at.width*xt/yt)||0,x,b),this.layoutBoxUpdate(at,i,1)}e==ot&&null==m&&(P=W(P,S),at.height=this.contrastSize(W(this.attributes.lines*P),x,b),this.layoutBoxUpdate(at,i,1,!0)),!g&&o&&o.children&&X&&(!this.isFlex(o)||o.isFlexCalc)&&([st,ot].includes(e)&&this.isFlex()||e==st&&this.isBlock(this)&&this.isInFlow())&&(at.width=this.contrastSize(X-(o.isFlexCalc?0:ht),v,y),this.layoutBoxUpdate(at,i)),g&&!$(g)&&(at.width=this.contrastSize(g,v,y),this.layoutBoxUpdate(at,i,0)),m&&!$(m)&&(at.height=this.contrastSize(at.height,x,b),this.layoutBoxUpdate(at,i,1));var bt=0;if(a.length){var wt=null,mt=!1;a.forEach((function(e,n){e.getBoxWidthHeight();var r=a[n+1];if(r&&r.isInFlow()&&(e.next=r),!t.line||!t.line.ids.includes(e.id))if(e.isInFlow()&&!e.inFlexBox()){var o=t.getBoxState(wt,e);if(e.isBr)return mt=!0;t.line&&t.line.canIEnter(e)&&!o&&!mt?t.line.add(e):(mt=!1,(new et).bind(e)),wt=e}else e.inFlexBox()?t.line&&(t.line.canIEnter(e)||"nowrap"==i.flexWrap)?t.line.add(e):(new nt).bind(e):e.isFixed?t.root.fixedLine?t.root.fixedLine.fixedAdd(e):(new et).fixedBind(e):t.fixedLine?t.fixedLine.fixedAdd(e):(new et).fixedBind(e,1)})),this.lines&&(bt=this.lines.reduce((function(t,e){return t+e.height}),0))}var St=0,zt=0;if(!g&&(this.isAbsolute||this.isFixed)&&X){var It=k==ft?X:this.root.width,Mt=It-($(c)?W(c,It):c)-($(u)?W(u,It):u);St=i.left?Mt:this.lineMaxWidth}if(!m&&(null!=l?l:this.isAbsolute||this.isFixed&&_)){var kt=k==ft?_:this.root.height,Bt=kt-($(l)?W(l,kt):l)-($(d)?W(d,kt):d);zt=i.top?Bt:0}if(g&&!$(g)||at.width||(at.width=St||this.contrastSize((this.isBlock(this)&&!this.isInFlow()?X||o.lineMaxWidth:this.lineMaxWidth)||this.lineMaxWidth,v,y),this.layoutBoxUpdate(at,i,0)),m||!bt&&!zt||(at.height=zt||this.contrastSize(bt,x,b),this.layoutBoxUpdate(at,i)),i.borderRadius&&this.borderSize&&this.borderSize.width)for(var q in i.borderRadius)Object.hasOwnProperty.call(i.borderRadius,q)&&(i.borderRadius[q]=W(i.borderRadius[q],this.borderSize.width));return this.layoutBox},e.layout=function(){return this.getBoxWidthHeight(),this.root.offsetSize=this.offsetSize,this.root.contentSize=this.contentSize,this.getBoxPosition(),this.offsetSize},t}(),vt=function(){var t,e,i,n,r,o,s=[0,11,15,19,23,27,31,16,18,20,22,24,26,28,20,22,24,24,26,28,28,22,24,24,26,26,28,28,24,24,26,26,26,28,28,24,26,26,26,28,28],a=[3220,1468,2713,1235,3062,1890,2119,1549,2344,2936,1117,2583,1330,2470,1667,2249,2028,3780,481,4011,142,3098,831,3445,592,2517,1776,2234,1951,2827,1070,2660,1345,3177],h=[30660,29427,32170,30877,26159,25368,27713,26998,21522,20773,24188,23371,17913,16590,20375,19104,13663,12392,16177,14854,9396,8579,11994,11245,5769,5054,7399,6608,1890,597,3340,2107],c=[1,0,19,7,1,0,16,10,1,0,13,13,1,0,9,17,1,0,34,10,1,0,28,16,1,0,22,22,1,0,16,28,1,0,55,15,1,0,44,26,2,0,17,18,2,0,13,22,1,0,80,20,2,0,32,18,2,0,24,26,4,0,9,16,1,0,108,26,2,0,43,24,2,2,15,18,2,2,11,22,2,0,68,18,4,0,27,16,4,0,19,24,4,0,15,28,2,0,78,20,4,0,31,18,2,4,14,18,4,1,13,26,2,0,97,24,2,2,38,22,4,2,18,22,4,2,14,26,2,0,116,30,3,2,36,22,4,4,16,20,4,4,12,24,2,2,68,18,4,1,43,26,6,2,19,24,6,2,15,28,4,0,81,20,1,4,50,30,4,4,22,28,3,8,12,24,2,2,92,24,6,2,36,22,4,6,20,26,7,4,14,28,4,0,107,26,8,1,37,22,8,4,20,24,12,4,11,22,3,1,115,30,4,5,40,24,11,5,16,20,11,5,12,24,5,1,87,22,5,5,41,24,5,7,24,30,11,7,12,24,5,1,98,24,7,3,45,28,15,2,19,24,3,13,15,30,1,5,107,28,10,1,46,28,1,15,22,28,2,17,14,28,5,1,120,30,9,4,43,26,17,1,22,28,2,19,14,28,3,4,113,28,3,11,44,26,17,4,21,26,9,16,13,26,3,5,107,28,3,13,41,26,15,5,24,30,15,10,15,28,4,4,116,28,17,0,42,26,17,6,22,28,19,6,16,30,2,7,111,28,17,0,46,28,7,16,24,30,34,0,13,24,4,5,121,30,4,14,47,28,11,14,24,30,16,14,15,30,6,4,117,30,6,14,45,28,11,16,24,30,30,2,16,30,8,4,106,26,8,13,47,28,7,22,24,30,22,13,15,30,10,2,114,28,19,4,46,28,28,6,22,28,33,4,16,30,8,4,122,30,22,3,45,28,8,26,23,30,12,28,15,30,3,10,117,30,3,23,45,28,4,31,24,30,11,31,15,30,7,7,116,30,21,7,45,28,1,37,23,30,19,26,15,30,5,10,115,30,19,10,47,28,15,25,24,30,23,25,15,30,13,3,115,30,2,29,46,28,42,1,24,30,23,28,15,30,17,0,115,30,10,23,46,28,10,35,24,30,19,35,15,30,17,1,115,30,14,21,46,28,29,19,24,30,11,46,15,30,13,6,115,30,14,23,46,28,44,7,24,30,59,1,16,30,12,7,121,30,12,26,47,28,39,14,24,30,22,41,15,30,6,14,121,30,6,34,47,28,46,10,24,30,2,64,15,30,17,4,122,30,29,14,46,28,49,10,24,30,24,46,15,30,4,18,122,30,13,32,46,28,48,14,24,30,42,32,15,30,20,4,117,30,40,7,47,28,43,22,24,30,10,67,15,30,19,6,118,30,18,31,47,28,34,34,24,30,20,61,15,30],f=[255,0,1,25,2,50,26,198,3,223,51,238,27,104,199,75,4,100,224,14,52,141,239,129,28,193,105,248,200,8,76,113,5,138,101,47,225,36,15,33,53,147,142,218,240,18,130,69,29,181,194,125,106,39,249,185,201,154,9,120,77,228,114,166,6,191,139,98,102,221,48,253,226,152,37,179,16,145,34,136,54,208,148,206,143,150,219,189,241,210,19,92,131,56,70,64,30,66,182,163,195,72,126,110,107,58,40,84,250,133,186,61,202,94,155,159,10,21,121,43,78,212,229,172,115,243,167,87,7,112,192,247,140,128,99,13,103,74,222,237,49,197,254,24,227,165,153,119,38,184,180,124,17,68,146,217,35,32,137,46,55,63,209,91,149,188,207,205,144,135,151,178,220,252,190,97,242,86,211,171,20,42,93,158,132,60,57,83,71,109,65,162,31,45,67,216,183,123,164,118,196,23,73,236,127,12,111,246,108,161,59,82,41,157,85,170,251,96,134,177,187,204,62,90,203,89,95,176,156,169,160,81,11,245,22,235,122,117,44,215,79,174,213,233,230,231,173,232,116,214,244,234,168,80,88,175],l=[1,2,4,8,16,32,64,128,29,58,116,232,205,135,19,38,76,152,45,90,180,117,234,201,143,3,6,12,24,48,96,192,157,39,78,156,37,74,148,53,106,212,181,119,238,193,159,35,70,140,5,10,20,40,80,160,93,186,105,210,185,111,222,161,95,190,97,194,153,47,94,188,101,202,137,15,30,60,120,240,253,231,211,187,107,214,177,127,254,225,223,163,91,182,113,226,217,175,67,134,17,34,68,136,13,26,52,104,208,189,103,206,129,31,62,124,248,237,199,147,59,118,236,197,151,51,102,204,133,23,46,92,184,109,218,169,79,158,33,66,132,21,42,84,168,77,154,41,82,164,85,170,73,146,57,114,228,213,183,115,230,209,191,99,198,145,63,126,252,229,215,179,123,246,241,255,227,219,171,75,150,49,98,196,149,55,110,220,165,87,174,65,130,25,50,100,200,141,7,14,28,56,112,224,221,167,83,166,81,162,89,178,121,242,249,239,195,155,43,86,172,69,138,9,18,36,72,144,61,122,244,245,247,243,251,235,203,139,11,22,44,88,176,125,250,233,207,131,27,54,108,216,173,71,142,0],d=[],u=[],p=[],g=[],v=[],y=2;function x(t,e){var i;t>e&&(i=t,t=e,e=i),i=e,i*=e,i+=e,i>>=1,g[i+=t]=1}function b(t,i){var n;for(p[t+e*i]=1,n=-2;n<2;n++)p[t+n+e*(i-2)]=1,p[t-2+e*(i+n+1)]=1,p[t+2+e*(i+n)]=1,p[t+n+1+e*(i+2)]=1;for(n=0;n<2;n++)x(t-1,i+n),x(t+1,i-n),x(t-n,i-1),x(t+n,i+1)}function w(t){for(;t>=255;)t=((t-=255)>>8)+(255&t);return t}var m=[];function S(t,e,i,n){var r,o,s;for(r=0;r<n;r++)d[i+r]=0;for(r=0;r<e;r++){if(255!=(s=f[d[t+r]^d[i]]))for(o=1;o<n;o++)d[i+o-1]=d[i+o]^l[w(s+m[n-o])];else for(o=i;o<i+n;o++)d[o]=d[o+1];d[i+n-1]=255==s?0:l[w(s+m[0])]}}function z(t,e){var i;return t>e&&(i=t,t=e,e=i),i=e,i+=e*e,i>>=1,g[i+=t]}function I(t){var i,n,r,o;switch(t){case 0:for(n=0;n<e;n++)for(i=0;i<e;i++)i+n&1||z(i,n)||(p[i+n*e]^=1);break;case 1:for(n=0;n<e;n++)for(i=0;i<e;i++)1&n||z(i,n)||(p[i+n*e]^=1);break;case 2:for(n=0;n<e;n++)for(r=0,i=0;i<e;i++,r++)3==r&&(r=0),r||z(i,n)||(p[i+n*e]^=1);break;case 3:for(o=0,n=0;n<e;n++,o++)for(3==o&&(o=0),r=o,i=0;i<e;i++,r++)3==r&&(r=0),r||z(i,n)||(p[i+n*e]^=1);break;case 4:for(n=0;n<e;n++)for(r=0,o=n>>1&1,i=0;i<e;i++,r++)3==r&&(r=0,o=!o),o||z(i,n)||(p[i+n*e]^=1);break;case 5:for(o=0,n=0;n<e;n++,o++)for(3==o&&(o=0),r=0,i=0;i<e;i++,r++)3==r&&(r=0),(i&n&1)+!(!r|!o)||z(i,n)||(p[i+n*e]^=1);break;case 6:for(o=0,n=0;n<e;n++,o++)for(3==o&&(o=0),r=0,i=0;i<e;i++,r++)3==r&&(r=0),(i&n&1)+(r&&r==o)&1||z(i,n)||(p[i+n*e]^=1);break;case 7:for(o=0,n=0;n<e;n++,o++)for(3==o&&(o=0),r=0,i=0;i<e;i++,r++)3==r&&(r=0),(r&&r==o)+(i+n&1)&1||z(i,n)||(p[i+n*e]^=1)}}function M(t){var e,i=0;for(e=0;e<=t;e++)v[e]>=5&&(i+=3+v[e]-5);for(e=3;e<t-1;e+=2)v[e-2]==v[e+2]&&v[e+2]==v[e-1]&&v[e-1]==v[e+1]&&3*v[e-1]==v[e]&&(0==v[e-3]||e+3>t||3*v[e-3]>=4*v[e]||3*v[e+3]>=4*v[e])&&(i+=40);return i}function k(){var t,i,n,r,o,s=0,a=0;for(i=0;i<e-1;i++)for(t=0;t<e-1;t++)(p[t+e*i]&&p[t+1+e*i]&&p[t+e*(i+1)]&&p[t+1+e*(i+1)]||!(p[t+e*i]||p[t+1+e*i]||p[t+e*(i+1)]||p[t+1+e*(i+1)]))&&(s+=3);for(i=0;i<e;i++){for(v[0]=0,n=r=t=0;t<e;t++)(o=p[t+e*i])==r?v[n]++:v[++n]=1,a+=(r=o)?1:-1;s+=M(n)}a<0&&(a=-a);var h=a,c=0;for(h+=h<<2,h<<=1;h>e*e;)h-=e*e,c++;for(s+=10*c,t=0;t<e;t++){for(v[0]=0,n=r=i=0;i<e;i++)(o=p[t+e*i])==r?v[n]++:v[++n]=1,r=o;s+=M(n)}return s}var B=null;return{api:{get ecclevel(){return y},set ecclevel(t){y=t},get size(){return _size},set size(t){_size=t},get canvas(){return B},set canvas(t){B=t},getFrame:function(v){return function(v){var M,B,W,P,O,T,L,R;P=v.length,t=0;do{if(t++,W=4*(y-1)+16*(t-1),i=c[W++],n=c[W++],r=c[W++],o=c[W],P<=(W=r*(i+n)+n-3+(t<=9)))break}while(t<40);for(e=17+4*t,O=r+(r+o)*(i+n)+n,P=0;P<O;P++)u[P]=0;for(d=v.slice(0),P=0;P<e*e;P++)p[P]=0;for(P=0;P<(e*(e+1)+1)/2;P++)g[P]=0;for(P=0;P<3;P++){for(W=0,B=0,1==P&&(W=e-7),2==P&&(B=e-7),p[B+3+e*(W+3)]=1,M=0;M<6;M++)p[B+M+e*W]=1,p[B+e*(W+M+1)]=1,p[B+6+e*(W+M)]=1,p[B+M+1+e*(W+6)]=1;for(M=1;M<5;M++)x(B+M,W+1),x(B+1,W+M+1),x(B+5,W+M),x(B+M+1,W+5);for(M=2;M<4;M++)p[B+M+e*(W+2)]=1,p[B+2+e*(W+M+1)]=1,p[B+4+e*(W+M)]=1,p[B+M+1+e*(W+4)]=1}if(t>1)for(P=s[t],B=e-7;;){for(M=e-7;M>P-3&&(b(M,B),!(M<P));)M-=P;if(B<=P+9)break;b(6,B-=P),b(B,6)}for(p[8+e*(e-8)]=1,B=0;B<7;B++)x(7,B),x(e-8,B),x(7,B+e-7);for(M=0;M<8;M++)x(M,7),x(M+e-8,7),x(M,e-8);for(M=0;M<9;M++)x(M,8);for(M=0;M<8;M++)x(M+e-8,8),x(8,M);for(B=0;B<7;B++)x(8,B+e-7);for(M=0;M<e-14;M++)1&M?(x(8+M,6),x(6,8+M)):(p[8+M+6*e]=1,p[6+e*(8+M)]=1);if(t>6)for(P=a[t-7],W=17,M=0;M<6;M++)for(B=0;B<3;B++,W--)1&(W>11?t>>W-12:P>>W)?(p[5-M+e*(2-B+e-11)]=1,p[2-B+e-11+e*(5-M)]=1):(x(5-M,2-B+e-11),x(2-B+e-11,5-M));for(B=0;B<e;B++)for(M=0;M<=B;M++)p[M+e*B]&&x(M,B);for(O=d.length,T=0;T<O;T++)u[T]=d.charCodeAt(T);if(d=u.slice(0),O>=(M=r*(i+n)+n)-2&&(O=M-2,t>9&&O--),T=O,t>9){for(d[T+2]=0,d[T+3]=0;T--;)P=d[T],d[T+3]|=255&P<<4,d[T+2]=P>>4;d[2]|=255&O<<4,d[1]=O>>4,d[0]=64|O>>12}else{for(d[T+1]=0,d[T+2]=0;T--;)P=d[T],d[T+2]|=255&P<<4,d[T+1]=P>>4;d[1]|=255&O<<4,d[0]=64|O>>4}for(T=O+3-(t<10);T<M;)d[T++]=236,d[T++]=17;for(m[0]=1,T=0;T<o;T++){for(m[T+1]=1,L=T;L>0;L--)m[L]=m[L]?m[L-1]^l[w(f[m[L]]+T)]:m[L-1];m[0]=l[w(f[m[0]]+T)]}for(T=0;T<=o;T++)m[T]=f[m[T]];for(W=M,B=0,T=0;T<i;T++)S(B,r,W,o),B+=r,W+=o;for(T=0;T<n;T++)S(B,r+1,W,o),B+=r+1,W+=o;for(B=0,T=0;T<r;T++){for(L=0;L<i;L++)u[B++]=d[T+L*r];for(L=0;L<n;L++)u[B++]=d[i*r+T+L*(r+1)]}for(L=0;L<n;L++)u[B++]=d[i*r+T+L*(r+1)];for(T=0;T<o;T++)for(L=0;L<i+n;L++)u[B++]=d[M+T+L*o];for(d=u,M=B=e-1,W=O=1,R=(r+o)*(i+n)+n,T=0;T<R;T++)for(P=d[T],L=0;L<8;L++,P<<=1){128&P&&(p[M+e*B]=1);do{O?M--:(M++,W?0!=B?B--:(W=!W,6==(M-=2)&&(M--,B=9)):B!=e-1?B++:(W=!W,6==(M-=2)&&(M--,B-=8))),O=!O}while(z(M,B))}for(d=p.slice(0),P=0,B=3e4,W=0;W<8&&(I(W),(M=k())<B&&(B=M,P=W),7!=P);W++)p=d.slice(0);for(P!=W&&I(P),B=h[P+(y-1<<3)],W=0;W<8;W++,B>>=1)1&B&&(p[e-1-W+8*e]=1,W<6?p[8+e*W]=1:p[8+e*(W+1)]=1);for(W=0;W<7;W++,B>>=1)1&B&&(p[8+e*(e-7+W)]=1,W?p[6-W+8*e]=1:p[7+8*e]=1);return p}(v)},utf16to8:function(t){var e,i,n,r;for(e="",n=t.length,i=0;i<n;i++)(r=t.charCodeAt(i))>=1&&r<=127?e+=t.charAt(i):r>2047?(e+=String.fromCharCode(224|r>>12&15),e+=String.fromCharCode(128|r>>6&63),e+=String.fromCharCode(128|r>>0&63)):(e+=String.fromCharCode(192|r>>6&31),e+=String.fromCharCode(128|r>>0&63));return e},draw:function(t,i,n,r,o){i.drawView(n,r);var s=i.ctx,a=n.contentSize,h=a.width,c=a.height,f=a.left,l=a.top;r.borderRadius,r.backgroundColor;var d=r.color,u=void 0===d?"#000000":d;r.border,n.contentSize.left,n.borderSize.left,n.contentSize.top,n.borderSize.top;if(y=o||y,s){s.save(),i.setOpacity(r),i.setTransform(n,r);var p=Math.min(h,c);t=this.utf16to8(t);var g=this.getFrame(t),v=p/e;s.setFillStyle(u);for(var x=0;x<e;x++)for(var b=0;b<e;b++)g[b*e+x]&&s.fillRect(f+v*x,l+v*b,v,v);s.restore(),i.setBorder(n,r)}else console.warn("No canvas provided to draw QR code in!")}}}}(),yt=p,xt=u,bt=g,wt=d,mt=f.TOP,St=f.MIDDLE,zt=f.BOTTOM,It=l.LEFT,Mt=l.CENTER,kt=l.RIGHT,Bt=function(){function r(t){var e,i,r=this;this.v="1.9.5.1",this.id=null,this.pixelRatio=1,this.width=0,this.height=0,this.sleep=1e3/30,this.count=0,this.isRate=!1,this.isDraw=!0,this.isCache=!0,this.fixed="",this.useCORS=!1,this.performance=!1,this.imageBus=[],this.createImage=function(t,e){return new Promise((function(i,n){var o=null;window||r.canvas.createImage?(o=r.canvas&&r.canvas.createImage?r.canvas.createImage():new Image,e&&o.setAttribute("crossOrigin","Anonymous"),o.src=t,o.onload=function(){i({width:o.naturalWidth||o.width,height:o.naturalHeight||o.height,path:o,src:this.src})},o.onerror=function(t){n(t)}):n({fail:"getImageInfo fail",src:t})}))},this.options=t,Object.assign(this,t),this.ctx=(e=t.context,i={get:function(t,i){if("setFonts"===i)return function(t){var i=t.fontFamily,r=void 0===i?"sans-serif":i,o=t.fontSize,s=void 0===o?14:o,a=t.fontWeight,h=void 0===a?"normal":a,c=t.fontStyle,f=void 0===c?"normal":c;I==n.MP_TOUTIAO&&(h="bold"==h?"bold":"",f="italic"==f?"italic":""),e.font="".concat(f," ").concat(h," ").concat(Math.round(s),"px ").concat(r)};if(!e.draw||!e.setFillStyle){if("setFillStyle"===i)return function(t){e.fillStyle=t};if("setStrokeStyle"===i)return function(t){e.strokeStyle=t};if("setLineWidth"===i)return function(t){e.lineWidth=t};if("setLineCap"===i)return function(t){e.lineCap=t};if("setFontSize"===i)return function(t){e.font="".concat(String(t),"px sans-serif")};if("setGlobalAlpha"===i)return function(t){e.globalAlpha=t};if("setLineJoin"===i)return function(t){e.lineJoin=t};if("setTextAlign"===i)return function(t){e.textAlign=t};if("setMiterLimit"===i)return function(t){e.miterLimit=t};if("setShadow"===i)return function(t,i,n,r){e.shadowOffsetX=t,e.shadowOffsetY=i,e.shadowBlur=n,e.shadowColor=r};if("setTextBaseline"===i)return function(t){e.textBaseline=t};if("createCircularGradient"===i)return function(){};if("draw"===i)return function(){};if("function"==typeof e[i])return function(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return e[i].apply(e,t)}}return t[i]},set:function(t,i,n){return e[i]=n,!0}},new Proxy(e,i)),this.progress=0,this.root={width:t.width,height:t.height,fontSizeRate:1,fixedLine:null},this.size=this.root;var o=0;Object.defineProperty(this,"progress",{configurable:!0,set:function(t){o=t,r.lifecycle("onProgress",t/r.count)},get:function(){return o||0}})}return r.prototype.lifecycle=function(t,e){this.options.listen&&this.options.listen[t]&&this.options.listen[t](e)},r.prototype.setContext=function(t){t&&(this.ctx=t)},r.prototype.init=function(){if(this.canvas.height||n.WEB==I){this.ctx.setTransform(1,0,0,1,0,0);var t=this.size.height*this.pixelRatio,e=this.size.width*this.pixelRatio;this.canvas.height=t,this.canvas.width=e,this.ctx.scale(this.pixelRatio,this.pixelRatio)}},r.prototype.clear=function(){this.ctx.clearRect(0,0,this.size.width,this.size.height)},r.prototype.clipPath=function(t,e,i,n,r,o,s){void 0===o&&(o=!1),void 0===s&&(s=!1);var a=this.ctx;if(/polygon/.test(r)){var h=r.match(/-?\d+(rpx|px|%)?\s+-?\d+(rpx|px|%)?/g)||[];a.beginPath(),h.map((function(r){var o=r.split(" "),s=o[0],a=o[1];return[W(s,i)+t,W(a,n)+e]})).forEach((function(t,e){0==e?a.moveTo(t[0],t[1]):a.lineTo(t[0],t[1])})),a.closePath(),s&&a.stroke(),o&&a.fill()}},r.prototype.roundRect=function(t,e,i,n,r,o,s){if(void 0===o&&(o=!1),void 0===s&&(s=!1),!(r<0)){var a=this.ctx;if(a.beginPath(),r){var h=r||{},c=h.borderTopLeftRadius,f=void 0===c?r||0:c,l=h.borderTopRightRadius,d=void 0===l?r||0:l,u=h.borderBottomRightRadius,p=void 0===u?r||0:u,g=h.borderBottomLeftRadius,v=void 0===g?r||0:g;a.arc(t+i-p,e+n-p,p,0,.5*Math.PI),a.lineTo(t+v,e+n),a.arc(t+v,e+n-v,v,.5*Math.PI,Math.PI),a.lineTo(t,e+f),a.arc(t+f,e+f,f,Math.PI,1.5*Math.PI),a.lineTo(t+i-d,e),a.arc(t+i-d,e+d,d,1.5*Math.PI,2*Math.PI),a.lineTo(t+i,e+n-p)}else a.rect(t,e,i,n);a.closePath(),s&&a.stroke(),o&&a.fill()}},r.prototype.setTransform=function(t,e){var i=e.transform,n=e.transformOrigin,r=this.ctx,o=i||{},s=o.scaleX,a=void 0===s?1:s,h=o.scaleY,c=void 0===h?1:h,f=o.translateX,l=void 0===f?0:f,d=o.translateY,u=void 0===d?0:d,p=o.rotate,g=void 0===p?0:p,v=o.skewX,y=void 0===v?0:v,x=o.skewY,b=void 0===x?0:x,w=t.left,m=t.top,S=t.width,z=t.height;l=W(l,S)||0,u=W(u,z)||0;var I=W("0%",1),M=W("50%",1),k=W("100%",1),P={top:I,center:M,bottom:k},O={left:I,center:M,right:k};if(n=n.split(" ").filter((function(t,e){return e<2})).reduce((function(t,e){if(/\d+/.test(e)){var i=W(e,1)/(/px|rpx$/.test(e)?B(t.x)?z:S:1);return B(t.x)?Object.assign(t,{y:i}):Object.assign(t,{x:i})}return B(O[e])&&!B(t.x)?Object.assign(t,{x:O[e]}):Object.assign(t,{y:P[e]||.5})}),{}),(l||u)&&r.translate(l,u),(a||c)&&r.scale(a,c),g){var T=w+S*n.x,L=m+z*n.y;r.translate(T,L),r.rotate(g*Math.PI/180),r.translate(-T,-L)}(y||b)&&r.transform(1,Math.tan(b*Math.PI/180),Math.tan(y*Math.PI/180),1,0,0)},r.prototype.setBackground=function(t,e,i,r,o){var s=this.ctx;t&&"transparent"!=t?T(t)?L(t,e,i,r,o,s):s.setFillStyle(t):[n.MP_TOUTIAO,n.MP_BAIDU].includes(I)?s.setFillStyle("rgba(0,0,0,0)"):s.setFillStyle("transparent")},r.prototype.setShadow=function(t){var e=t.boxShadow,i=void 0===e?[]:e,n=this.ctx;if(i.length){var r=i[0],o=i[1],s=i[2],a=i[3];n.setShadow(r,o,s,a)}},r.prototype.setBorder=function(t,e){var i=this.ctx,n=t.width,r=t.height,o=t.left,s=t.top,a=e.border,h=e.borderBottom,c=e.borderTop,f=e.borderRight,l=e.borderLeft,d=e.borderRadius,u=e.lineCap,p=a||{},g=p.borderWidth,v=void 0===g?0:g,y=p.borderStyle,x=p.borderColor,b=h||{},w=b.borderBottomWidth,m=void 0===w?v:w,S=b.borderBottomStyle,z=void 0===S?y:S,M=b.borderBottomColor,k=void 0===M?x:M,B=c||{},W=B.borderTopWidth,P=void 0===W?v:W,O=B.borderTopStyle,T=void 0===O?y:O,L=B.borderTopColor,R=void 0===L?x:L,F=f||{},A=F.borderRightWidth,j=void 0===A?v:A,E=F.borderRightStyle,C=void 0===E?y:E,H=F.borderRightColor,D=void 0===H?x:H,$=l||{},Y=$.borderLeftWidth,U=void 0===Y?v:Y,N=$.borderLeftStyle,X=void 0===N?y:N,_=$.borderLeftColor,q=void 0===_?x:_,G=d||{},V=G.borderTopLeftRadius,J=void 0===V?d||0:V,Q=G.borderTopRightRadius,Z=void 0===Q?d||0:Q,K=G.borderBottomRightRadius,tt=void 0===K?d||0:K,et=G.borderBottomLeftRadius,it=void 0===et?d||0:et;if(h||l||c||f||a){var nt=function(t,e,n){"dashed"==e?/mp/.test(I)?i.setLineDash([Math.ceil(4*t/3),Math.ceil(4*t/3)]):i.setLineDash([Math.ceil(6*t),Math.ceil(6*t)]):"dotted"==e&&i.setLineDash([t,t]),i.setStrokeStyle(n)},rt=function(t,e,n,r,o,s,a,h,c,f,l,d,p,g,v){i.save(),i.setLineCap(v?"square":u),i.setLineWidth(d),nt(d,p,g),i.beginPath(),i.arc(t,e,a,Math.PI*c,Math.PI*f),i.lineTo(n,r),i.arc(o,s,h,Math.PI*f,Math.PI*l),i.stroke(),i.restore()};if(i.save(),a&&!h&&!l&&!c&&!f)return i.setLineWidth(v),nt(v,y,x),this.roundRect(o,s,n,r,d,!1,!!x),void i.restore();m&&rt(o+n-tt,s+r-tt,o+it,s+r,o+it,s+r-it,tt,it,.25,.5,.75,m,z,k,U&&j),U&&rt(o+it,s+r-it,o,s+J,o+J,s+J,it,J,.75,1,1.25,U,X,q,P&&m),P&&rt(o+J,s+J,o+n-Z,s,o+n-Z,s+Z,J,Z,1.25,1.5,1.75,P,T,R,U&&j),j&&rt(o+n-Z,s+Z,o+n,s+r-tt,o+n-tt,s+r-tt,Z,tt,1.75,2,.25,j,C,D,P&&m)}},r.prototype.setOpacity=function(t){var e=t.opacity,i=void 0===e?1:e;this.ctx.setGlobalAlpha(i)},r.prototype.drawPattern=function(t,n,r){return e(this,void 0,void 0,(function(){var e=this;return i(this,(function(i){return[2,new Promise((function(i,o){e.drawView(n,r,!0,!1,!0);var s=e,a=s.ctx;s.canvas;var h=n.width,c=n.height,f=n.left,l=n.top,d=r||{},u=d.borderRadius,p=void 0===u?0:u,g=d.backgroundImage,v=d.backgroundRepeat,y=void 0===v?"repeat":v;g&&function(t){var o=a.createPattern(t.src,y);a.setFillStyle(o),e.roundRect(f,l,h,c,p,!0,!1),e.setBorder(n,r),i()}(t)}))]}))}))},r.prototype.drawView=function(t,e,i,n,r){void 0===i&&(i=!0),void 0===n&&(n=!0),void 0===r&&(r=!0);var o=this.ctx,s=t.width,a=t.height,h=t.left,c=t.top,f=e||{},l=f.borderRadius,d=void 0===l?0:l,u=f.backgroundColor,p=void 0===u?"transparent":u,g=f.overflow;e.opacity&&this.setOpacity(e),this.setTransform(t,e),r&&(o.save(),this.setShadow(e)),i&&this.setBackground(p,s,a,h,c),e.clipPath?this.clipPath(h,c,s,a,e.clipPath,i,!1):this.roundRect(h,c,s,a,d,i,!1),r&&o.restore(),n&&this.setBorder(t,e),"hidden"==g&&o.clip()},r.prototype.drawImage=function(t,r,o,s){return void 0===r&&(r={}),void 0===o&&(o={}),void 0===s&&(s=!0),e(this,void 0,void 0,(function(){var a=this;return i(this,(function(h){switch(h.label){case 0:return[4,new Promise((function(h,c){return e(a,void 0,void 0,(function(){var e,a,c,f,l,d,u,p,g,v,y,x,b,w,m,S,z,M,k,B,T,L=this;return i(this,(function(i){return e=this.ctx,a=o.borderRadius,c=void 0===a?0:a,f=o.backgroundColor,l=void 0===f?"transparent":f,d=o.objectFit,u=void 0===d?"fill":d,p=o.backgroundSize,g=void 0===p?"fill":p,v=o.objectPosition,y=o.backgroundPosition,x=o.boxShadow,o.backgroundImage&&(u=g,v=y),x&&this.drawView(r,Object.assign(o,{backgroundColor:l||x&&(l||"#ffffff")}),!0,!1,!0),b=r.width,w=r.height,m=r.left,S=r.top,e.save(),z=r.contentSize.left-r.borderSize.left,M=r.contentSize.top-r.borderSize.top,s||(this.setOpacity(o),this.setTransform(r,o),this.setBackground(l,b,w,m,S),this.roundRect(m,S,b,w,c,!!(c||!x&&l),!1)),m+=z,S+=M,e.clip(),k=function(t){if("fill"!==u){var i=function(t,e,i){var n=t.objectFit,r=t.objectPosition,o=e.width/e.height,s=i.width/i.height,a=1,h="contain",c="cover";n==h&&o>=s||n==c&&o<s?a=e.height/i.height:(n==h&&o<s||n==c&&o>=s)&&(a=e.width/i.width);var f=i.width*a,l=i.height*a,d=r||[],u=d[0],p=d[1],g=O(u)?W(u,e.width):(e.width-f)*(P(u)?W(u,1):{left:0,center:.5,right:1}[u||"center"]),v=O(p)?W(p,e.height):(e.height-l)*(P(p)?W(p,1):{top:0,center:.5,bottom:1}[p||"center"]),y=function(t,e){return[(t-g)/a,(e-v)/a]},x=y(0,0),b=x[0],w=x[1],m=y(e.width,e.height),S=m[0],z=m[1],I=Math.max,M=Math.min;return{sx:I(b,0),sy:I(w,0),sw:M(S-b,i.width),sh:M(z-w,i.height),dx:I(g,0),dy:I(v,0),dw:M(f,e.width),dh:M(l,e.height)}}({objectFit:u,objectPosition:v},r.contentSize,t),o=i.sx,s=i.sy,a=i.sh,h=i.sw,c=i.dx,f=i.dy,l=i.dh,d=i.dw;I==n.MP_BAIDU?e.drawImage(t.src,c+m,f+S,d,l,o,s,h,a):e.drawImage(t.src,o,s,h,a,c+m,f+S,d,l)}else e.drawImage(t.src,m,S,b,w)},B=function(){e.restore(),L.drawView(r,o,!1,!0,!1),h(1)},T=function(t){k(t),B()},T(t),[2]}))}))}))];case 1:return h.sent(),[2]}}))}))},r.prototype.drawText=function(t,e,i,n){var r=this,o=this.ctx,s=e.borderSize,a=e.contentSize,h=e.left,c=e.top,f=a.width,l=a.height,d=a.left-s.left||0,u=a.top-s.top||0,p=i.color,g=i.lineHeight,v=i.fontSize,y=i.fontWeight,x=i.fontFamily,b=i.fontStyle,w=i.textIndent,m=void 0===w?0:w,S=i.textAlign,z=i.textStroke,I=i.verticalAlign,M=void 0===I?St:I,k=i.backgroundColor,P=i.lineClamp,O=i.backgroundClip,T=i.textShadow,L=i.textDecoration;if(m=B(m)?m:0,this.drawView(e,i,O!=xt),g=W(g,v),t){o.save(),h+=d,c+=u;var R=n.fontHeight,F=n.descent,A=void 0===F?0:F,j=n.ascent,E=A+(void 0===j?0:j);switch(o.setFonts({fontFamily:x,fontSize:v,fontWeight:y,fontStyle:b}),o.setTextBaseline(St),o.setTextAlign(S),O?this.setBackground(k,f,l,h,c):o.setFillStyle(p),S){case It:break;case Mt:h+=.5*f;break;case kt:h+=f}var C=n.lines*g,H=Math.ceil((l-C)/2);switch(H<0&&(H=0),M){case mt:break;case St:c+=H;break;case zt:c+=2*H}var D=(g-R)/2,$=g/2,Y=function(t){var e=o.measureText(t),i=e.actualBoundingBoxDescent,n=void 0===i?0:i,r=e.actualBoundingBoxAscent;return M==mt?{fix:E?void 0===r?0:r:$-D/2,lineY:E?0:D-D/2}:M==St?{fix:E?$+n/4:$,lineY:E?0:D}:M==zt?{fix:E?g-n:$+D/2,lineY:E?2*D:D+D/2}:{fix:0,height:0,lineY:0}},U=function(t,e,i){var r=t;switch(S){case It:r+=i;break;case Mt:r=(t-=i/2)+i;break;case kt:r=t,t-=i}if(L){o.setLineWidth(v/13),o.beginPath();var s=.1*n.fontHeight;/\bunderline\b/.test(L)&&(o.moveTo(t,e+n.fontHeight+s),o.lineTo(r,e+n.fontHeight+s)),/\boverline\b/.test(L)&&(o.moveTo(t,e-s),o.lineTo(r,e-s)),/\bline-through\b/.test(L)&&(o.moveTo(t,e+.5*n.fontHeight),o.lineTo(r,e+.5*n.fontHeight)),o.closePath(),o.setStrokeStyle(p),o.stroke()}},N=function(t,e,i){var n=function(){o.setLineWidth(z.width),o.setStrokeStyle(z.color),o.strokeText(t,e,i)},s="outset";z&&z.type!==s?(o.save(),r.setShadow({boxShadow:T}),o.fillText(t,e,i),o.restore(),n()):z&&z.type==s?(o.save(),r.setShadow({boxShadow:T}),n(),o.restore(),o.save(),o.fillText(t,e,i),o.restore()):(r.setShadow({boxShadow:T}),o.fillText(t,e,i))};if(!n.widths||1==n.widths.length&&n.widths[0].total+m<=a.width){var X=Y(t),_=X.fix,q=void 0===_?0:_,G=X.lineY;return N(t,h+m,c+q),U(h+m,c+G,n&&n.widths&&n.widths[0].total||n.text),c+=g,o.restore(),void this.setBorder(e,i)}for(var V=c,J=h,Q="",Z=0,K=o.measureText("...").width,tt=n.widths,et=0;et<tt.length;et++){var it=tt[et].widths,nt=0;Q="",c+=1==(Z+=1)?0:g,1==Z&&m&&(nt=m,J=h+m);for(var rt=0;rt<it.length;rt++){1!==Z&&m&&(J=h);var ot=it[rt],st=ot.width,at=ot.text,ht=(it[rt+1]||{}).width;if(Q+=at,(nt+=st)+(void 0===ht?0:ht)+(0==Z?m:0)+(Z==P?K:0)>a.width){Z>=P&&(Q+="…"),Z++,nt=0;var ct=Y(Q);q=ct.fix,G=ct.lineY;N(Q,J,c+q),U(J,c+G,nt),c+=g,Q=""}else if(rt==it.length-1){et!=tt.length-1&&Z==P&&K+nt<a.width&&(Q+="…");var ft=Y(Q);q=ft.fix,G=ft.lineY;N(Q,J,c+q),U(J,c+G,nt)}if(c>V+l||Z>P)break}}o.restore()}},r.prototype.source=function(t){return e(this,void 0,void 0,(function(){var e,n,r,o,s=this;return i(this,(function(i){switch(i.label){case 0:if(this.node=null,e=+new Date,"{}"==JSON.stringify(t))return[2];if(t.styles=t.styles||t.css||{},!t.type)for(n in t.type=wt,t)["views","children","type","css","styles"].includes(n)||(t.styles[n]=t[n],delete t[n]);return t.styles.boxSizing||(t.styles.boxSizing="border-box"),[4,this.create(t)];case 1:return(r=i.sent())?(o=r.layout()||{},this.size=o,this.node=r,this.onEffectFinished().then((function(t){return s.lifecycle("onEffectSuccess",t)})).catch((function(t){return s.lifecycle("onEffectFail",t)})),this.performance&&console.log("布局用时："+(+new Date-e)+"ms"),[2,this.size]):[2,console.warn("no node")]}}))}))},r.prototype.getImageInfo=function(t){return this.imageBus[t]||(this.imageBus[t]=this.createImage(t,this.useCORS)),this.imageBus[t]},r.prototype.create=function(n,r){return e(this,void 0,void 0,(function(){function e(i,n,r){void 0===n&&(n={}),void 0===r&&(r=!0);var o=[];return i.forEach((function(i){var s=i.styles,a=void 0===s?{}:s,h=i.css,c=void 0===h?{}:h,f=i.children,l=void 0===f?[]:f,d=i.views,u=void 0===d?[]:d,p=i.text,g=void 0===p?"":p,v=i.type,y=void 0===v?"":v;!l&&u&&(i.children=l=u);var x={};x=t(t(r?t({},n):{},a),c);var b={},w={},m={};Object.keys(x).map((function(t){if(t.includes("padding")||t.includes("margin")){var e=J(t,x[t]);Object.keys(e).map((function(t){t.includes("Left")?w[t]=e[t]:t.includes("Right")?m[t]=e[t]:b[t]=e[t]}))}}));if(x.textIndent&&(w.textIndent=x.textIndent,delete n.textIndent),""!==g){var S=Array.from(g);S.forEach((function(t,e){var i=Object.assign({},x,b);0===e?Object.assign(i,w):e==S.length-1&&Object.assign(i,m),delete i.padding,delete i.margin,o.push({type:"text",text:t,styles:i})}))}if(y==yt||y==bt)o.push(i);else if("block"===a.display&&l.length>0){var z=e(l,x,!1);i.children=z,i.flattened=!0,o.push(i)}else if(l.length>0){z=e(l,x,r);o=o.concat(z)}})),o}var o,s,a,h,c,f,l,d,u,p,g,v,y,b,w,m,S,z,I,M,k,B,W,P;return i(this,(function(i){switch(i.label){case 0:if(!n)return[2];if(n.styles||(n.styles=n.css||{}),o=n.type,s=n.show,a=void 0===s||s,h=o==yt,c=[xt,bt].includes(o),f="textBox"==o,l=n.styles||{},d=l.backgroundImage,u=l.display,h&&!n.src&&!n.url)return[2];if(u==x||!a)return[2];if(c||f){if(p=n.children,g=n.views,!p&&g&&(n.children=p=g),!n.text&&(!p||p&&!p.length))return[2];p&&p.length&&!n.flattened&&(v=e(n.children||n.views),n.type="view",n.children=v)}if(!(h||n.type==wt&&d))return[3,4];y=h?n.src:"",b=/url\(['"]?(.*?)['"]?\)/.exec(d),d&&b&&b[1]&&(y=b[1]||""),i.label=1;case 1:return i.trys.push([1,3,,4]),[4,this.getImageInfo(y)];case 2:return w=i.sent(),m=w.width,S=w.height,!(z=w.path)&&h?[2]:(z&&(n.attributes=Object.assign(n.attributes||{},{width:m,height:S,path:z,src:z,naturalSrc:y})),[3,4]);case 3:return I=i.sent(),n.type!=wt?[2]:(this.lifecycle("onEffectFail",t(t({},I),{src:y})),[3,4]);case 4:if(this.count+=1,M=new gt(n,r,this.root,this.ctx),!(k=n.children||n.views))return[3,8];B=0,i.label=5;case 5:return B<k.length?(W=k[B],[4,this.create(W,M)]):[3,8];case 6:(P=i.sent())&&M.add(P),i.label=7;case 7:return B++,[3,5];case 8:return[2,M]}}))}))},r.prototype.drawNode=function(t,n){return void 0===n&&(n=!1),e(this,void 0,void 0,(function(){var e,r,o,s,a,h,c,f,l,d,u,p,g,v,y,x,b,w,m,S,z,I,M;return i(this,(function(i){switch(i.label){case 0:return e=t.layoutBox,r=t.computedStyle,o=t.attributes,s=t.name,a=t.children,h=t.fixedLine,c=t.attributes,f=c.src,l=c.text,d=r.position,u=r.backgroundImage,p=r.backgroundRepeat,["fixed"].includes(d)&&!n?[2]:(this.ctx.save(),s!==wt?[3,7]:f&&u?p?[4,this.drawPattern(o,e,r)]:[3,2]:[3,5]);case 1:return i.sent(),[3,4];case 2:return[4,this.drawImage(o,e,r,!1)];case 3:i.sent(),i.label=4;case 4:return[3,6];case 5:this.drawView(e,r),i.label=6;case 6:return[3,10];case 7:return s===yt&&f?[4,this.drawImage(o,e,r,!1)]:[3,9];case 8:return i.sent(),[3,10];case 9:s===xt?this.drawText(l,e,r,o):s===bt&&vt.api&&vt.api.draw(l,this,e,r),i.label=10;case 10:if(this.progress+=1,v=(g=h||{}).beforeElements,y=g.afterElements,!v)return[3,14];x=0,b=v,i.label=11;case 11:return x<b.length?(M=b[x],[4,this.drawNode(M)]):[3,14];case 12:i.sent(),i.label=13;case 13:return x++,[3,11];case 14:if(!a)return[3,18];w=Object.values?Object.values(a):Object.keys(a).map((function(t){return a[t]})),m=0,S=w,i.label=15;case 15:return m<S.length?"absolute"===(M=S[m]).computedStyle.position?[3,17]:[4,this.drawNode(M)]:[3,18];case 16:i.sent(),i.label=17;case 17:return m++,[3,15];case 18:if(!y)return[3,22];z=0,I=y,i.label=19;case 19:return z<I.length?(M=I[z],[4,this.drawNode(M)]):[3,22];case 20:i.sent(),i.label=21;case 21:return z++,[3,19];case 22:return this.ctx.restore(),[2]}}))}))},r.prototype.render=function(t){var n=this;return void 0===t&&(t=30),new Promise((function(r,o){return e(n,void 0,void 0,(function(){var e,n,s,a,h,c,f,l,d,u;return i(this,(function(i){switch(i.label){case 0:return e=+new Date,this.init(),[4,(p=t,void 0===p&&(p=0),new Promise((function(t){return setTimeout(t,p)})))];case 1:i.sent(),i.label=2;case 2:if(i.trys.push([2,14,,15]),!this.node)return[3,12];if(n=this.root.fixedLine||{},s=n.beforeElements,a=n.afterElements,!s)return[3,6];h=0,c=s,i.label=3;case 3:return h<c.length?(d=c[h],[4,this.drawNode(d,!0)]):[3,6];case 4:i.sent(),i.label=5;case 5:return h++,[3,3];case 6:return[4,this.drawNode(this.node)];case 7:if(i.sent(),!a)return[3,11];f=0,l=a,i.label=8;case 8:return f<l.length?(d=l[f],[4,this.drawNode(d,!0)]):[3,11];case 9:i.sent(),i.label=10;case 10:return f++,[3,8];case 11:return r(this.node),[3,13];case 12:this.lifecycle("onEffectFail","node is empty"),i.label=13;case 13:return[3,15];case 14:return u=i.sent(),this.lifecycle("onEffectFail",u),o(u),[3,15];case 15:return this.performance&&console.log("渲染用时："+(+new Date-e-30)+"ms"),[2]}var p}))}))}))},r.prototype.onEffectFinished=function(){var t=this,e=Object.keys(this.imageBus).map((function(e){return t.imageBus[e]}));return Promise.all(e)},r.prototype.destroy=function(){this.node=[]},r.prototype.save=function(t){try{var e=t||{},i=e.fileType,n=void 0===i?"png":i,r=e.quality,o=void 0===r?1:r;return this.canvas.toDataURL("image/".concat(n),o)}catch(t){return this.lifecycle("onEffectFail","image cross domain"),t}},r}();n.WEB==I&&(window.Painter=Bt);export{Bt as Painter,Bt as default};
diff --git a/src/uni_modules/lime-painter/components/l-painter/props.js b/src/uni_modules/lime-painter/components/l-painter/props.js
new file mode 100644
index 00000000..fee87cf1
--- /dev/null
+++ b/src/uni_modules/lime-painter/components/l-painter/props.js
@@ -0,0 +1,56 @@
+export default {
+	props: {
+		board: Object,
+		pathType: String, // 'base64'、'url'
+		fileType: {
+			type: String,
+			default: 'png'
+		},
+		hidden: Boolean,
+		quality: {
+			type: Number,
+			default: 1
+		},
+		css: [String, Object],
+		// styles: [String, Object],
+		width: [Number, String],
+		height: [Number, String],
+		pixelRatio: Number,
+		customStyle: String,
+		isCanvasToTempFilePath: Boolean,
+		// useCanvasToTempFilePath: Boolean,
+		sleep: {
+			type: Number,
+			default: 1000 / 30
+		},
+		beforeDelay: {
+			type: Number,
+			default: 100
+		},
+		afterDelay: {
+			type: Number,
+			default: 100
+		},
+		performance: Boolean,
+		// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
+		type: {
+			type: String,
+			default: '2d'
+		},
+		// #endif
+		// #ifdef APP-NVUE
+		hybrid: Boolean,
+		timeout: {
+			type: Number,
+			default: 2000
+		},
+		// #endif
+		// #ifdef H5 || APP-PLUS
+		useCORS: Boolean,
+		hidpi: {
+			type: Boolean,
+			default: true
+		}
+		// #endif
+	}
+}
\ No newline at end of file
diff --git a/src/uni_modules/lime-painter/components/l-painter/single.js b/src/uni_modules/lime-painter/components/l-painter/single.js
new file mode 100644
index 00000000..a6038b9c
--- /dev/null
+++ b/src/uni_modules/lime-painter/components/l-painter/single.js
@@ -0,0 +1 @@
+var t=function(){return t=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var r in e=arguments[i])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t},t.apply(this,arguments)};function e(t,e,i,n){return new(i||(i=Promise))((function(r,o){function s(t){try{a(n.next(t))}catch(t){o(t)}}function h(t){try{a(n.throw(t))}catch(t){o(t)}}function a(t){var e;t.done?r(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}a((n=n.apply(t,e||[])).next())}))}function i(t,e){var i,n,r,o,s={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return o={next:h(0),throw:h(1),return:h(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function h(o){return function(h){return function(o){if(i)throw new TypeError("Generator is already executing.");for(;s;)try{if(i=1,n&&(r=2&o[0]?n.return:o[0]?n.throw||((r=n.return)&&r.call(n),0):n.next)&&!(r=r.call(n,o[1])).done)return r;switch(n=0,r&&(o=[2&o[0],r.value]),o[0]){case 0:case 1:r=o;break;case 4:return s.label++,{value:o[1],done:!1};case 5:s.label++,n=o[1],o=[0];continue;case 7:o=s.ops.pop(),s.trys.pop();continue;default:if(!(r=s.trys,(r=r.length>0&&r[r.length-1])||6!==o[0]&&2!==o[0])){s=0;continue}if(3===o[0]&&(!r||o[1]>r[0]&&o[1]<r[3])){s.label=o[1];break}if(6===o[0]&&s.label<r[1]){s.label=r[1],r=o;break}if(r&&s.label<r[2]){s.label=r[2],s.ops.push(o);break}r[2]&&s.ops.pop(),s.trys.pop();continue}o=e.call(t,s)}catch(t){o=[6,t],n=0}finally{i=r=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,h])}}}var n={MP_WEIXIN:"mp-weixin",MP_QQ:"mp-qq",MP_ALIPAY:"mp-alipay",MP_BAIDU:"mp-baidu",MP_TOUTIAO:"mp-toutiao",MP_DINGDING:"mp-dingding",H5:"h5",WEB:"web",PLUS:"plus"},r=["Top","Right","Bottom","Left"],o="right",s="bottom",h=["contentSize","clientSize","borderSize","offsetSize"],a="row",l="column",d={TOP:"top",MIDDLE:"middle",BOTTOM:s},c={LEFT:"left",CENTER:"center",RIGHT:o},f="view",u="text",p="image",g="qrcode",v="block",y="inline-block",x="none",b="flex",w="absolute",m="fixed",S={display:v,color:"#000000",lineHeight:"1.4em",fontSize:14,fontWeight:400,fontFamily:"sans-serif",lineCap:"butt",flexDirection:a,flexWrap:"nowrap",textAlign:"left",alignItems:"flex-start",justifyContent:"flex-start",position:"static",transformOrigin:"".concat("center"," ").concat("center")},z={upx2px:function(t){return window.innerWidth/750*t},getSystemInfoSync:function(){return{screenWidth:window.innerWidth,screenHeight:window.innerHeight}},getImageInfo:function(t){var e=t.src,i=t.success,n=t.fail,r=new Image;r.onload=function(){i({width:r.naturalWidth,height:r.naturalHeight,path:r.src,src:e})},r.onerror=n,r.src=e}},I="object"==typeof window?"undefined"==typeof uni||"undefined"!=typeof uni&&!uni.addInterceptor?n.WEB:n.H5:"object"==typeof swan?n.MP_BAIDU:"object"==typeof tt?n.MP_TOUTIAO:"object"==typeof plus?n.PLUS:"object"==typeof wx?n.MP_WEIXIN:void 0,M=I==n.MP_WEIXIN?wx:"undefined"!=typeof uni?uni.getImageInfo?{upx2px:function(t){return uni.upx2px(t)},getSystemInfoSync:function(){return uni.getSystemInfoSync()},getImageInfo:function(t){return uni.getImageInfo(t)},downloadFile:function(t){return uni.downloadFile(t)}}:Object.assign(uni,z):"undefined"!=typeof window?z:uni;if(!M.upx2px){var B=((M.getSystemInfoSync&&M.getSystemInfoSync()).screenWidth||375)/750;M.upx2px=function(t){return B*t}}function W(t){return/^-?\d+(\.\d+)?$/.test(t)}function k(t,e,i){if(W(t))return 1*t;if("string"==typeof t){var n=/^-?([0-9]+)?([.]{1}[0-9]+){0,1}(em|rpx|vw|vh|px|%)$/g.exec(t);if(!t||!n)return 0;var r=n[3];t=parseFloat(t);var o=0;if("rpx"===r)o=M.upx2px(t);else if("px"===r)o=1*t;else if("%"===r&&e)o=t*k(e)/100;else if("em"===r&&e)o=t*k(e||14);else if(["vw","vh"].includes(r)){var s=M.getSystemInfoSync(),h=s.screenWidth,a=s.screenHeight;o=t*("vw"==r?h:a)/100}return 1*o.toFixed(2)}return 0}function P(t){return/%$/.test(t)}function O(t){return/^-?([0-9]+)?([.]{1}[0-9]+){0,1}(rpx|px)$/.test(t)}var T=function(t){return!(!t||!t.startsWith("linear")&&!t.startsWith("radial"))},L=function(t,e,i,n,r,o){t.startsWith("linear")?function(t,e,i,n,r,o){for(var s=function(t,e,i,n,r){void 0===n&&(n=0);void 0===r&&(r=0);var o=t.match(/([-]?\d{1,3})deg/),s=o&&o[1]?parseFloat(o[1]):0;s>=360&&(s-=360);s<0&&(s+=360);if(0===(s=Math.round(s)))return{x0:Math.round(e/2)+n,y0:i+r,x1:Math.round(e/2)+n,y1:r};if(180===s)return{x0:Math.round(e/2)+n,y0:r,x1:Math.round(e/2)+n,y1:i+r};if(90===s)return{x0:n,y0:Math.round(i/2)+r,x1:e+n,y1:Math.round(i/2)+r};if(270===s)return{x0:e+n,y0:Math.round(i/2)+r,x1:n,y1:Math.round(i/2)+r};var h=Math.round(180*Math.asin(e/Math.sqrt(Math.pow(e,2)+Math.pow(i,2)))/Math.PI);if(s===h)return{x0:n,y0:i+r,x1:e+n,y1:r};if(s===180-h)return{x0:n,y0:r,x1:e+n,y1:i+r};if(s===180+h)return{x0:e+n,y0:r,x1:n,y1:i+r};if(s===360-h)return{x0:e+n,y0:i+r,x1:n,y1:r};var a=0,l=0,d=0,c=0;if(s<h||s>180-h&&s<180||s>180&&s<180+h||s>360-h){var f=s*Math.PI/180,u=s<h||s>360-h?i/2:-i/2,p=Math.tan(f)*u,g=s<h||s>180-h&&s<180?e/2-p:-e/2-p;a=-(d=p+(v=Math.pow(Math.sin(f),2)*g)),l=-(c=u+v/Math.tan(f))}if(s>h&&s<90||s>90&&s<90+h||s>180+h&&s<270||s>270&&s<360-h){var v;f=(90-s)*Math.PI/180,p=s>h&&s<90||s>90&&s<90+h?e/2:-e/2,u=Math.tan(f)*p,g=s>h&&s<90||s>270&&s<360-h?i/2-u:-i/2-u;a=-(d=p+(v=Math.pow(Math.sin(f),2)*g)/Math.tan(f)),l=-(c=u+v)}return a=Math.round(a+e/2)+n,l=Math.round(i/2-l)+r,d=Math.round(d+e/2)+n,c=Math.round(i/2-c)+r,{x0:a,y0:l,x1:d,y1:c}}(r,t,e,i,n),h=s.x0,a=s.y0,l=s.x1,d=s.y1,c=o.createLinearGradient(h,a,l,d),f=r.match(/linear-gradient\((.+)\)/)[1],u=R(f.substring(f.indexOf(",")+1)),p=0;p<u.colors.length;p++)c.addColorStop(u.percents[p],u.colors[p]);o.setFillStyle(c)}(e,i,n,r,t,o):t.startsWith("radial")&&function(t,e,i,n,r,o){for(var s=R(r.match(/radial-gradient\((.+)\)/)[1]),h=Math.round(t/2)+i,a=Math.round(e/2)+n,l=o.createRadialGradient(h,a,0,h,a,Math.max(t,e)/2),d=0;d<s.colors.length;d++)l.addColorStop(s.percents[d],s.colors[d]);o.setFillStyle(l)}(e,i,n,r,t,o)};function R(t){for(var e=[],i=[],n=0,r=t.substring(0,t.length-1).split("%,");n<r.length;n++){var o=r[n];e.push(o.substring(0,o.lastIndexOf(" ")).trim()),i.push(o.substring(o.lastIndexOf(" "),o.length)/100)}return{colors:e,percents:i}}function F(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function A(){return A=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t},A.apply(this,arguments)}function j(t,e){return j=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},j(t,e)}function E(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}function H(t,e){var i="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(i)return(i=i.call(t)).next.bind(i);if(Array.isArray(t)||(i=function(t,e){if(t){if("string"==typeof t)return E(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?E(t,e):void 0}}(t))||e&&t&&"number"==typeof t.length){i&&(t=i);var n=0;return function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function C(t){return"number"==typeof t}function D(t){return"auto"===t||null===t}function $(t){return/%$/.test(t)}var Y=p,U=u,N=f,X=g,_=y,q=w,G=m;function V(t){return t.replace(/-([a-z])/g,(function(t,e){return e.toUpperCase()}))}function J(t,e){var i,n,o=function(t){var e=t.match(/([a-z]+)/)[1];return[e,V(t.split(e)[1])]}(t),s=o[0],h=o[1],a=e.split(" ");if(h)return(i={})[s+h]=e,i;if(a.length&&!h){var l=a[0],d=a[1],c=a[2],f=a[3];return(n={})[s+r[0]]=l,n[s+r[1]]=d||l,n[s+r[2]]=c||l,n[s+r[3]]=f||d||l,n}}function Q(t){t=t.trim();for(var e=new Array,i="+",n="",r=t.length,o=0;o<r;++o){if("."===t[o]||!isNaN(Number(t[o]))&&" "!==t[o])n+=t[o];else if("("===t[o]){for(var s=1,h=o;s>0;)"("===t[h+=1]&&(s+=1),")"===t[h]&&(s-=1);n="".concat(Q(t.slice(o+1,h))),o=h}if(isNaN(Number(t[o]))&&"."!==t[o]||o===r-1){var a=parseFloat(n);switch(i){case"+":e.push(a);break;case"-":e.push(-a);break;case"*":e.push(e.pop()*a);break;case"/":e.push(e.pop()/a)}i=t[o],n=""}}for(var l=0;e.length;)l+=e.pop();return l}var Z,K=0,et=function(){function t(){F(this,"elements",[]),F(this,"afterElements",[]),F(this,"beforeElements",[]),F(this,"ids",[]),F(this,"width",0),F(this,"height",0),F(this,"top",0),F(this,"left",0),F(this,"pre",null),F(this,"offsetX",0),F(this,"offsetY",0),K++,this.id=K}var e=t.prototype;return e.fixedBind=function(t,e){void 0===e&&(e=0),this.container=e?t.parent:t.root,this.container.fixedLine=this,this.fixedAdd(t)},e.fixedAdd=function(t){if(!this.ids.includes(t.id)){this.ids.push(t.id),this.elements.push(t);var e=t.computedStyle.zIndex;(void 0===e?0:e)>=0?this.afterElements.push(t):this.beforeElements.push(t),this.refreshLayout()}},e.bind=function(t){this.container=t.parent,this.container.line=null,this.container.lines?(this.container.lines.push(this),this.pre=this.getPreLine(),this.top=this.pre.top+this.pre.height,this.left=this.container.contentSize.left):(this.top=this.container.contentSize.top,this.left=this.container.contentSize.left,this.container.lines=[this]),this.isInline=t.isInline(),this.container.line=this,this.outerWidth=t.parent&&t.parent.contentSize.width?t.parent.contentSize.width:1/0,this.add(t)},e.getPreLine=function(){return this.container.lines[this.container.lines.length-2]},e.canIEnter=function(t){return!((100*t.offsetSize.width+100*this.width)/100>this.outerWidth)||(this.closeLine(),!1)},e.closeLine=function(){delete this.container.line},e.add=function(t){this.ids.includes(t.id)||(this.ids.push(t.id),this.elements.push(t),this.refreshWidthHeight(t))},e.refreshWidthHeight=function(t){t.offsetSize.height>this.height&&(this.height=t.offsetSize.height),this.width+=t.offsetSize.width||0,(this.container.lineMaxWidth||0)<this.width&&(this.container.lineMaxWidth=this.width)},e.refreshXAlign=function(){if(this.isInline){var t=this.container.contentSize.width-this.width,e=this.container.style.textAlign;"center"===e?t/=2:"left"===e&&(t=0),this.offsetX=t}},e.getOffsetY=function(t){if(!t||!t.style)return 0;var e=(t.style||{}).verticalAlign;return e===s?this.height-t.contentSize.height:"middle"===e?(this.height-t.contentSize.height)/2:0},e.setIndent=function(t){var e=t.style.textIndent;if(e&&/^calc/.test(e)){var i=/^calc\((.+)\)$/.exec(e);if(i&&i[1]){var n=i[1].replace(/([^\s\(\+\-\*\/]+)\.(left|right|bottom|top|width|height)/g,(function(e){var i=e.split("."),n=i[0],r=i[1],o=t.parent.querySelector(n);if(o&&o.offsetSize){var s={right:o.offsetSize.left+o.offsetSize.width,bottom:o.offsetSize.top+o.offsetSize.height};return o.offsetSize[r]||s[r]||0}})),r=Q(n.replace(new RegExp(/-?[0-9]+(\.[0-9]+)?(rpx|px|%)/,"g"),k));t.style.textIndent=r}}},e.layout=function(t,e){var i=this;this.refreshXAlign(),this.pre?(this.top=this.pre.top+this.pre.height+this.offsetY,this.left=e+this.offsetX):(this.top=Math.max(this.top,this.container.contentSize.top,t)+this.offsetY,this.left=Math.max(this.left,this.container.contentSize.left,e)+this.offsetX),this.elements.forEach((function(t,e){i.setIndent(t);var n=i.elements[e-1],r=i.getOffsetY(t);t.style.top=i.top+r,t.style.left=n?n.offsetSize.left+n.offsetSize.width:i.left,t.getBoxPosition()}))},e.refreshLayout=function(){this.afterElements=this.afterElements.sort((function(t,e){return t.computedStyle.zIndex-e.computedStyle.zIndex})),this.beforeElements=this.beforeElements.sort((function(t,e){return t.computedStyle.zIndex-e.computedStyle.zIndex}))},t}(),it=((Z={})[a]={width:"width",contentWidth:"width",lineMaxWidth:"lineMaxWidth",left:"left",top:"top",height:"height",lineMaxHeight:"lineMaxHeight",marginLeft:"marginLeft"},Z[l]={width:"height",contentWidth:"height",lineMaxWidth:"lineMaxWidth",left:"top",top:"left",height:"width",lineMaxHeight:"lineMaxHeight",marginLeft:"marginTop"},Z),nt=function(t){var e,i;function n(){var e;return F(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e=t.call(this)||this),"outerWidth",0),e.exactValue=0,e.flexTotal=0,e.width=0,e.key=null,e.flexDirection="row",e}i=t,(e=n).prototype=Object.create(i.prototype),e.prototype.constructor=e,j(e,i);var r=n.prototype;return r.bind=function(t){this.container=t.parent,this.container.line=this,this.container.lines?(this.container.lines.push(this),this.pre=this.getPreLine(),this.top=this.pre.top+this.pre.height,this.left=this.container.contentSize.left):(this.top=this.container.contentSize.top,this.left=this.container.contentSize.left,this.container.lines=[this]),t.parent&&(this.flexDirection=t.parent.style.flexDirection,this.key=it[this.flexDirection]),this.initHeight(t),this.outerWidth=t.parent&&t.parent.contentSize[this.key.contentWidth]?t.parent.contentSize[this.key.contentWidth]:1/0,this.add(t)},r.add=function(t){this.ids.push(t.id);var e=t.style.flex;C(e)?this.flexTotal+=e:C(this.getWidth(t.style))&&(this.exactValue+=this.getWidth(t.offsetSize)),this.elements.push(t),this.refreshWidthHeight(t),t.next||this.closeLine()},r.closeLine=function(){this.calcFlex()},r.initHeight=function(t){this[this.key.height]=0},r.getWidth=function(t){return t[this.key.width]||0},r.getHeight=function(t){return t[this.key.height]||0},r.setWidth=function(t,e){t[this.key.width]=e},r.setHeight=function(t,e){t[this.key.height]=e},r.calcFlex=function(){var t=this,e=this.container.contentSize[this.key.contentWidth],i=0;this.elements.forEach((function(n){var r=n.style,o=n.contentSize,s=t.getWidth(r)||t.getWidth(o);C(r.flex)&&(s=r.flex/t.flexTotal*(e-t.exactValue)),t.setWidth(n.computedStyle,s),n.isFlexCalc=!0,delete n.line,delete n.lines,delete n.lineMaxWidth,n.getBoxWidthHeight(),i=Math.max(i,t.getHeight(n.offsetSize))})),this.setHeight(this,i)},r.refreshWidthHeight=function(t){var e=this.container.style.alignItems;e&&!t.style.alignSelf&&(t.style.alignSelf=e);var i=this.getHeight(t.offsetSize);i>this[this.key.height]&&(this.container[this.key.lineMaxHeight]=this[this.key.height]=i),this[this.key.width]+=this.getWidth(t.offsetSize);var n=Math.min(this.getWidth(this),!this.getWidth(this.container.contentSize)&&1/0);(this.container[this.key.lineMaxWidth]||0)<n&&(this.container[this.key.lineMaxWidth]=n)},r.refreshXAlign=function(){var t=this,e=this.elements.reduce((function(e,i){return e+t.getWidth(i.offsetSize)}),0),i=(this.outerWidth==1/0?0:this.outerWidth-e)||0,n=this.container.style.justifyContent;"center"===n?i/=2:"flex-start"===n?i=0:["space-between","space-around"].includes(n)&&(!function(e,i){void 0===i&&(i=0),i/=t.elements.length+(e?-1:1),t.elements.forEach((function(n,r){var o;e&&!r||(n.style.margin?n.style.margin[t.key.marginLeft]+=i:n.style.margin=((o={})[t.key.marginLeft]=i,o),n.getBoxPosition())})),i=0}("space-between"==n,i),i=0),this.offsetX=i||0,this.refreshYAlign()},r.refreshYAlign=function(){var t=this;if(1==this.container.lines.length)return 0;var e=this.container.lines.reduce((function(e,i){return e+t.getHeight(i)}),0),i=this.container.style.alignItems,n=this.getHeight(this.container.contentSize);if("center"===i){var r=(n-e)/(this.container.lines.length+1);this.container.lines.forEach((function(t){t.offsetY=r}))}if("flex-end"===i){var o=n-e;this.container.lines[0].offsetY=o}},r.getOffsetY=function(t){if(this.container.lines.length>1)return 0;var e=t.style.alignSelf,i=this.getHeight(this.container.contentSize),n=i-this.getHeight(t.offsetSize);return"flex-end"===e?n:"center"===e?n/2:"stretch"===e?(n&&t.name==f&&(t.style[this.key.width]=this.getWidth(t.offsetSize),t.style[this.key.height]=i,delete t.line,delete t.lines,t.getBoxWidthHeight()),0):0},r.layout=function(t,e){var i=this;this.refreshXAlign(),this.pre?(this.top=this.pre.top+this.pre.height+this.offsetY,this.left=e+this.offsetX):(this.top=Math.max(this.top,this.container.contentSize.top,t)+this.offsetY,this.left=Math.max(this.left,this.container.contentSize.left,e)+this.offsetX),this.elements.forEach((function(t,e){i.setIndent(t);var n=i.elements[e-1],r=i.getOffsetY(t);t.style[i.key.top]=i[i.key.top]+r,t.style[i.key.left]=n?n.offsetSize[i.key.left]+i.getWidth(n.offsetSize):i[i.key.left],t.getBoxPosition()}))},n}(et),rt=p,ot=u,st=f,ht=v,at=y,lt=b,dt=w,ct=m,ft=0,ut={left:null,top:null,width:null,height:null},pt=new Map,gt=function(){function t(t,e,i,n){var o=this;F(this,"id",ft++),F(this,"style",{left:null,top:null,width:null,height:null}),F(this,"computedStyle",{}),F(this,"originStyle",{}),F(this,"children",{}),F(this,"layoutBox",A({},ut)),F(this,"contentSize",A({},ut)),F(this,"clientSize",A({},ut)),F(this,"borderSize",A({},ut)),F(this,"offsetSize",A({},ut)),this.ctx=n,this.root=i,e&&(this.parent=e),this.name=t.type||t.name,this.attributes=this.getAttributes(t);var s=function(t,e){var i,n=["color","fontSize","lineHeight","verticalAlign","fontWeight","textAlign"],o=t.type,s=void 0===o?N:o,h=t.styles,a=void 0===h?{}:h,l=(e||{}).computedStyle,d=Object.assign({},S);if([U,Y,X].includes(s)&&!a.display&&(d.display=_),l)for(var c=0;c<n.length;c++){var f=n[c];(a[f]||l[f])&&(a[f]=a[(i=f,i.replace(/([A-Z])/g,"-$1").toLowerCase())]||a[f]||l[f])}for(var u=function(t){var e,i,n,o,h=a[t];if(/-/.test(t)&&(t=V(t),d[t]=h),/^(box|text)?shadow$/i.test(t)){var l=[];return h.replace(/((-?\d+(rpx|px|vw|vh)?\s+?){3})(.+)/,(function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];l=t[1].match(/-?\d+(rpx|px|vw|vh)?/g).map((function(t){return k(t)})).concat(t[4])})),/^text/.test(t)?d.textShadow=l:d.boxShadow=l,"continue"}if(/^border/i.test(t)&&!/radius$/i.test(t)){var c=t.match(/^border([BTRLa-z]+)?/)[0],f=t.match(/[W|S|C][a-z]+/),u=h.replace(/([\(,])\s+|\s+([\),])/g,"$1$2").split(" ").map((function(t){return/^\d/.test(t)?k(t,""):t}));return d[c]||(d[c]={}),1==u.length&&f?d[c][c+f[0]]=u[0]:d[c]=((e={})[c+"Width"]=W(u[0])?u[0]:0,e[c+"Style"]=u[1]||"solid",e[c+"Color"]=u[2]||"black",e),"continue"}if(/^background(color)?$/i.test(t))return d.backgroundColor=h,"continue";if(/^objectPosition$/i.test(t))return d[t]=h.split(" "),"continue";if(/^backgroundPosition$/i.test(t))return d[t]=h.split(" "),"continue";if(/padding|margin|radius/i.test(t)){var p=/radius$/i.test(t),g="borderRadius",v=p?g:t.match(/[a-z]+/)[0],y=function(t,e){return"border".concat(t).concat(e,"Radius")},x=[0,0,0,0].map((function(t,e){return p?[y(r[0],r[3]),y(r[0],r[1]),y(r[2],r[1]),y(r[2],r[3])][e]:v+r[e]}));if("padding"===t||"margin"===t||/^(border)?radius$/i.test(t)){u="".concat(h).split(" ").map((function(e){return/^-?\d+(rpx|px|vh|vw)?$/.test(e)?k(e):"margin"!=t&&/auto/.test(e)?0:e}),[])||[0];var b=p?g:t,w=u[0],m=u[1],S=u[2],z=u[3];d[b]=((i={})[x[0]]=D(w)?0:w,i[x[1]]=W(m)||D(m)?m:w,i[x[2]]=D(W(S)?S:w)?0:W(S)?S:w,i[x[3]]=W(z)?z:null!=m?m:w,i)}else"object"==typeof d[v]||(d[v]=((n={})[x[0]]=d[v]||0,n[x[1]]=d[v]||0,n[x[2]]=d[v]||0,n[x[3]]=d[v]||0,n)),d[v][t]="margin"==v&&D(h)||$(h)?h:k(h);return"continue"}if(/^transform$/i.test(t))return d[t]={},h.replace(/([a-zA-Z]+)\(([0-9,-\.%rpxdeg\s]+)\)/g,(function(e,i,n){var r=n.split(",").map((function(t){return t.replace(/(^\s*)|(\s*$)/g,"")})),o=function(t,e){return t.includes("deg")?1*t:e&&!$(e)?k(t,e):t};i.includes("matrix")?d[t][i]=r.map((function(t){return 1*t})):i.includes("rotate")?d[t][i]=1*n.match(/^-?\d+(\.\d+)?/)[0]:/[X, Y]/.test(i)?d[t][i]=/[X]/.test(i)?o(r[0],a.width):o(r[0],a.height):(d[t][i+"X"]=o(r[0],a.width),d[t][i+"Y"]=o(r[1]||r[0],a.height))})),"continue";if(/^font$/i.test(t)&&console.warn("font 不支持简写"),/^textindent/i.test(t)&&(d[t]=/^calc/.test(h)?h:k(h)),/^textstroke/i.test(t)){var I=t.match(/color|width|type$/i),M=(c="textStroke",h.split(" ").map((function(t){return/^\d+(rpx|px|vh|vw)?$/.test(t)?k(t):t})));return I?d[c]?d[c][I[0]]=M[0]:d[c]=((o={})[I[0]]=M[0],o):d[c]={width:M[0],color:M[1],type:M[2]},"continue"}/^left|top$/i.test(t)&&![q,G].includes(a.position)?d[t]=0:d[t]=/^-?[\d\.]+(px|rpx|vw|vh)?$/.test(h)?k(h):/em$/.test(h)&&s==U?k(h,a.fontSize):h},p=0,g=Object.keys(a);p<g.length;p++)u(g[p]);return d}(t,e);this.isAbsolute=s.position==dt,this.isFixed=s.position==ct,this.originStyle=s,this.styles=t.styles,Object.keys(s).forEach((function(t){Object.defineProperty(o.style,t,{configurable:!0,enumerable:!0,get:function(){return s[t]},set:function(e){s[t]=e}})}));var h={contentSize:A({},this.contentSize),clientSize:A({},this.clientSize),borderSize:A({},this.borderSize),offsetSize:A({},this.offsetSize)};Object.keys(h).forEach((function(t){Object.keys(o[t]).forEach((function(e){Object.defineProperty(o[t],e,{configurable:!0,enumerable:!0,get:function(){return h[t][e]},set:function(i){h[t][e]=i}})}))})),this.computedStyle=this.style}var e=t.prototype;return e.add=function(t){t.parent=this,this.children[t.id]=t},e.getChildren=function(){var t=this;return Object.keys(this.children).map((function(e){return t.children[e]}))},e.prev=function(t){void 0===t&&(t=this);var e=t.parent.getChildren();return e[e.findIndex((function(e){return e.id==t.id}))-1]},e.querySelector=function(t){var e=this.getChildren();if("string"!=typeof t)return null;var i=e.find((function(e){var i=e.id,n=e.attributes;return i==t||n&&n.uid==t}));return i||(this.parent&&this.parent.querySelector&&this.parent.querySelector(t)||null)},e.getLineRect=function(t,e){var i={width:0,height:0},n=e?e.lines:this.parent&&this.parent.lines;return n&&n.find((function(e){return e.ids.includes(t)}))||i},e.setPosition=function(t,e){var i={left:"width",top:"height",right:"width",bottom:"height"};Object.keys(i).forEach((function(n){var r=n==o?"left":"top";[o,s].includes(n)&&void 0!==t.style[n]&&!W(t.originStyle[r])?t.style[r]=e[i[n]]-t.offsetSize[i[n]]-k(t.style[n],e[i[n]]):t.style[n]=k(t.style[n],e[i[n]])}))},e.getAttributes=function(t){var e=t.attributes,i=void 0===e?{}:e,n=t.uid,r=t.url,o=t.src,s=t.replace,h=t.text;return n&&(i.uid=n),(r||o)&&(i.src=i.src||r||o),s&&(i.replace=s),h&&(i.text=h),i},e.getOffsetSize=function(t,e,i){void 0===i&&(i=h[3]);var n=e||{},r=n.margin,o=(r=void 0===r?{}:r).marginLeft,s=void 0===o?0:o,a=r.marginTop,l=void 0===a?0:a,d=r.marginRight,c=void 0===d?0:d,f=r.marginBottom,u=void 0===f?0:f,p=n.padding,g=(p=void 0===p?{}:p).paddingLeft,v=void 0===g?0:g,y=p.paddingTop,x=void 0===y?0:y,b=p.paddingRight,w=void 0===b?0:b,m=p.paddingBottom,S=void 0===m?0:m,z=n.border,I=(z=void 0===z?{}:z).borderWidth,M=void 0===I?0:I,B=n.borderTop,W=(B=void 0===B?{}:B).borderTopWidth,k=void 0===W?M:W,P=n.borderBottom,O=(P=void 0===P?{}:P).borderBottomWidth,T=void 0===O?M:O,L=n.borderRight,R=(L=void 0===L?{}:L).borderRightWidth,F=void 0===R?M:R,A=n.borderLeft,j=(A=void 0===A?{}:A).borderLeftWidth,E=void 0===j?M:j,H=s<0&&c<0?Math.abs(s+c):0,C=l<0&&u<0?Math.abs(l+u):0,D=s>=0&&c<0,$=l>=0&&u<0;return i==h[0]&&(this[i].left=t.left+s+v+E+(D?2*-c:0),this[i].top=t.top+l+x+k+($?2*-u:0),this[i].width=t.width+(this[i].widthAdd?0:H),this[i].height=t.height+(this[i].heightAdd?0:C),this[i].widthAdd=H,this[i].heightAdd=C),i==h[1]&&(this[i].left=t.left+s+E+(D<0?-c:0),this[i].top=t.top+l+k+($?-u:0),this[i].width=t.width+v+w,this[i].height=t.height+x+S),i==h[2]&&(this[i].left=t.left+s+E/2+(D<0?-c:0),this[i].top=t.top+l+k/2+($?-u:0),this[i].width=t.width+v+w+E/2+F/2,this[i].height=t.height+x+S+T/2+k/2),i==h[3]&&(this[i].left=t.left+(D<0?-c:0),this[i].top=t.top+($?-u:0),this[i].width=t.width+v+w+E+F+s+c,this[i].height=t.height+x+S+T+k+u+l),this[i]},e.layoutBoxUpdate=function(t,e,i,n){var r=this;if(void 0===i&&(i=-1),"border-box"==e.boxSizing){var o=e||{},s=o.border,a=(s=void 0===s?{}:s).borderWidth,l=void 0===a?0:a,d=o.borderTop,c=(d=void 0===d?{}:d).borderTopWidth,f=void 0===c?l:c,u=o.borderBottom,p=(u=void 0===u?{}:u).borderBottomWidth,g=void 0===p?l:p,v=o.borderRight,y=(v=void 0===v?{}:v).borderRightWidth,x=void 0===y?l:y,b=o.borderLeft,w=(b=void 0===b?{}:b).borderLeftWidth,m=void 0===w?l:w,S=o.padding,z=(S=void 0===S?{}:S).paddingTop,I=void 0===z?0:z,M=S.paddingRight,B=void 0===M?0:M,W=S.paddingBottom,k=void 0===W?0:W,P=S.paddingLeft,O=void 0===P?0:P;i||(t.width-=O+B+x+m),1!==i||n||(t.height-=I+k+f+g)}this.layoutBox&&(h.forEach((function(i){return r.layoutBox[i]=r.getOffsetSize(t,e,i)})),this.layoutBox=Object.assign({},this.layoutBox,this.layoutBox.borderSize))},e.getBoxPosition=function(){var t=this.computedStyle,e=this.fixedLine,i=this.lines,n=t.left,r=void 0===n?0:n,o=t.top,s=void 0===o?0:o,h=A({},this.contentSize,{left:r,top:s}),a=this.contentSize.top-this.offsetSize.top,l=this.contentSize.left-this.offsetSize.left;if(this.root.fixedLine&&!this.root.isDone){this.root.isDone=!0;for(var d,c=H(this.root.fixedLine.elements);!(d=c()).done;){var f=d.value;f.setPosition(f,this.root.offsetSize),f.getBoxPosition()}}if(e)for(var u,p=H(e.elements);!(u=p()).done;){var g=u.value,v=A({},this.borderSize,{left:r,top:s});g.setPosition(g,v);var y=this.borderSize.top-this.offsetSize.top,x=this.borderSize.left-this.offsetSize.left;g.style.left+=r+x,g.style.top+=s+y,g.getBoxPosition()}if(i)for(var b,w=H(i);!(b=w()).done;){b.value.layout(h.top+a,h.left+l)}return this.layoutBoxUpdate(h,t),this.layoutBox},e.getBoxState=function(t,e){return this.isBlock(t)||this.isBlock(e)},e.isBlock=function(t){return void 0===t&&(t=this),t&&t.style.display==ht},e.isFlex=function(t){return void 0===t&&(t=this),t&&t.style.display==lt},e.isInFlow=function(){return!(this.isAbsolute||this.isFixed)},e.inFlexBox=function(t){return void 0===t&&(t=this),!!t.isInFlow()&&(!!t.parent&&(!(!t.parent||t.parent.style.display!==lt)||void 0))},e.isInline=function(t){return void 0===t&&(t=this),t&&t.style.display==at},e.contrastSize=function(t,e,i){var n=t;return i&&(n=Math.min(n,i)),e&&(n=Math.max(n,e)),n},e.measureText=function(t,e){var i=this.ctx.measureText(t),n=i.width,r=i.actualBoundingBoxAscent,o=i.actualBoundingBoxDescent;return{ascent:r,descent:o,width:n,fontHeight:r+o||.7*e+1}},e.getParentSize=function(t,e){if(void 0===t&&(t=this),void 0===e&&(e=!1),t&&t.parent){if(t.parent.contentSize.width)return t.parent.contentSize;if(e)return this.getParentSize(t.parent,e)}return null},e.getBoxWidthHeight=function(){var t=this,e=this.name,i=this.computedStyle,n=this.attributes,r=this.parent,o=void 0===r?{}:r,s=this.ctx,h=this.getChildren(),a=i.left,l=void 0===a?0:a,d=i.top,c=void 0===d?0:d,f=i.bottom,u=i.right,p=i.width,g=void 0===p?0:p,v=i.minWidth,y=i.maxWidth,x=i.minHeight,b=i.maxHeight,w=i.height,m=void 0===w?0:w,S=i.fontSize,z=i.fontWeight,I=i.fontFamily,M=i.fontStyle,B=i.position;i.textIndent;var W=i.lineClamp,P=i.lineHeight,O=i.padding,T=void 0===O?{}:O,L=i.margin,R=void 0===L?{}:L,F=i.border,A=(F=void 0===F?{}:F).borderWidth,j=void 0===A?0:A,E=i.borderRight,H=(E=void 0===E?{}:E).borderRightWidth,C=void 0===H?j:H,Y=i.borderLeft,U=(Y=void 0===Y?{}:Y).borderLeftWidth,N=void 0===U?j:U,X=o.contentSize&&o.contentSize.width,_=o.contentSize&&o.contentSize.height;if($(g)&&X&&(g=k(g,X)),$(g)&&!X&&(g=null),$(m)&&_&&(m=k(m,_)),$(m)&&!_&&(m=null),$(v)&&X&&(v=k(v,X)),$(y)&&X&&(y=k(y,X)),$(x)&&_&&(x=k(x,_)),$(b)&&_&&(b=k(b,_)),i.padding&&X)for(var q in i.padding)Object.hasOwnProperty.call(T,q)&&(T[q]=k(T[q],X));var G=T.paddingRight,V=void 0===G?0:G,J=T.paddingLeft,Q=void 0===J?0:J;if(i.margin&&[R.marginLeft,R.marginRight].includes("auto"))if(g){var Z=X&&X-g-V-Q-N-C||0;R.marginLeft==R.marginRight?R.marginLeft=R.marginRight=Z/2:D(R.marginLeft)?R.marginLeft=Z:R.marginRight=Z}else R.marginLeft=R.marginRight=0;var K=R.marginRight,tt=void 0===K?0:K,it=R.marginLeft,ht={width:g,height:m,left:0,top:0},at=Q+V+N+C+(void 0===it?0:it)+tt;if(this.offsetWidth=at,e==ot&&!this.attributes.widths){var lt=n.text||"";s.save(),s.setFonts({fontFamily:I,fontSize:S,fontWeight:z,fontStyle:M}),lt.length,"\n"==lt&&(lt="",this.isBr=!0),(""+lt).split("\n").map((function(e){var i=Array.from(e).map((function(e){var i=""+(/^[\u4e00-\u9fa5]+$/.test(e)?"cn":e)+I+S+z+M,n=pt.get(i);if(n)return{width:n,text:e};var r=t.measureText(e,S).width;return pt.set(i,r),{width:r,text:e}})),n=t.measureText(e,S),r=n.fontHeight,o=n.ascent,s=n.descent;t.attributes.fontHeight=r,t.attributes.ascent=o,t.attributes.descent=s,t.attributes.widths||(t.attributes.widths=[]),t.attributes.widths.push({widths:i,total:i.reduce((function(t,e){return t+e.width}),0)})})),s.restore()}if(e==rt&&null==g){var ct=n.width,ft=n.height;ht.width=this.contrastSize(Math.round(ct*m/ft)||0,v,y),this.layoutBoxUpdate(ht,i,0)}if(e==ot&&null==g){var ut=this.attributes.widths,gt=Math.max.apply(Math,ut.map((function(t){return t.total})));if(o&&X>0&&(gt>X||this.isBlock(this))&&!this.isAbsolute&&!this.isFixed)gt=X;ht.width=this.contrastSize(gt,v,y),this.layoutBoxUpdate(ht,i,0)}if(e==ot&&(o.style.flex||!this.attributes.lines)){var vt=this.attributes.widths.length;this.attributes.widths.forEach((function(t){return t.widths.reduce((function(t,e,i){return t+e.width>ht.width?(vt++,e.width):t+e.width}),0)})),vt=W&&vt>W?W:vt,this.attributes.lines=vt}if(e==rt&&null==m){var yt=n.width,xt=n.height;n.text,ht.height=this.contrastSize(k(ht.width*xt/yt)||0,x,b),this.layoutBoxUpdate(ht,i,1)}e==ot&&null==m&&(P=k(P,S),ht.height=this.contrastSize(k(this.attributes.lines*P),x,b),this.layoutBoxUpdate(ht,i,1,!0)),!g&&o&&o.children&&X&&(!this.isFlex(o)||o.isFlexCalc)&&([st,ot].includes(e)&&this.isFlex()||e==st&&this.isBlock(this)&&this.isInFlow())&&(ht.width=this.contrastSize(X-(o.isFlexCalc?0:at),v,y),this.layoutBoxUpdate(ht,i)),g&&!$(g)&&(ht.width=this.contrastSize(g,v,y),this.layoutBoxUpdate(ht,i,0)),m&&!$(m)&&(ht.height=this.contrastSize(ht.height,x,b),this.layoutBoxUpdate(ht,i,1));var bt=0;if(h.length){var wt=null,mt=!1;h.forEach((function(e,n){e.getBoxWidthHeight();var r=h[n+1];if(r&&r.isInFlow()&&(e.next=r),!t.line||!t.line.ids.includes(e.id))if(e.isInFlow()&&!e.inFlexBox()){var o=t.getBoxState(wt,e);if(e.isBr)return mt=!0;t.line&&t.line.canIEnter(e)&&!o&&!mt?t.line.add(e):(mt=!1,(new et).bind(e)),wt=e}else e.inFlexBox()?t.line&&(t.line.canIEnter(e)||"nowrap"==i.flexWrap)?t.line.add(e):(new nt).bind(e):e.isFixed?t.root.fixedLine?t.root.fixedLine.fixedAdd(e):(new et).fixedBind(e):t.fixedLine?t.fixedLine.fixedAdd(e):(new et).fixedBind(e,1)})),this.lines&&(bt=this.lines.reduce((function(t,e){return t+e.height}),0))}var St=0,zt=0;if(!g&&(this.isAbsolute||this.isFixed)&&X){var It=B==dt?X:this.root.width,Mt=It-($(l)?k(l,It):l)-($(u)?k(u,It):u);St=i.left?Mt:this.lineMaxWidth}if(!m&&(null!=c?c:this.isAbsolute||this.isFixed&&_)){var Bt=B==dt?_:this.root.height,Wt=Bt-($(c)?k(c,Bt):c)-($(f)?k(f,Bt):f);zt=i.top?Wt:0}if(g&&!$(g)||ht.width||(ht.width=St||this.contrastSize((this.isBlock(this)&&!this.isInFlow()?X||o.lineMaxWidth:this.lineMaxWidth)||this.lineMaxWidth,v,y),this.layoutBoxUpdate(ht,i,0)),m||!bt&&!zt||(ht.height=zt||this.contrastSize(bt,x,b),this.layoutBoxUpdate(ht,i)),i.borderRadius&&this.borderSize&&this.borderSize.width)for(var q in i.borderRadius)Object.hasOwnProperty.call(i.borderRadius,q)&&(i.borderRadius[q]=k(i.borderRadius[q],this.borderSize.width));return this.layoutBox},e.layout=function(){return this.getBoxWidthHeight(),this.root.offsetSize=this.offsetSize,this.root.contentSize=this.contentSize,this.getBoxPosition(),this.offsetSize},t}(),vt=p,yt=u,xt=g,bt=f,wt=d.TOP,mt=d.MIDDLE,St=d.BOTTOM,zt=c.LEFT,It=c.CENTER,Mt=c.RIGHT,Bt=function(){function r(t){var e,i,r=this;this.v="1.9.5.1",this.id=null,this.pixelRatio=1,this.width=0,this.height=0,this.sleep=1e3/30,this.count=0,this.isRate=!1,this.isDraw=!0,this.isCache=!0,this.fixed="",this.useCORS=!1,this.performance=!1,this.imageBus=[],this.createImage=function(t,e){return new Promise((function(i,n){var o=null;window||r.canvas.createImage?(o=r.canvas&&r.canvas.createImage?r.canvas.createImage():new Image,e&&o.setAttribute("crossOrigin","Anonymous"),o.src=t,o.onload=function(){i({width:o.naturalWidth||o.width,height:o.naturalHeight||o.height,path:o,src:this.src})},o.onerror=function(t){n(t)}):n({fail:"getImageInfo fail",src:t})}))},this.options=t,Object.assign(this,t),this.ctx=(e=t.context,i={get:function(t,i){if("setFonts"===i)return function(t){var i=t.fontFamily,r=void 0===i?"sans-serif":i,o=t.fontSize,s=void 0===o?14:o,h=t.fontWeight,a=void 0===h?"normal":h,l=t.fontStyle,d=void 0===l?"normal":l;I==n.MP_TOUTIAO&&(a="bold"==a?"bold":"",d="italic"==d?"italic":""),e.font="".concat(d," ").concat(a," ").concat(Math.round(s),"px ").concat(r)};if(!e.draw||!e.setFillStyle){if("setFillStyle"===i)return function(t){e.fillStyle=t};if("setStrokeStyle"===i)return function(t){e.strokeStyle=t};if("setLineWidth"===i)return function(t){e.lineWidth=t};if("setLineCap"===i)return function(t){e.lineCap=t};if("setFontSize"===i)return function(t){e.font="".concat(String(t),"px sans-serif")};if("setGlobalAlpha"===i)return function(t){e.globalAlpha=t};if("setLineJoin"===i)return function(t){e.lineJoin=t};if("setTextAlign"===i)return function(t){e.textAlign=t};if("setMiterLimit"===i)return function(t){e.miterLimit=t};if("setShadow"===i)return function(t,i,n,r){e.shadowOffsetX=t,e.shadowOffsetY=i,e.shadowBlur=n,e.shadowColor=r};if("setTextBaseline"===i)return function(t){e.textBaseline=t};if("createCircularGradient"===i)return function(){};if("draw"===i)return function(){};if("function"==typeof e[i])return function(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return e[i].apply(e,t)}}return t[i]},set:function(t,i,n){return e[i]=n,!0}},new Proxy(e,i)),this.progress=0,this.root={width:t.width,height:t.height,fontSizeRate:1,fixedLine:null},this.size=this.root;var o=0;Object.defineProperty(this,"progress",{configurable:!0,set:function(t){o=t,r.lifecycle("onProgress",t/r.count)},get:function(){return o||0}})}return r.prototype.lifecycle=function(t,e){this.options.listen&&this.options.listen[t]&&this.options.listen[t](e)},r.prototype.setContext=function(t){t&&(this.ctx=t)},r.prototype.init=function(){if(this.canvas.height||n.WEB==I){this.ctx.setTransform(1,0,0,1,0,0);var t=this.size.height*this.pixelRatio,e=this.size.width*this.pixelRatio;this.canvas.height=t,this.canvas.width=e,this.ctx.scale(this.pixelRatio,this.pixelRatio)}},r.prototype.clear=function(){this.ctx.clearRect(0,0,this.size.width,this.size.height)},r.prototype.clipPath=function(t,e,i,n,r,o,s){void 0===o&&(o=!1),void 0===s&&(s=!1);var h=this.ctx;if(/polygon/.test(r)){var a=r.match(/-?\d+(rpx|px|%)?\s+-?\d+(rpx|px|%)?/g)||[];h.beginPath(),a.map((function(r){var o=r.split(" "),s=o[0],h=o[1];return[k(s,i)+t,k(h,n)+e]})).forEach((function(t,e){0==e?h.moveTo(t[0],t[1]):h.lineTo(t[0],t[1])})),h.closePath(),s&&h.stroke(),o&&h.fill()}},r.prototype.roundRect=function(t,e,i,n,r,o,s){if(void 0===o&&(o=!1),void 0===s&&(s=!1),!(r<0)){var h=this.ctx;if(h.beginPath(),r){var a=r||{},l=a.borderTopLeftRadius,d=void 0===l?r||0:l,c=a.borderTopRightRadius,f=void 0===c?r||0:c,u=a.borderBottomRightRadius,p=void 0===u?r||0:u,g=a.borderBottomLeftRadius,v=void 0===g?r||0:g;h.arc(t+i-p,e+n-p,p,0,.5*Math.PI),h.lineTo(t+v,e+n),h.arc(t+v,e+n-v,v,.5*Math.PI,Math.PI),h.lineTo(t,e+d),h.arc(t+d,e+d,d,Math.PI,1.5*Math.PI),h.lineTo(t+i-f,e),h.arc(t+i-f,e+f,f,1.5*Math.PI,2*Math.PI),h.lineTo(t+i,e+n-p)}else h.rect(t,e,i,n);h.closePath(),s&&h.stroke(),o&&h.fill()}},r.prototype.setTransform=function(t,e){var i=e.transform,n=e.transformOrigin,r=this.ctx,o=i||{},s=o.scaleX,h=void 0===s?1:s,a=o.scaleY,l=void 0===a?1:a,d=o.translateX,c=void 0===d?0:d,f=o.translateY,u=void 0===f?0:f,p=o.rotate,g=void 0===p?0:p,v=o.skewX,y=void 0===v?0:v,x=o.skewY,b=void 0===x?0:x,w=t.left,m=t.top,S=t.width,z=t.height;c=k(c,S)||0,u=k(u,z)||0;var I=k("0%",1),M=k("50%",1),B=k("100%",1),P={top:I,center:M,bottom:B},O={left:I,center:M,right:B};if(n=n.split(" ").filter((function(t,e){return e<2})).reduce((function(t,e){if(/\d+/.test(e)){var i=k(e,1)/(/px|rpx$/.test(e)?W(t.x)?z:S:1);return W(t.x)?Object.assign(t,{y:i}):Object.assign(t,{x:i})}return W(O[e])&&!W(t.x)?Object.assign(t,{x:O[e]}):Object.assign(t,{y:P[e]||.5})}),{}),(c||u)&&r.translate(c,u),(h||l)&&r.scale(h,l),g){var T=w+S*n.x,L=m+z*n.y;r.translate(T,L),r.rotate(g*Math.PI/180),r.translate(-T,-L)}(y||b)&&r.transform(1,Math.tan(b*Math.PI/180),Math.tan(y*Math.PI/180),1,0,0)},r.prototype.setBackground=function(t,e,i,r,o){var s=this.ctx;t&&"transparent"!=t?T(t)?L(t,e,i,r,o,s):s.setFillStyle(t):[n.MP_TOUTIAO,n.MP_BAIDU].includes(I)?s.setFillStyle("rgba(0,0,0,0)"):s.setFillStyle("transparent")},r.prototype.setShadow=function(t){var e=t.boxShadow,i=void 0===e?[]:e,n=this.ctx;if(i.length){var r=i[0],o=i[1],s=i[2],h=i[3];n.setShadow(r,o,s,h)}},r.prototype.setBorder=function(t,e){var i=this.ctx,n=t.width,r=t.height,o=t.left,s=t.top,h=e.border,a=e.borderBottom,l=e.borderTop,d=e.borderRight,c=e.borderLeft,f=e.borderRadius,u=e.lineCap,p=h||{},g=p.borderWidth,v=void 0===g?0:g,y=p.borderStyle,x=p.borderColor,b=a||{},w=b.borderBottomWidth,m=void 0===w?v:w,S=b.borderBottomStyle,z=void 0===S?y:S,M=b.borderBottomColor,B=void 0===M?x:M,W=l||{},k=W.borderTopWidth,P=void 0===k?v:k,O=W.borderTopStyle,T=void 0===O?y:O,L=W.borderTopColor,R=void 0===L?x:L,F=d||{},A=F.borderRightWidth,j=void 0===A?v:A,E=F.borderRightStyle,H=void 0===E?y:E,C=F.borderRightColor,D=void 0===C?x:C,$=c||{},Y=$.borderLeftWidth,U=void 0===Y?v:Y,N=$.borderLeftStyle,X=void 0===N?y:N,_=$.borderLeftColor,q=void 0===_?x:_,G=f||{},V=G.borderTopLeftRadius,J=void 0===V?f||0:V,Q=G.borderTopRightRadius,Z=void 0===Q?f||0:Q,K=G.borderBottomRightRadius,tt=void 0===K?f||0:K,et=G.borderBottomLeftRadius,it=void 0===et?f||0:et;if(a||c||l||d||h){var nt=function(t,e,n){"dashed"==e?/mp/.test(I)?i.setLineDash([Math.ceil(4*t/3),Math.ceil(4*t/3)]):i.setLineDash([Math.ceil(6*t),Math.ceil(6*t)]):"dotted"==e&&i.setLineDash([t,t]),i.setStrokeStyle(n)},rt=function(t,e,n,r,o,s,h,a,l,d,c,f,p,g,v){i.save(),i.setLineCap(v?"square":u),i.setLineWidth(f),nt(f,p,g),i.beginPath(),i.arc(t,e,h,Math.PI*l,Math.PI*d),i.lineTo(n,r),i.arc(o,s,a,Math.PI*d,Math.PI*c),i.stroke(),i.restore()};if(i.save(),h&&!a&&!c&&!l&&!d)return i.setLineWidth(v),nt(v,y,x),this.roundRect(o,s,n,r,f,!1,!!x),void i.restore();m&&rt(o+n-tt,s+r-tt,o+it,s+r,o+it,s+r-it,tt,it,.25,.5,.75,m,z,B,U&&j),U&&rt(o+it,s+r-it,o,s+J,o+J,s+J,it,J,.75,1,1.25,U,X,q,P&&m),P&&rt(o+J,s+J,o+n-Z,s,o+n-Z,s+Z,J,Z,1.25,1.5,1.75,P,T,R,U&&j),j&&rt(o+n-Z,s+Z,o+n,s+r-tt,o+n-tt,s+r-tt,Z,tt,1.75,2,.25,j,H,D,P&&m)}},r.prototype.setOpacity=function(t){var e=t.opacity,i=void 0===e?1:e;this.ctx.setGlobalAlpha(i)},r.prototype.drawPattern=function(t,n,r){return e(this,void 0,void 0,(function(){var e=this;return i(this,(function(i){return[2,new Promise((function(i,o){e.drawView(n,r,!0,!1,!0);var s=e,h=s.ctx;s.canvas;var a=n.width,l=n.height,d=n.left,c=n.top,f=r||{},u=f.borderRadius,p=void 0===u?0:u,g=f.backgroundImage,v=f.backgroundRepeat,y=void 0===v?"repeat":v;g&&function(t){var o=h.createPattern(t.src,y);h.setFillStyle(o),e.roundRect(d,c,a,l,p,!0,!1),e.setBorder(n,r),i()}(t)}))]}))}))},r.prototype.drawView=function(t,e,i,n,r){void 0===i&&(i=!0),void 0===n&&(n=!0),void 0===r&&(r=!0);var o=this.ctx,s=t.width,h=t.height,a=t.left,l=t.top,d=e||{},c=d.borderRadius,f=void 0===c?0:c,u=d.backgroundColor,p=void 0===u?"transparent":u,g=d.overflow;e.opacity&&this.setOpacity(e),this.setTransform(t,e),r&&(o.save(),this.setShadow(e)),i&&this.setBackground(p,s,h,a,l),e.clipPath?this.clipPath(a,l,s,h,e.clipPath,i,!1):this.roundRect(a,l,s,h,f,i,!1),r&&o.restore(),n&&this.setBorder(t,e),"hidden"==g&&o.clip()},r.prototype.drawImage=function(t,r,o,s){return void 0===r&&(r={}),void 0===o&&(o={}),void 0===s&&(s=!0),e(this,void 0,void 0,(function(){var h=this;return i(this,(function(a){switch(a.label){case 0:return[4,new Promise((function(a,l){return e(h,void 0,void 0,(function(){var e,h,l,d,c,f,u,p,g,v,y,x,b,w,m,S,z,M,B,W,T,L=this;return i(this,(function(i){return e=this.ctx,h=o.borderRadius,l=void 0===h?0:h,d=o.backgroundColor,c=void 0===d?"transparent":d,f=o.objectFit,u=void 0===f?"fill":f,p=o.backgroundSize,g=void 0===p?"fill":p,v=o.objectPosition,y=o.backgroundPosition,x=o.boxShadow,o.backgroundImage&&(u=g,v=y),x&&this.drawView(r,Object.assign(o,{backgroundColor:c||x&&(c||"#ffffff")}),!0,!1,!0),b=r.width,w=r.height,m=r.left,S=r.top,e.save(),z=r.contentSize.left-r.borderSize.left,M=r.contentSize.top-r.borderSize.top,s||(this.setOpacity(o),this.setTransform(r,o),this.setBackground(c,b,w,m,S),this.roundRect(m,S,b,w,l,!!(l||!x&&c),!1)),m+=z,S+=M,e.clip(),B=function(t){if("fill"!==u){var i=function(t,e,i){var n=t.objectFit,r=t.objectPosition,o=e.width/e.height,s=i.width/i.height,h=1,a="contain",l="cover";n==a&&o>=s||n==l&&o<s?h=e.height/i.height:(n==a&&o<s||n==l&&o>=s)&&(h=e.width/i.width);var d=i.width*h,c=i.height*h,f=r||[],u=f[0],p=f[1],g=O(u)?k(u,e.width):(e.width-d)*(P(u)?k(u,1):{left:0,center:.5,right:1}[u||"center"]),v=O(p)?k(p,e.height):(e.height-c)*(P(p)?k(p,1):{top:0,center:.5,bottom:1}[p||"center"]),y=function(t,e){return[(t-g)/h,(e-v)/h]},x=y(0,0),b=x[0],w=x[1],m=y(e.width,e.height),S=m[0],z=m[1],I=Math.max,M=Math.min;return{sx:I(b,0),sy:I(w,0),sw:M(S-b,i.width),sh:M(z-w,i.height),dx:I(g,0),dy:I(v,0),dw:M(d,e.width),dh:M(c,e.height)}}({objectFit:u,objectPosition:v},r.contentSize,t),o=i.sx,s=i.sy,h=i.sh,a=i.sw,l=i.dx,d=i.dy,c=i.dh,f=i.dw;I==n.MP_BAIDU?e.drawImage(t.src,l+m,d+S,f,c,o,s,a,h):e.drawImage(t.src,o,s,a,h,l+m,d+S,f,c)}else e.drawImage(t.src,m,S,b,w)},W=function(){e.restore(),L.drawView(r,o,!1,!0,!1),a(1)},T=function(t){B(t),W()},T(t),[2]}))}))}))];case 1:return a.sent(),[2]}}))}))},r.prototype.drawText=function(t,e,i,n){var r=this,o=this.ctx,s=e.borderSize,h=e.contentSize,a=e.left,l=e.top,d=h.width,c=h.height,f=h.left-s.left||0,u=h.top-s.top||0,p=i.color,g=i.lineHeight,v=i.fontSize,y=i.fontWeight,x=i.fontFamily,b=i.fontStyle,w=i.textIndent,m=void 0===w?0:w,S=i.textAlign,z=i.textStroke,I=i.verticalAlign,M=void 0===I?mt:I,B=i.backgroundColor,P=i.lineClamp,O=i.backgroundClip,T=i.textShadow,L=i.textDecoration;if(m=W(m)?m:0,this.drawView(e,i,O!=yt),g=k(g,v),t){o.save(),a+=f,l+=u;var R=n.fontHeight,F=n.descent,A=void 0===F?0:F,j=n.ascent,E=A+(void 0===j?0:j);switch(o.setFonts({fontFamily:x,fontSize:v,fontWeight:y,fontStyle:b}),o.setTextBaseline(mt),o.setTextAlign(S),O?this.setBackground(B,d,c,a,l):o.setFillStyle(p),S){case zt:break;case It:a+=.5*d;break;case Mt:a+=d}var H=n.lines*g,C=Math.ceil((c-H)/2);switch(C<0&&(C=0),M){case wt:break;case mt:l+=C;break;case St:l+=2*C}var D=(g-R)/2,$=g/2,Y=function(t){var e=o.measureText(t),i=e.actualBoundingBoxDescent,n=void 0===i?0:i,r=e.actualBoundingBoxAscent;return M==wt?{fix:E?void 0===r?0:r:$-D/2,lineY:E?0:D-D/2}:M==mt?{fix:E?$+n/4:$,lineY:E?0:D}:M==St?{fix:E?g-n:$+D/2,lineY:E?2*D:D+D/2}:{fix:0,height:0,lineY:0}},U=function(t,e,i){var r=t;switch(S){case zt:r+=i;break;case It:r=(t-=i/2)+i;break;case Mt:r=t,t-=i}if(L){o.setLineWidth(v/13),o.beginPath();var s=.1*n.fontHeight;/\bunderline\b/.test(L)&&(o.moveTo(t,e+n.fontHeight+s),o.lineTo(r,e+n.fontHeight+s)),/\boverline\b/.test(L)&&(o.moveTo(t,e-s),o.lineTo(r,e-s)),/\bline-through\b/.test(L)&&(o.moveTo(t,e+.5*n.fontHeight),o.lineTo(r,e+.5*n.fontHeight)),o.closePath(),o.setStrokeStyle(p),o.stroke()}},N=function(t,e,i){var n=function(){o.setLineWidth(z.width),o.setStrokeStyle(z.color),o.strokeText(t,e,i)},s="outset";z&&z.type!==s?(o.save(),r.setShadow({boxShadow:T}),o.fillText(t,e,i),o.restore(),n()):z&&z.type==s?(o.save(),r.setShadow({boxShadow:T}),n(),o.restore(),o.save(),o.fillText(t,e,i),o.restore()):(r.setShadow({boxShadow:T}),o.fillText(t,e,i))};if(!n.widths||1==n.widths.length&&n.widths[0].total+m<=h.width){var X=Y(t),_=X.fix,q=void 0===_?0:_,G=X.lineY;return N(t,a+m,l+q),U(a+m,l+G,n&&n.widths&&n.widths[0].total||n.text),l+=g,o.restore(),void this.setBorder(e,i)}for(var V=l,J=a,Q="",Z=0,K=o.measureText("...").width,tt=n.widths,et=0;et<tt.length;et++){var it=tt[et].widths,nt=0;Q="",l+=1==(Z+=1)?0:g,1==Z&&m&&(nt=m,J=a+m);for(var rt=0;rt<it.length;rt++){1!==Z&&m&&(J=a);var ot=it[rt],st=ot.width,ht=ot.text,at=(it[rt+1]||{}).width;if(Q+=ht,(nt+=st)+(void 0===at?0:at)+(0==Z?m:0)+(Z==P?K:0)>h.width){Z>=P&&(Q+="…"),Z++,nt=0;var lt=Y(Q);q=lt.fix,G=lt.lineY;N(Q,J,l+q),U(J,l+G,nt),l+=g,Q=""}else if(rt==it.length-1){et!=tt.length-1&&Z==P&&K+nt<h.width&&(Q+="…");var dt=Y(Q);q=dt.fix,G=dt.lineY;N(Q,J,l+q),U(J,l+G,nt)}if(l>V+c||Z>P)break}}o.restore()}},r.prototype.source=function(t){return e(this,void 0,void 0,(function(){var e,n,r,o,s=this;return i(this,(function(i){switch(i.label){case 0:if(this.node=null,e=+new Date,"{}"==JSON.stringify(t))return[2];if(!t.type)for(n in t.type=bt,t.styles=t.styles||t.css||{},t)["views","children","type","css","styles"].includes(n)||(t.styles[n]=t[n],delete t[n]);return t.styles.boxSizing||(t.styles.boxSizing="border-box"),[4,this.create(t)];case 1:return(r=i.sent())?(o=r.layout()||{},this.size=o,this.node=r,this.onEffectFinished().then((function(t){return s.lifecycle("onEffectSuccess",t)})).catch((function(t){return s.lifecycle("onEffectFail",t)})),this.performance&&console.log("布局用时："+(+new Date-e)+"ms"),[2,this.size]):[2,console.warn("no node")]}}))}))},r.prototype.getImageInfo=function(t){return this.imageBus[t]||(this.imageBus[t]=this.createImage(t,this.useCORS)),this.imageBus[t]},r.prototype.create=function(n,r){return e(this,void 0,void 0,(function(){function e(i,n,r){void 0===n&&(n={}),void 0===r&&(r=!0);var o=[];return i.forEach((function(i){var s=i.styles,h=void 0===s?{}:s,a=i.children,l=void 0===a?[]:a,d=i.text,c=void 0===d?"":d,f=i.type,u=void 0===f?"":f,p={};p=t(r?t({},n):{},h);var g={},v={},y={};Object.keys(p).map((function(t){if(t.includes("padding")||t.includes("margin")){var e=J(t,p[t]);Object.keys(e).map((function(t){t.includes("Left")?v[t]=e[t]:t.includes("Right")?y[t]=e[t]:g[t]=e[t]}))}}));if(p.textIndent&&(v.textIndent=p.textIndent,delete n.textIndent),""!==c){var x=Array.from(c);x.forEach((function(t,e){var i=Object.assign({},p,g);0===e?Object.assign(i,v):e==x.length-1&&Object.assign(i,y),delete i.padding,delete i.margin,o.push({type:"text",text:t,styles:i})}))}if(u==vt||u==xt)o.push(i);else if("block"===h.display&&l.length>0){var b=e(l,p,!1);i.children=b,i.flattened=!0,o.push(i)}else if(l.length>0){b=e(l,p,r);o=o.concat(b)}})),o}var o,s,h,a,l,d,c,f,u,p,g,v,y,b,w,m,S,z,I,M,B;return i(this,(function(i){switch(i.label){case 0:if(!n)return[2];if(n.styles||(n.styles=n.css||{}),o=n.type,s=o==vt,h=[yt,xt].includes(o),a="textBox"==o,l=n.styles||{},d=l.backgroundImage,c=l.display,s&&!n.src&&!n.url)return[2];if(c==x)return[2];if(h||a){if(f=n.children,!n.text&&(!f||f&&!f.length))return[2];f&&f.length&&!n.flattened&&(u=e(n.children),n.type="view",n.children=u)}if(!(s||n.type==bt&&d))return[3,4];p=s?n.src:"",g=/url\(['"]?(.*?)['"]?\)/.exec(d),d&&g&&g[1]&&(p=g[1]||""),i.label=1;case 1:return i.trys.push([1,3,,4]),[4,this.getImageInfo(p)];case 2:return v=i.sent(),y=v.width,b=v.height,!(w=v.path)&&s?[2]:(w&&(n.attributes=Object.assign(n.attributes||{},{width:y,height:b,path:w,src:w,naturalSrc:p})),[3,4]);case 3:return m=i.sent(),n.type!=bt?[2]:(this.lifecycle("onEffectFail",t(t({},m),{src:p})),[3,4]);case 4:if(this.count+=1,S=new gt(n,r,this.root,this.ctx),!(z=n.views||n.children))return[3,8];I=0,i.label=5;case 5:return I<z.length?(M=z[I],[4,this.create(M,S)]):[3,8];case 6:(B=i.sent())&&S.add(B),i.label=7;case 7:return I++,[3,5];case 8:return[2,S]}}))}))},r.prototype.drawNode=function(t,n){return void 0===n&&(n=!1),e(this,void 0,void 0,(function(){var e,r,o,s,h,a,l,d,c,f,u,p,g,v,y,x,b,w,m,S,z,I,M;return i(this,(function(i){switch(i.label){case 0:return e=t.layoutBox,r=t.computedStyle,o=t.attributes,s=t.name,h=t.children,a=t.fixedLine,l=t.attributes,d=l.src,c=l.text,f=r.position,u=r.backgroundImage,p=r.backgroundRepeat,["fixed"].includes(f)&&!n?[2]:(this.ctx.save(),s!==bt?[3,7]:d&&u?p?[4,this.drawPattern(o,e,r)]:[3,2]:[3,5]);case 1:return i.sent(),[3,4];case 2:return[4,this.drawImage(o,e,r,!1)];case 3:i.sent(),i.label=4;case 4:return[3,6];case 5:this.drawView(e,r),i.label=6;case 6:return[3,10];case 7:return s===vt&&d?[4,this.drawImage(o,e,r,!1)]:[3,9];case 8:return i.sent(),[3,10];case 9:s===yt?this.drawText(c,e,r,o):s===xt&&QR.api&&console.warn("single"),i.label=10;case 10:if(this.progress+=1,v=(g=a||{}).beforeElements,y=g.afterElements,!v)return[3,14];x=0,b=v,i.label=11;case 11:return x<b.length?(M=b[x],[4,this.drawNode(M)]):[3,14];case 12:i.sent(),i.label=13;case 13:return x++,[3,11];case 14:if(!h)return[3,18];w=Object.values?Object.values(h):Object.keys(h).map((function(t){return h[t]})),m=0,S=w,i.label=15;case 15:return m<S.length?"absolute"===(M=S[m]).computedStyle.position?[3,17]:[4,this.drawNode(M)]:[3,18];case 16:i.sent(),i.label=17;case 17:return m++,[3,15];case 18:if(!y)return[3,22];z=0,I=y,i.label=19;case 19:return z<I.length?(M=I[z],[4,this.drawNode(M)]):[3,22];case 20:i.sent(),i.label=21;case 21:return z++,[3,19];case 22:return this.ctx.restore(),[2]}}))}))},r.prototype.render=function(t){var n=this;return void 0===t&&(t=30),new Promise((function(r,o){return e(n,void 0,void 0,(function(){var e,n,s,h,a,l,d,c,f,u;return i(this,(function(i){switch(i.label){case 0:return e=+new Date,this.init(),[4,(p=t,void 0===p&&(p=0),new Promise((function(t){return setTimeout(t,p)})))];case 1:i.sent(),i.label=2;case 2:if(i.trys.push([2,14,,15]),!this.node)return[3,12];if(n=this.root.fixedLine||{},s=n.beforeElements,h=n.afterElements,!s)return[3,6];a=0,l=s,i.label=3;case 3:return a<l.length?(f=l[a],[4,this.drawNode(f,!0)]):[3,6];case 4:i.sent(),i.label=5;case 5:return a++,[3,3];case 6:return[4,this.drawNode(this.node)];case 7:if(i.sent(),!h)return[3,11];d=0,c=h,i.label=8;case 8:return d<c.length?(f=c[d],[4,this.drawNode(f,!0)]):[3,11];case 9:i.sent(),i.label=10;case 10:return d++,[3,8];case 11:return r(this.node),[3,13];case 12:this.lifecycle("onEffectFail","node is empty"),i.label=13;case 13:return[3,15];case 14:return u=i.sent(),this.lifecycle("onEffectFail",u),o(u),[3,15];case 15:return this.performance&&console.log("渲染用时："+(+new Date-e-30)+"ms"),[2]}var p}))}))}))},r.prototype.onEffectFinished=function(){var t=this,e=Object.keys(this.imageBus).map((function(e){return t.imageBus[e]}));return Promise.all(e)},r.prototype.destroy=function(){this.node=[]},r.prototype.save=function(t){try{var e=t||{},i=e.fileType,n=void 0===i?"png":i,r=e.quality,o=void 0===r?1:r;return this.canvas.toDataURL("image/".concat(n),o)}catch(t){return this.lifecycle("onEffectFail","image cross domain"),t}},r}();n.WEB==I&&(window.Painter=Bt);export{Bt as Painter,Bt as default};
diff --git a/src/uni_modules/lime-painter/components/l-painter/utils.js b/src/uni_modules/lime-painter/components/l-painter/utils.js
new file mode 100644
index 00000000..cea5c6ec
--- /dev/null
+++ b/src/uni_modules/lime-painter/components/l-painter/utils.js
@@ -0,0 +1,368 @@
+export const networkReg = /^(http|\/\/)/;
+export const isBase64 = (path) => /^data:image\/(\w+);base64/.test(path);
+export function sleep(delay) {
+	return new Promise(resolve => setTimeout(resolve, delay))
+}
+let {platform, SDKVersion} = uni.getSystemInfoSync() 
+export const isPC = /windows|mac/.test(platform)
+// 缓存图片
+let cache = {}
+export function isNumber(value) {
+	return /^-?\d+(\.\d+)?$/.test(value);
+}
+export function toPx(value, baseSize, isDecimal = false) {
+	// 如果是数字
+	if (typeof value === 'number') {
+		return value
+	}
+	// 如果是字符串数字
+	if (isNumber(value)) {
+		return value * 1
+	}
+	// 如果有单位
+	if (typeof value === 'string') {
+		const reg = /^-?([0-9]+)?([.]{1}[0-9]+){0,1}(em|rpx|px|%)$/g
+		const results = reg.exec(value);
+		if (!value || !results) {
+			return 0;
+		}
+		const unit = results[3];
+		value = parseFloat(value);
+		let res = 0;
+		if (unit === 'rpx') {
+			res = uni.upx2px(value);
+		} else if (unit === 'px') {
+			res = value * 1;
+		} else if (unit === '%') {
+			res = value * toPx(baseSize) / 100;
+		} else if (unit === 'em') {
+			res = value * toPx(baseSize || 14);
+		}
+		return isDecimal ? res.toFixed(2) * 1 : Math.round(res);
+	}
+	return 0
+}
+
+// 计算版本
+export function compareVersion(v1, v2) {
+	v1 = v1.split('.')
+	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], 10)
+		const num2 = parseInt(v2[i], 10)
+
+		if (num1 > num2) {
+			return 1
+		} else if (num1 < num2) {
+			return -1
+		}
+	}
+	return 0
+}
+
+function gte(version) {
+  // #ifdef MP-ALIPAY
+  SDKVersion = my.SDKVersion
+  // #endif
+  return compareVersion(SDKVersion, version) >= 0;
+}
+export function canIUseCanvas2d() {
+	// #ifdef MP-WEIXIN
+	return gte('2.9.2');
+	// #endif
+	// #ifdef MP-ALIPAY
+	return gte('2.7.15');
+	// #endif
+	// #ifdef MP-TOUTIAO
+	return gte('1.78.0');
+	// #endif
+	return false
+}
+
+// #ifdef MP
+export const prefix = () => {
+	// #ifdef MP-TOUTIAO
+	return tt
+	// #endif
+	// #ifdef MP-WEIXIN
+	return wx
+	// #endif
+	// #ifdef MP-BAIDU
+	return swan
+	// #endif
+	// #ifdef MP-ALIPAY
+	return my
+	// #endif
+	// #ifdef MP-QQ
+	return qq
+	// #endif
+	// #ifdef MP-360
+	return qh
+	// #endif
+}
+// #endif
+
+
+
+/**
+ * base64转路径
+ * @param {Object} base64
+ */
+export function base64ToPath(base64) {
+	const [, format] = /^data:image\/(\w+);base64,/.exec(base64) || [];
+
+	return new Promise((resolve, reject) => {
+		// #ifdef MP
+		const fs = uni.getFileSystemManager()
+		//自定义文件名
+		if (!format) {
+			reject(new Error('ERROR_BASE64SRC_PARSE'))
+		}
+		const time = new Date().getTime();
+		let pre = prefix()
+		// #ifdef MP-TOUTIAO
+		const filePath = `${pre.getEnvInfoSync().common.USER_DATA_PATH}/${time}.${format}`
+		// #endif
+		// #ifndef MP-TOUTIAO
+		const filePath = `${pre.env.USER_DATA_PATH}/${time}.${format}`
+		// #endif
+		fs.writeFile({
+			filePath,
+			data: base64.split(',')[1],
+			encoding: 'base64',
+			success() {
+				resolve(filePath)
+			},
+			fail(err) {
+				console.error(err)
+				reject(err)
+			}
+		})
+		// #endif
+
+		// #ifdef H5
+		// mime类型
+		let mimeString = base64.split(',')[0].split(':')[1].split(';')[0];
+		//base64 解码
+		let byteString = atob(base64.split(',')[1]);
+		//创建缓冲数组
+		let arrayBuffer = new ArrayBuffer(byteString.length);
+		//创建视图
+		let intArray = new Uint8Array(arrayBuffer);
+		for (let i = 0; i < byteString.length; i++) {
+			intArray[i] = byteString.charCodeAt(i);
+		}
+		resolve(URL.createObjectURL(new Blob([intArray], {
+			type: mimeString
+		})))
+		// #endif
+
+		// #ifdef APP-PLUS
+		const bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
+		bitmap.loadBase64Data(base64, () => {
+			if (!format) {
+				reject(new Error('ERROR_BASE64SRC_PARSE'))
+			}
+			const time = new Date().getTime();
+			const filePath = `_doc/uniapp_temp/${time}.${format}`
+			bitmap.save(filePath, {},
+				() => {
+					bitmap.clear()
+					resolve(filePath)
+				},
+				(error) => {
+					bitmap.clear()
+					reject(error)
+				})
+		}, (error) => {
+			bitmap.clear()
+			reject(error)
+		})
+		// #endif
+	})
+}
+
+/**
+ * 路径转base64
+ * @param {Object} string
+ */
+export function pathToBase64(path) {
+	if (/^data:/.test(path)) return path
+	return new Promise((resolve, reject) => {
+		// #ifdef H5
+		let image = new Image();
+		image.setAttribute("crossOrigin", 'Anonymous');
+		image.onload = function() {
+			let canvas = document.createElement('canvas');
+			canvas.width = this.naturalWidth;
+			canvas.height = this.naturalHeight;
+			canvas.getContext('2d').drawImage(image, 0, 0);
+			let result = canvas.toDataURL('image/png')
+			resolve(result);
+			canvas.height = canvas.width = 0
+		}
+		image.src = path + '?v=' + Math.random()
+		image.onerror = (error) => {
+			reject(error);
+		};
+		// #endif
+
+		// #ifdef MP
+		if (uni.canIUse('getFileSystemManager')) {
+			uni.getFileSystemManager().readFile({
+				filePath: path,
+				encoding: 'base64',
+				success: (res) => {
+					resolve('data:image/png;base64,' + res.data)
+				},
+				fail: (error) => {
+					console.error({error, path})
+					reject(error)
+				}
+			})
+		}
+		// #endif
+
+		// #ifdef APP-PLUS
+		plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), (entry) => {
+			entry.file((file) => {
+				const fileReader = new plus.io.FileReader()
+				fileReader.onload = (data) => {
+					resolve(data.target.result)
+				}
+				fileReader.onerror = (error) => {
+					reject(error)
+				}
+				fileReader.readAsDataURL(file)
+			}, reject)
+		}, reject)
+		// #endif
+	})
+}
+
+
+
+export function getImageInfo(path, useCORS) {
+	const isCanvas2D = this && this.canvas && this.canvas.createImage
+	return new Promise(async (resolve, reject) => {
+		// let time = +new Date()
+		let src = path.replace(/^@\//,'/')
+		if (cache[path] && cache[path].errMsg) {
+			resolve(cache[path])
+		} else {
+			try {
+				// #ifdef MP || APP-PLUS
+				if (isBase64(path) && (isCanvas2D ? isPC : true)) {
+					src = await base64ToPath(path)
+				}
+				// #endif
+				// #ifdef H5
+				if(useCORS) {
+					src = await pathToBase64(path)
+				}
+				// #endif
+			} catch (error) {
+				reject({
+					...error,
+					src
+				})
+			}
+			// #ifndef APP-NVUE
+			if(isCanvas2D && !isPC) {
+				const img = this.canvas.createImage()
+				img.onload = function() {
+					const image = {
+						path: img,
+						width:  img.width,
+						height:  img.height
+					}
+					cache[path] = image
+					resolve(cache[path])
+				}
+				img.onerror = function(err) {
+					reject({err,path})
+				}
+				img.src = src
+				return
+			}
+			// #endif
+			uni.getImageInfo({
+				src,
+				success: (image) => {
+					const localReg = /^\.|^\/(?=[^\/])/;
+					// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO
+					image.path = localReg.test(src) ?  `/${image.path}` : image.path;
+					// #endif
+					if(isCanvas2D) {
+						const img = this.canvas.createImage()
+						img.onload = function() {
+							image.path = img
+							cache[path] = image
+							resolve(cache[path])
+						}
+						img.onerror = function(err) {
+							reject({err,path})
+						}
+						img.src = src
+						return
+					}
+					// #ifdef APP-PLUS
+					// console.log('getImageInfo', +new Date() - time)
+					// ios 比较严格 可能需要设置跨域
+					if(uni.getSystemInfoSync().osName == 'ios' && useCORS) {
+						pathToBase64(image.path).then(base64 => {
+							image.path = base64
+							cache[path] = image
+							resolve(cache[path])
+						}).catch(err => {
+							console.error({err, path})
+							reject({err,path})
+						})
+						return
+					}
+					// #endif
+					cache[path] = image
+					resolve(cache[path])
+				},
+				fail(err) {
+					console.error({err, path})
+					reject({err,path})
+				}
+			})
+		}
+	})
+}
+
+
+// #ifdef APP-PLUS
+const getLocalFilePath = (path) => {
+	if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path
+		.indexOf('_downloads') === 0) {
+		return path
+	}
+	if (path.indexOf('file://') === 0) {
+		return path
+	}
+	if (path.indexOf('/storage/emulated/0/') === 0) {
+		return path
+	}
+	if (path.indexOf('/') === 0) {
+		const localFilePath = plus.io.convertAbsoluteFileSystem(path)
+		if (localFilePath !== path) {
+			return localFilePath
+		} else {
+			path = path.substr(1)
+		}
+	}
+	return '_www/' + path
+}
+// #endif
+
+
diff --git a/src/uni_modules/lime-painter/components/lime-painter/lime-painter.vue b/src/uni_modules/lime-painter/components/lime-painter/lime-painter.vue
new file mode 100644
index 00000000..f3b614b4
--- /dev/null
+++ b/src/uni_modules/lime-painter/components/lime-painter/lime-painter.vue
@@ -0,0 +1,235 @@
+<template>
+	<view class="page">
+		<!-- <demo-block title="json用法">
+			<image :src="picture" v-if="picture" mode="widthFix"></image>
+			<l-painter :board="poster" @success="picture = $event" isCanvasToTempFilePath ref="json" style="position: fixed;left: 1500rpx;width: 750rpx;" path-type="url"></l-painter>
+		</demo-block> -->
+		<!-- <demo-block title="基础用法">
+			<l-painter ref="painter">
+				<l-painter-view css="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block">
+				</l-painter-view>
+				<l-painter-view
+					css="background: #1989fa; height: 120rpx; width: 120rpx; border-top-right-radius: 60rpx; border-bottom-left-radius: 60rpx; display: inline-block; margin: 0 30rpx;">
+				</l-painter-view>
+				<l-painter-view
+					css="background: #ff9d00; height: 120rpx; width: 120rpx; border-radius: 50%; display: inline-block">
+				</l-painter-view>
+			</l-painter>
+		</demo-block> -->
+		<!-- <demo-block title="View 容器">
+			<l-painter>
+				<l-painter-view css="background: #f0f0f0; padding-top: 100rpx;">
+					<l-painter-view css="background: #d9d9d9; width: 33.33%; height: 100rpx; display: inline-block">
+					</l-painter-view>
+					<l-painter-view css="background: #bfbfbf; width: 66.66%; height: 100rpx; display: inline-block">
+					</l-painter-view>
+				</l-painter-view>
+			</l-painter>
+		</demo-block> -->
+		<!-- <demo-block title="Text 文本">
+			<l-painter>
+				<l-painter-view css="background: #f5f5f5; padding: 30rpx; color: #222a29">
+					<l-painter-text text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼" />
+					<l-painter-text text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
+						css="text-align:center; padding-top: 20rpx; text-decoration: line-through " />
+					<l-painter-text text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼" css="text-align:right; padding-top: 20rpx" />
+					<l-painter-text text="水调歌头\n明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。"
+						css="line-clamp: 3; padding-top: 20rpx; background: linear-gradient(,#ff971b 0%, #1989fa 100%); background-clip: text" />
+				</l-painter-view>
+			</l-painter>
+		</demo-block> -->
+		<!-- <demo-block title="Image 图片">
+			<l-painter>
+				<l-painter-view>
+					<l-painter-text text="基础用法"
+						css="margin-top: 30rpx; display: block; padding-bottom:20rpx; color: #999" />
+					<l-painter-view>
+						<l-painter-image
+							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
+							css="width: 200rpx; height: 200rpx" />
+					</l-painter-view>
+				</l-painter-view>
+				<l-painter-view>
+					<l-painter-text text="填充方式"
+						css=" margin-top: 30rpx; display: block; padding-bottom:20rpx; color: #999" />
+					<l-painter-view css="display: inline-block; padding-right: 12rpx">
+						<l-painter-image
+							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
+							css="width: 200rpx; height: 200rpx; object-fit: contain; background: #f5f5f5" />
+						<l-painter-text text="contain" css="margin-top: 10rpx; display: block; text-align:center;" />
+					</l-painter-view>
+					<l-painter-view css="display: inline-block; padding: 0 12rpx">
+						<l-painter-image
+							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
+							css="width: 200rpx; height: 200rpx; object-fit: cover; background: #f5f5f5" />
+						<l-painter-text text="cover" css="margin-top: 10rpx; display: block; text-align:center;" />
+					</l-painter-view>
+					<l-painter-view css="display: inline-block; padding: 0 12rpx">
+						<l-painter-image
+							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
+							css="width: 200rpx; height: 200rpx; object-fit: fill; background: #f5f5f5" />
+						<l-painter-text text="fill" css="margin-top: 10rpx; display: block; text-align:center;" />
+					</l-painter-view>
+					<l-painter-view css="display: inline-block; margin-top: 30rpx">
+						<l-painter-image
+							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
+							css="width: 200rpx; height: 200rpx; object-fit: none; background: #f5f5f5" />
+						<l-painter-text text="none" css="margin-top: 10rpx; display: block; text-align:center;" />
+					</l-painter-view>
+				</l-painter-view>
+			</l-painter>
+		</demo-block> -->
+		<!-- <demo-block title="QRcode 二维码">
+			<l-painter>
+				<l-painter-qrcode text="limeui.qcoon.cn" css="width: 200rpx; height: 200rpx" />
+			</l-painter>
+		</demo-block> -->
+		<demo-block title="栗子海报">
+		<image v-if="picture2" :src="picture2" mode="widthFix"></image>
+		<l-painter css="width: 750rpx; padding-bottom: 100rpx; background: linear-gradient(180deg,#ff971b 0%, #ff5000 100%)" 
+				@fail="fail"
+				@done="done"
+				pathType="url"
+				ref="poster"
+				performance
+				>
+			<l-painter-image src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"  css="background: #ffffff; object-fit: cover; margin-left: 40rpx; margin-top: 40rpx; width: 84rpx; border: 2rpx solid #ffffff; box-sizing: border-box; height: 84rpx; border-radius: 50%;"/>
+			<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
+				<l-painter-text text="隔壁老王" css="display: block; padding-bottom: 10rpx; color: #ffffff; font-size: 32rpx; fontWeight: bold"/>
+				<l-painter-text text="为您挑选了一个好物?" css="color: rgba(255,255,255,.7); font-size: 24rpx"/>
+			</l-painter-view>
+			<l-painter-view css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #ffffff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
+				<l-painter-image src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"  css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx;"/>
+				<l-painter-view css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;">
+					<l-painter-text text="￥" css="vertical-align: bottom"/>
+					<l-painter-text text="39" css="vertical-align: bottom; font-size: 58rpx"/>
+					<l-painter-text text=".39" css="vertical-align: bottom"/>
+					<l-painter-text text="￥59.99" css="vertical-align: bottom; padding-left: 10rpx; font-weight: normal; text-decoration: line-through; color: #999999"/>
+				</l-painter-view>
+				<l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
+					<l-painter-text text="自营" css="color: #212121; background: #ffb400;"/>
+					<l-painter-text text="30天最低价" css="margin-left: 16rpx; background: #fff4d9; text-decoration: line-through;"/>
+					<l-painter-text text="满减优惠" css="margin-left: 16rpx; background: #fff4d9"/>
+					<l-painter-text text="超高好评" css="margin-left: 16rpx; background: #fff4d9"/>
+				</l-painter-view>
+				<l-painter-view css="margin-top: 30rpx; display: flex">
+					<l-painter-text uid="tag" css="position:absolute; top: 6rpx; padding: 5rpx 10rpx; color: #212121; background: #ffb400; font-size: 24rpx" text="京东自营"></l-painter-text>
+					<l-painter-text css="text-indent: calc(tag.width + 10rpx); flex: 1; padding-right: 20rpx; box-sizing: border-box; line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx;" 
+						text="360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝"></l-painter-text>
+					<l-painter-qrcode css="width: 128rpx; height: 128rpx;" text="limeui.qcoon.cn"></l-painter-qrcode>
+				</l-painter-view>
+			</l-painter-view>
+		</l-painter>
+		<button type="default" @click="save">save</button>
+	</demo-block>
+	</view>
+</template>
+
+<script>
+	export default {
+		data: () => ({
+			picture: '',
+			picture2: '',
+			show: false,
+			"poster": {
+					"css": {
+						"width": "750rpx",
+						"height": "1333rpx"
+					},
+					"views": [{
+						"type": "image",
+						"src": "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg",
+						"css": {
+							"width": "750rpx",
+							"height": "1333rpx",
+							"background": "white",
+							"position": "fixed",
+							"top": "0",
+							"left": "0",
+							"zIndex": -1
+						}
+					}, {
+						"css": {
+							"width": "750rpx",
+							"position": "fixed",
+							"top": "610rpx",
+							"left": "303rpx"
+						},
+						"views": [{
+							"type": "view",
+							"css": {
+								"width": "150rpx",
+								"height": "150rpx",
+								"background": "#FFF"
+							},
+							"views": [{
+								"type": "image",
+								"src": "data:image/png;base64,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",
+								"css": {
+									"width": "138rpx",
+									"height": "138rpx",
+									"marginTop": "6rpx",
+									"marginLeft": "6rpx"
+								}
+							}]
+						}]
+					}]
+				},
+		}),
+		mounted() {
+			this.$refs.poster.canvasToTempFilePathSync({
+				fileType: 'jpg',
+				quality: 1,
+				success: (res) => {
+					console.log(`mounted`, res.tempFilePath)
+					this.picture2 = res.tempFilePath
+					this.saveImage()
+				}
+			})
+		},
+		methods: {
+			close() {
+				this.show = false
+			},
+			fail(v) {
+				console.log(v)
+			},
+			done(v) {
+				console.log('绘制完成:')
+			},
+			save() {
+				this.$refs.poster.canvasToTempFilePathSync({
+					fileType: 'jpg',
+					quality: 1,
+					success: (res) => {
+						console.log(res.tempFilePath)
+						this.picture2 = res.tempFilePath
+						this.saveImage()
+					},
+					fail(e) {
+						console.log('???????????',e)
+					}
+				})
+			},
+			// 保存图征
+			saveImage() {
+				// #ifndef H5
+				uni.saveImageToPhotosAlbum({
+					filePath: this.picture,
+					success(res) {
+						uni.showToast({
+							title: '已保存到相册',
+							icon: 'success',
+							duration: 2000
+						});
+					},
+				});
+				// #endif
+			}
+		}
+	};
+</script>
+
+<style lang="stylus" scoped>
+
+</style>
diff --git a/src/uni_modules/lime-painter/hybrid/html/index.html b/src/uni_modules/lime-painter/hybrid/html/index.html
new file mode 100644
index 00000000..fdf884e6
--- /dev/null
+++ b/src/uni_modules/lime-painter/hybrid/html/index.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title></title>
+	<style type="text/css">
+		html,
+		body,
+		canvas {
+			padding: 0;
+			margin: 0;
+			width: 100%;
+			height: 100%;
+			overflow-y: hidden;
+			background-color: transparent;
+		}
+	</style>
+</head>
+
+<body>
+	<canvas id="lime-painter"></canvas>
+	<script type="text/javascript" src="./uni.webview.1.5.3.js"></script>
+	<script type="text/javascript" src="./painter.js"></script>
+	<script> 
+		var cache = [];
+		var painter = null;
+		var canvas = null;
+		var context = null;
+		var timer = null;
+		var pixelRatio = 1;
+		console.log = function (...args) {
+			postMessage(args);
+		};
+		// function stringify(key, value) {
+		// 	if (typeof value === 'object' && value !== null) {
+		// 		if (cache.indexOf(value) !== -1) {
+		// 			return;
+		// 		}
+		// 		cache.push(value);
+		// 	}
+		// 	return value;
+		// };
+
+		function emit(event, data) {
+			postMessage({
+				event,
+				data: (typeof data !== 'object' && data !== null ? data : JSON.stringify(data)) 
+			});
+			cache = [];
+		};
+		function postMessage(data) {
+			uni.postMessage({
+				data
+			});
+		};
+		
+		function init(dpr) {
+			canvas = document.querySelector('#lime-painter');
+			context = canvas.getContext('2d');
+			pixelRatio = dpr || window.devicePixelRatio;
+			painter = new Painter({
+				id: 'lime-painter',
+				context,
+				canvas,
+				pixelRatio,
+				width: canvas.offsetWidth,
+				height: canvas.offsetHeight,
+				listen: {
+					onProgress(v) {
+						emit('progressChange', v);
+					},
+					onEffectFail(err) {
+						//console.error(err)
+						emit('fail', err);
+					}
+				}
+			});
+			emit('inited', true);
+		};
+		function save(args) {
+			delete args.success;
+			delete args.fail;
+			clearTimeout(timer);
+			timer = setTimeout(() => {
+				const path = painter.save(args);
+				if (typeof path == 'string') {
+					const index = Math.ceil(path.length / 8);
+					for (var i = 0; i < 8; i++) {
+						if (i == 7) {
+							emit('success', path.substr(i * index, index));
+						} else {
+							emit('file', path.substr(i * index, index));
+						}
+					};
+				} else {
+					// console.log('canvas no data')
+					emit('fail', 'canvas no data');
+				};
+			}, 30);
+		};
+		async function source(args) {
+			let size = await painter.source(args);
+			emit('layoutChange', size);
+			if(!canvas.height) {
+				console.log('canvas no size')
+				emit('fail', 'canvas no size');
+			}
+			painter.render().catch(err => {
+				// console.error(err)
+				emit('fail', err);
+			});
+		};
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/uni_modules/lime-painter/hybrid/html/painter.js b/src/uni_modules/lime-painter/hybrid/html/painter.js
new file mode 100644
index 00000000..de93edb4
--- /dev/null
+++ b/src/uni_modules/lime-painter/hybrid/html/painter.js
@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Painter={})}(this,(function(t){"use strict";var e=function(){return e=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var r in e=arguments[i])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t},e.apply(this,arguments)};function i(t,e,i,n){return new(i||(i=Promise))((function(r,o){function s(t){try{h(n.next(t))}catch(t){o(t)}}function a(t){try{h(n.throw(t))}catch(t){o(t)}}function h(t){var e;t.done?r(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,a)}h((n=n.apply(t,e||[])).next())}))}function n(t,e){var i,n,r,o,s={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return o={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function a(o){return function(a){return function(o){if(i)throw new TypeError("Generator is already executing.");for(;s;)try{if(i=1,n&&(r=2&o[0]?n.return:o[0]?n.throw||((r=n.return)&&r.call(n),0):n.next)&&!(r=r.call(n,o[1])).done)return r;switch(n=0,r&&(o=[2&o[0],r.value]),o[0]){case 0:case 1:r=o;break;case 4:return s.label++,{value:o[1],done:!1};case 5:s.label++,n=o[1],o=[0];continue;case 7:o=s.ops.pop(),s.trys.pop();continue;default:if(!(r=s.trys,(r=r.length>0&&r[r.length-1])||6!==o[0]&&2!==o[0])){s=0;continue}if(3===o[0]&&(!r||o[1]>r[0]&&o[1]<r[3])){s.label=o[1];break}if(6===o[0]&&s.label<r[1]){s.label=r[1],r=o;break}if(r&&s.label<r[2]){s.label=r[2],s.ops.push(o);break}r[2]&&s.ops.pop(),s.trys.pop();continue}o=e.call(t,s)}catch(t){o=[6,t],n=0}finally{i=r=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,a])}}}var r={MP_WEIXIN:"mp-weixin",MP_QQ:"mp-qq",MP_ALIPAY:"mp-alipay",MP_BAIDU:"mp-baidu",MP_TOUTIAO:"mp-toutiao",MP_DINGDING:"mp-dingding",H5:"h5",WEB:"web",PLUS:"plus"},o="width",s="height",a="margin",h="center",c="flex-start",f="flex-end",d=["Top","Right","Bottom","Left"],l="left",u="right",p="top",g="bottom",v="middle",y=["contentSize","clientSize","borderSize","offsetSize"],b="row",x="column",w={TOP:p,MIDDLE:v,BOTTOM:g},m={LEFT:l,CENTER:h,RIGHT:u},S="view",z="text",I="image",M="qrcode",k="block",B="inline-block",W="none",P="flex",O="absolute",T="fixed",L="transparent",R="fill",F={display:k,color:"#000000",lineHeight:"1.4em",fontSize:14,fontWeight:400,fontFamily:"sans-serif",lineCap:"butt",flexDirection:b,flexWrap:"nowrap",textAlign:l,alignItems:c,justifyContent:c,position:"static",transformOrigin:"".concat(h," ").concat(h)},A={upx2px:function(t){return window.innerWidth/750*t},getSystemInfoSync:function(){return{screenWidth:window.innerWidth,screenHeight:window.innerHeight}},getImageInfo:function(t){var e=t.src,i=t.success,n=t.fail,r=new Image;r.onload=function(){i({width:r.naturalWidth,height:r.naturalHeight,path:r.src,src:e})},r.onerror=n,r.src=e}},E="object",j="undefined",C=typeof window==E?typeof uni==j||typeof uni!==j&&!uni.addInterceptor?r.WEB:r.H5:typeof swan==E?r.MP_BAIDU:typeof tt==E?r.MP_TOUTIAO:typeof plus===E?r.PLUS:typeof wx==E?r.MP_WEIXIN:void 0,H=C==r.MP_WEIXIN?wx:typeof uni!=j?uni.getImageInfo?{upx2px:function(t){return uni.upx2px(t)},getSystemInfoSync:function(){return uni.getSystemInfoSync()},getImageInfo:function(t){return uni.getImageInfo(t)},downloadFile:function(t){return uni.downloadFile(t)}}:Object.assign(uni,A):typeof window!=j?A:uni;if(!H.upx2px){var D=((H.getSystemInfoSync&&H.getSystemInfoSync()).screenWidth||375)/750;H.upx2px=function(t){return D*t}}function $(t){return/^-?\d+(\.\d+)?$/.test(t)}function Y(t,e,i){if($(t))return 1*t;if("string"==typeof t){var n=/^-?([0-9]+)?([.]{1}[0-9]+){0,1}(em|rpx|vw|vh|px|%)$/g.exec(t);if(!t||!n)return 0;var r=n[3];t=parseFloat(t);var o=0;if("rpx"===r)o=H.upx2px(t);else if("px"===r)o=1*t;else if("%"===r&&e)o=t*Y(e)/100;else if("em"===r&&e)o=t*Y(e||14);else if(["vw","vh"].includes(r)){var s=H.getSystemInfoSync(),a=s.screenWidth,h=s.screenHeight;o=t*("vw"==r?a:h)/100}return 1*o.toFixed(2)}return 0}function U(t){return/%$/.test(t)}function N(t){return/^-?([0-9]+)?([.]{1}[0-9]+){0,1}(rpx|px)$/.test(t)}var _=function(t){return!(!t||!t.startsWith("linear")&&!t.startsWith("radial"))},X=function(t,e,i,n,r,o){t.startsWith("linear")?function(t,e,i,n,r,o){for(var s=function(t,e,i,n,r){void 0===n&&(n=0);void 0===r&&(r=0);var o=t.match(/([-]?\d{1,3})deg/),s=o&&o[1]?parseFloat(o[1]):0;s>=360&&(s-=360);s<0&&(s+=360);if(0===(s=Math.round(s)))return{x0:Math.round(e/2)+n,y0:i+r,x1:Math.round(e/2)+n,y1:r};if(180===s)return{x0:Math.round(e/2)+n,y0:r,x1:Math.round(e/2)+n,y1:i+r};if(90===s)return{x0:n,y0:Math.round(i/2)+r,x1:e+n,y1:Math.round(i/2)+r};if(270===s)return{x0:e+n,y0:Math.round(i/2)+r,x1:n,y1:Math.round(i/2)+r};var a=Math.round(180*Math.asin(e/Math.sqrt(Math.pow(e,2)+Math.pow(i,2)))/Math.PI);if(s===a)return{x0:n,y0:i+r,x1:e+n,y1:r};if(s===180-a)return{x0:n,y0:r,x1:e+n,y1:i+r};if(s===180+a)return{x0:e+n,y0:r,x1:n,y1:i+r};if(s===360-a)return{x0:e+n,y0:i+r,x1:n,y1:r};var h=0,c=0,f=0,d=0;if(s<a||s>180-a&&s<180||s>180&&s<180+a||s>360-a){var l=s*Math.PI/180,u=s<a||s>360-a?i/2:-i/2,p=Math.tan(l)*u,g=s<a||s>180-a&&s<180?e/2-p:-e/2-p;h=-(f=p+(v=Math.pow(Math.sin(l),2)*g)),c=-(d=u+v/Math.tan(l))}if(s>a&&s<90||s>90&&s<90+a||s>180+a&&s<270||s>270&&s<360-a){var v;l=(90-s)*Math.PI/180,p=s>a&&s<90||s>90&&s<90+a?e/2:-e/2,u=Math.tan(l)*p,g=s>a&&s<90||s>270&&s<360-a?i/2-u:-i/2-u;h=-(f=p+(v=Math.pow(Math.sin(l),2)*g)/Math.tan(l)),c=-(d=u+v)}return h=Math.round(h+e/2)+n,c=Math.round(i/2-c)+r,f=Math.round(f+e/2)+n,d=Math.round(i/2-d)+r,{x0:h,y0:c,x1:f,y1:d}}(r,t,e,i,n),a=s.x0,h=s.y0,c=s.x1,f=s.y1,d=o.createLinearGradient(a,h,c,f),l=r.match(/linear-gradient\((.+)\)/)[1],u=q(l.substring(l.indexOf(",")+1)),p=0;p<u.colors.length;p++)d.addColorStop(u.percents[p],u.colors[p]);o.setFillStyle(d)}(e,i,n,r,t,o):t.startsWith("radial")&&function(t,e,i,n,r,o){for(var s=q(r.match(/radial-gradient\((.+)\)/)[1]),a=Math.round(t/2)+i,h=Math.round(e/2)+n,c=o.createRadialGradient(a,h,0,a,h,Math.max(t,e)/2),f=0;f<s.colors.length;f++)c.addColorStop(s.percents[f],s.colors[f]);o.setFillStyle(c)}(e,i,n,r,t,o)};function q(t){for(var e=[],i=[],n=0,r=t.substring(0,t.length-1).split("%,");n<r.length;n++){var o=r[n];e.push(o.substring(0,o.lastIndexOf(" ")).trim()),i.push(o.substring(o.lastIndexOf(" "),o.length)/100)}return{colors:e,percents:i}}function G(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function V(){return V=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t},V.apply(this,arguments)}function J(t,e){return J=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},J(t,e)}function Q(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}function Z(t,e){var i="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(i)return(i=i.call(t)).next.bind(i);if(Array.isArray(t)||(i=function(t,e){if(t){if("string"==typeof t)return Q(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?Q(t,e):void 0}}(t))||e&&t&&"number"==typeof t.length){i&&(t=i);var n=0;return function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function K(t){return"number"==typeof t}function et(t){return"auto"===t||null===t}function it(t){return/%$/.test(t)}var nt=I,rt=z,ot=S,st=M,at=B,ht=O,ct=T;function ft(t){return t.replace(/-([a-z])/g,(function(t,e){return e.toUpperCase()}))}function dt(t,e){var i,n,r=function(t){var e=t.match(/([a-z]+)/)[1];return[e,ft(t.split(e)[1])]}(t),o=r[0],s=r[1],a=e.split(" ");if(s)return(i={})[o+s]=e,i;if(a.length&&!s){var h=a[0],c=a[1],f=a[2],l=a[3];return(n={})[o+d[0]]=h,n[o+d[1]]=c||h,n[o+d[2]]=f||h,n[o+d[3]]=l||c||h,n}}function lt(t){t=t.trim();for(var e=new Array,i="+",n="",r=t.length,o=0;o<r;++o){if("."===t[o]||!isNaN(Number(t[o]))&&" "!==t[o])n+=t[o];else if("("===t[o]){for(var s=1,a=o;s>0;)"("===t[a+=1]&&(s+=1),")"===t[a]&&(s-=1);n="".concat(lt(t.slice(o+1,a))),o=a}if(isNaN(Number(t[o]))&&"."!==t[o]||o===r-1){var h=parseFloat(n);switch(i){case"+":e.push(h);break;case"-":e.push(-h);break;case"*":e.push(e.pop()*h);break;case"/":e.push(e.pop()/h)}i=t[o],n=""}}for(var c=0;e.length;)c+=e.pop();return c}var ut,pt=0,gt=function(){function t(){G(this,"elements",[]),G(this,"afterElements",[]),G(this,"beforeElements",[]),G(this,"ids",[]),G(this,"width",0),G(this,"height",0),G(this,"top",0),G(this,"left",0),G(this,"pre",null),G(this,"offsetX",0),G(this,"offsetY",0),pt++,this.id=pt}var e=t.prototype;return e.fixedBind=function(t,e){void 0===e&&(e=0),this.container=e?t.parent:t.root,this.container.fixedLine=this,this.fixedAdd(t)},e.fixedAdd=function(t){if(!this.ids.includes(t.id)){this.ids.push(t.id),this.elements.push(t);var e=t.computedStyle.zIndex;(void 0===e?0:e)>=0?this.afterElements.push(t):this.beforeElements.push(t),this.refreshLayout()}},e.bind=function(t){this.container=t.parent,this.container.line=null,this.container.lines?(this.container.lines.push(this),this.pre=this.getPreLine(),this.top=this.pre.top+this.pre.height,this.left=this.container.contentSize.left):(this.top=this.container.contentSize.top,this.left=this.container.contentSize.left,this.container.lines=[this]),this.isInline=t.isInline(),this.container.line=this,this.outerWidth=t.parent&&t.parent.contentSize.width?t.parent.contentSize.width:1/0,this.add(t)},e.getPreLine=function(){return this.container.lines[this.container.lines.length-2]},e.canIEnter=function(t){return!((100*t.offsetSize.width+100*this.width)/100>this.outerWidth)||(this.closeLine(),!1)},e.closeLine=function(){delete this.container.line},e.add=function(t){this.ids.includes(t.id)||(this.ids.push(t.id),this.elements.push(t),this.refreshWidthHeight(t))},e.refreshWidthHeight=function(t){t.offsetSize.height>this.height&&(this.height=t.offsetSize.height),this.width+=t.offsetSize.width||0,(this.container.lineMaxWidth||0)<this.width&&(this.container.lineMaxWidth=this.width)},e.refreshXAlign=function(){if(this.isInline){var t=this.container.contentSize.width-this.width,e=this.container.style.textAlign;e===h?t/=2:e===l&&(t=0),this.offsetX=t}},e.getOffsetY=function(t){if(!t||!t.style)return 0;var e=(t.style||{}).verticalAlign;return e===g?this.height-t.contentSize.height:e===v?(this.height-t.contentSize.height)/2:0},e.setIndent=function(t){var e=t.style.textIndent;if(e&&/^calc/.test(e)){var i=/^calc\((.+)\)$/.exec(e);if(i&&i[1]){var n=i[1].replace(/([^\s\(\+\-\*\/]+)\.(left|right|bottom|top|width|height)/g,(function(e){var i=e.split("."),n=i[0],r=i[1],o=t.parent.querySelector(n);if(o&&o.offsetSize){var s={right:o.offsetSize.left+o.offsetSize.width,bottom:o.offsetSize.top+o.offsetSize.height};return o.offsetSize[r]||s[r]||0}})),r=lt(n.replace(new RegExp(/-?[0-9]+(\.[0-9]+)?(rpx|px|%)/,"g"),Y));t.style.textIndent=r}}},e.layout=function(t,e){var i=this;this.refreshXAlign(),this.pre?(this.top=this.pre.top+this.pre.height+this.offsetY,this.left=e+this.offsetX):(this.top=Math.max(this.top,this.container.contentSize.top,t)+this.offsetY,this.left=Math.max(this.left,this.container.contentSize.left,e)+this.offsetX),this.elements.forEach((function(t,e){i.setIndent(t);var n=i.elements[e-1],r=i.getOffsetY(t);t.style.top=i.top+r,t.style.left=n?n.offsetSize.left+n.offsetSize.width:i.left,t.getBoxPosition()}))},e.refreshLayout=function(){this.afterElements=this.afterElements.sort((function(t,e){return t.computedStyle.zIndex-e.computedStyle.zIndex})),this.beforeElements=this.beforeElements.sort((function(t,e){return t.computedStyle.zIndex-e.computedStyle.zIndex}))},t}(),vt="lineMaxHeight",yt="lineMaxWidth",bt=((ut={})[b]={width:o,contentWidth:o,lineMaxWidth:yt,left:l,top:p,height:s,lineMaxHeight:vt,marginLeft:"marginLeft"},ut[x]={width:s,contentWidth:s,lineMaxWidth:yt,left:p,top:l,height:o,lineMaxHeight:vt,marginLeft:"marginTop"},ut),xt=function(t){var e,i;function n(){var e;return G(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e=t.call(this)||this),"outerWidth",0),e.exactValue=0,e.flexTotal=0,e.width=0,e.key=null,e.flexDirection="row",e}i=t,(e=n).prototype=Object.create(i.prototype),e.prototype.constructor=e,J(e,i);var r=n.prototype;return r.bind=function(t){this.container=t.parent,this.container.line=this,this.container.lines?(this.container.lines.push(this),this.pre=this.getPreLine(),this.top=this.pre.top+this.pre.height,this.left=this.container.contentSize.left):(this.top=this.container.contentSize.top,this.left=this.container.contentSize.left,this.container.lines=[this]),t.parent&&(this.flexDirection=t.parent.style.flexDirection,this.key=bt[this.flexDirection]),this.initHeight(t),this.outerWidth=t.parent&&t.parent.contentSize[this.key.contentWidth]?t.parent.contentSize[this.key.contentWidth]:1/0,this.add(t)},r.add=function(t){this.ids.push(t.id);var e=t.style.flex;K(e)?this.flexTotal+=e:K(this.getWidth(t.style))&&(this.exactValue+=this.getWidth(t.offsetSize)),this.elements.push(t),this.refreshWidthHeight(t),t.next||this.closeLine()},r.closeLine=function(){this.calcFlex()},r.initHeight=function(t){this[this.key.height]=0},r.getWidth=function(t){return t[this.key.width]||0},r.getHeight=function(t){return t[this.key.height]||0},r.setWidth=function(t,e){t[this.key.width]=e},r.setHeight=function(t,e){t[this.key.height]=e},r.calcFlex=function(){var t=this,e=this.container.contentSize[this.key.contentWidth],i=0;this.elements.forEach((function(n){var r=n.style,o=n.contentSize,s=t.getWidth(r)||t.getWidth(o);K(r.flex)&&(s=r.flex/t.flexTotal*(e-t.exactValue)),t.setWidth(n.computedStyle,s),n.isFlexCalc=!0,delete n.line,delete n.lines,delete n.lineMaxWidth,n.getBoxWidthHeight(),i=Math.max(i,t.getHeight(n.offsetSize))})),this.setHeight(this,i)},r.refreshWidthHeight=function(t){var e=this.container.style.alignItems;e&&!t.style.alignSelf&&(t.style.alignSelf=e);var i=this.getHeight(t.offsetSize);i>this[this.key.height]&&(this.container[this.key.lineMaxHeight]=this[this.key.height]=i),this[this.key.width]+=this.getWidth(t.offsetSize);var n=Math.min(this.getWidth(this),!this.getWidth(this.container.contentSize)&&1/0);(this.container[this.key.lineMaxWidth]||0)<n&&(this.container[this.key.lineMaxWidth]=n)},r.refreshXAlign=function(){var t=this,e=this.elements.reduce((function(e,i){return e+t.getWidth(i.offsetSize)}),0),i=(this.outerWidth==1/0?0:this.outerWidth-e)||0,n=this.container.style.justifyContent;n===h?i/=2:n===c?i=0:["space-between","space-around"].includes(n)&&(!function(e,i){void 0===i&&(i=0),i/=t.elements.length+(e?-1:1),t.elements.forEach((function(n,r){var o;e&&!r||(n.style.margin?n.style.margin[t.key.marginLeft]+=i:n.style.margin=((o={})[t.key.marginLeft]=i,o),n.getBoxPosition())})),i=0}("space-between"==n,i),i=0),this.offsetX=i||0,this.refreshYAlign()},r.refreshYAlign=function(){var t=this;if(1==this.container.lines.length)return 0;var e=this.container.lines.reduce((function(e,i){return e+t.getHeight(i)}),0),i=this.container.style.alignItems,n=this.getHeight(this.container.contentSize);if(i===h){var r=(n-e)/(this.container.lines.length+1);this.container.lines.forEach((function(t){t.offsetY=r}))}if(i===f){var o=n-e;this.container.lines[0].offsetY=o}},r.getOffsetY=function(t){if(this.container.lines.length>1)return 0;var e=t.style.alignSelf,i=this.getHeight(this.container.contentSize),n=i-this.getHeight(t.offsetSize);return e===f?n:e===h?n/2:"stretch"===e?(n&&t.name==S&&(t.style[this.key.width]=this.getWidth(t.offsetSize),t.style[this.key.height]=i,delete t.line,delete t.lines,t.getBoxWidthHeight()),0):0},r.layout=function(t,e){var i=this;this.refreshXAlign(),this.pre?(this.top=this.pre.top+this.pre.height+this.offsetY,this.left=e+this.offsetX):(this.top=Math.max(this.top,this.container.contentSize.top,t)+this.offsetY,this.left=Math.max(this.left,this.container.contentSize.left,e)+this.offsetX),this.elements.forEach((function(t,e){i.setIndent(t);var n=i.elements[e-1],r=i.getOffsetY(t);t.style[i.key.top]=i[i.key.top]+r,t.style[i.key.left]=n?n.offsetSize[i.key.left]+i.getWidth(n.offsetSize):i[i.key.left],t.getBoxPosition()}))},n}(gt),wt=I,mt=z,St=S,zt=k,It=B,Mt=P,kt=O,Bt=T,Wt=0,Pt={left:null,top:null,width:null,height:null},Ot=new Map,Tt=function(){function t(t,e,i,n){var r=this;G(this,"id",Wt++),G(this,"style",{left:null,top:null,width:null,height:null}),G(this,"computedStyle",{}),G(this,"originStyle",{}),G(this,"children",{}),G(this,"layoutBox",V({},Pt)),G(this,"contentSize",V({},Pt)),G(this,"clientSize",V({},Pt)),G(this,"borderSize",V({},Pt)),G(this,"offsetSize",V({},Pt)),this.ctx=n,this.root=i,e&&(this.parent=e),this.name=t.type||t.name,this.attributes=this.getAttributes(t);var o=function(t,e){var i,n=["color","fontSize","lineHeight","verticalAlign","fontWeight","textAlign"],r=t.type,o=void 0===r?ot:r,s=t.styles,h=void 0===s?{}:s,c=(e||{}).computedStyle,f=Object.assign({},F);if([rt,nt,st].includes(o)&&!h.display&&(f.display=at),c)for(var l=0;l<n.length;l++){var u=n[l];(h[u]||c[u])&&(h[u]=h[(i=u,i.replace(/([A-Z])/g,"-$1").toLowerCase())]||h[u]||c[u])}for(var p=function(t){var e,i,n,r,s=h[t];if(/-/.test(t)&&(t=ft(t),f[t]=s),/^(box|text)?shadow$/i.test(t)){var c=[];return s.replace(/((-?\d+(rpx|px|vw|vh)?\s+?){3})(.+)/,(function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];c=t[1].match(/-?\d+(rpx|px|vw|vh)?/g).map((function(t){return Y(t)})).concat(t[4])})),/^text/.test(t)?f.textShadow=c:f.boxShadow=c,"continue"}if(/^border/i.test(t)&&!/radius$/i.test(t)){var l=t.match(/^border([BTRLa-z]+)?/)[0],u=t.match(/[W|S|C][a-z]+/),p=s.replace(/([\(,])\s+|\s+([\),])/g,"$1$2").split(" ").map((function(t){return/^\d/.test(t)?Y(t,""):t}));return f[l]||(f[l]={}),1==p.length&&u?f[l][l+u[0]]=p[0]:f[l]=((e={})[l+"Width"]=$(p[0])?p[0]:0,e[l+"Style"]=p[1]||"solid",e[l+"Color"]=p[2]||"black",e),"continue"}if(/^background(color)?$/i.test(t))return f.backgroundColor=s,"continue";if(/^objectPosition$/i.test(t))return f[t]=s.split(" "),"continue";if(/^backgroundPosition$/i.test(t))return f[t]=s.split(" "),"continue";if(/padding|margin|radius/i.test(t)){var g=/radius$/i.test(t),v="borderRadius",y=g?v:t.match(/[a-z]+/)[0],b=function(t,e){return"border".concat(t).concat(e,"Radius")},x=[0,0,0,0].map((function(t,e){return g?[b(d[0],d[3]),b(d[0],d[1]),b(d[2],d[1]),b(d[2],d[3])][e]:y+d[e]}));if("padding"===t||t===a||/^(border)?radius$/i.test(t)){p="".concat(s).split(" ").map((function(e){return/^-?\d+(rpx|px|vh|vw)?$/.test(e)?Y(e):t!=a&&/auto/.test(e)?0:e}),[])||[0];var w=g?v:t,m=p[0],S=p[1],z=p[2],I=p[3];f[w]=((i={})[x[0]]=et(m)?0:m,i[x[1]]=$(S)||et(S)?S:m,i[x[2]]=et($(z)?z:m)?0:$(z)?z:m,i[x[3]]=$(I)?I:null!=S?S:m,i)}else"object"==typeof f[y]||(f[y]=((n={})[x[0]]=f[y]||0,n[x[1]]=f[y]||0,n[x[2]]=f[y]||0,n[x[3]]=f[y]||0,n)),f[y][t]=y==a&&et(s)||it(s)?s:Y(s);return"continue"}if(/^transform$/i.test(t))return f[t]={},s.replace(/([a-zA-Z]+)\(([0-9,-\.%rpxdeg\s]+)\)/g,(function(e,i,n){var r=n.split(",").map((function(t){return t.replace(/(^\s*)|(\s*$)/g,"")})),o=function(t,e){return t.includes("deg")?1*t:e&&!it(e)?Y(t,e):t};i.includes("matrix")?f[t][i]=r.map((function(t){return 1*t})):i.includes("rotate")?f[t][i]=1*n.match(/^-?\d+(\.\d+)?/)[0]:/[X, Y]/.test(i)?f[t][i]=/[X]/.test(i)?o(r[0],h.width):o(r[0],h.height):(f[t][i+"X"]=o(r[0],h.width),f[t][i+"Y"]=o(r[1]||r[0],h.height))})),"continue";if(/^font$/i.test(t)&&console.warn("font 不支持简写"),/^textindent/i.test(t)&&(f[t]=/^calc/.test(s)?s:Y(s)),/^textstroke/i.test(t)){var M=t.match(/color|width|type$/i),k=(l="textStroke",s.split(" ").map((function(t){return/^\d+(rpx|px|vh|vw)?$/.test(t)?Y(t):t})));return M?f[l]?f[l][M[0]]=k[0]:f[l]=((r={})[M[0]]=k[0],r):f[l]={width:k[0],color:k[1],type:k[2]},"continue"}/^left|top$/i.test(t)&&![ht,ct].includes(h.position)?f[t]=0:f[t]=/^-?[\d\.]+(px|rpx|vw|vh)?$/.test(s)?Y(s):/em$/.test(s)&&o==rt?Y(s,h.fontSize):s},g=0,v=Object.keys(h);g<v.length;g++)p(v[g]);return f}(t,e);this.isAbsolute=o.position==kt,this.isFixed=o.position==Bt,this.originStyle=o,this.styles=t.styles,Object.keys(o).forEach((function(t){Object.defineProperty(r.style,t,{configurable:!0,enumerable:!0,get:function(){return o[t]},set:function(e){o[t]=e}})}));var s={contentSize:V({},this.contentSize),clientSize:V({},this.clientSize),borderSize:V({},this.borderSize),offsetSize:V({},this.offsetSize)};Object.keys(s).forEach((function(t){Object.keys(r[t]).forEach((function(e){Object.defineProperty(r[t],e,{configurable:!0,enumerable:!0,get:function(){return s[t][e]},set:function(i){s[t][e]=i}})}))})),this.computedStyle=this.style}var e=t.prototype;return e.add=function(t){t.parent=this,this.children[t.id]=t},e.getChildren=function(){var t=this;return Object.keys(this.children).map((function(e){return t.children[e]}))},e.prev=function(t){void 0===t&&(t=this);var e=t.parent.getChildren();return e[e.findIndex((function(e){return e.id==t.id}))-1]},e.querySelector=function(t){var e=this.getChildren();if("string"!=typeof t)return null;var i=e.find((function(e){var i=e.id,n=e.attributes;return i==t||n&&n.uid==t}));return i||(this.parent&&this.parent.querySelector&&this.parent.querySelector(t)||null)},e.getLineRect=function(t,e){var i={width:0,height:0},n=e?e.lines:this.parent&&this.parent.lines;return n&&n.find((function(e){return e.ids.includes(t)}))||i},e.setPosition=function(t,e){var i={left:o,top:s,right:o,bottom:s};Object.keys(i).forEach((function(n){var r=n==u?l:p;[u,g].includes(n)&&void 0!==t.style[n]&&!$(t.originStyle[r])?t.style[r]=e[i[n]]-t.offsetSize[i[n]]-Y(t.style[n],e[i[n]]):t.style[n]=Y(t.style[n],e[i[n]])}))},e.getAttributes=function(t){var e=t.attributes,i=void 0===e?{}:e,n=t.uid,r=t.url,o=t.src,s=t.replace,a=t.text;return n&&(i.uid=n),(r||o)&&(i.src=i.src||r||o),s&&(i.replace=s),a&&(i.text=a),i},e.getOffsetSize=function(t,e,i){void 0===i&&(i=y[3]);var n=e||{},r=n.margin,o=(r=void 0===r?{}:r).marginLeft,s=void 0===o?0:o,a=r.marginTop,h=void 0===a?0:a,c=r.marginRight,f=void 0===c?0:c,d=r.marginBottom,l=void 0===d?0:d,u=n.padding,p=(u=void 0===u?{}:u).paddingLeft,g=void 0===p?0:p,v=u.paddingTop,b=void 0===v?0:v,x=u.paddingRight,w=void 0===x?0:x,m=u.paddingBottom,S=void 0===m?0:m,z=n.border,I=(z=void 0===z?{}:z).borderWidth,M=void 0===I?0:I,k=n.borderTop,B=(k=void 0===k?{}:k).borderTopWidth,W=void 0===B?M:B,P=n.borderBottom,O=(P=void 0===P?{}:P).borderBottomWidth,T=void 0===O?M:O,L=n.borderRight,R=(L=void 0===L?{}:L).borderRightWidth,F=void 0===R?M:R,A=n.borderLeft,E=(A=void 0===A?{}:A).borderLeftWidth,j=void 0===E?M:E,C=s<0&&f<0?Math.abs(s+f):0,H=h<0&&l<0?Math.abs(h+l):0,D=s>=0&&f<0,$=h>=0&&l<0;return i==y[0]&&(this[i].left=t.left+s+g+j+(D?2*-f:0),this[i].top=t.top+h+b+W+($?2*-l:0),this[i].width=t.width+(this[i].widthAdd?0:C),this[i].height=t.height+(this[i].heightAdd?0:H),this[i].widthAdd=C,this[i].heightAdd=H),i==y[1]&&(this[i].left=t.left+s+j+(D<0?-f:0),this[i].top=t.top+h+W+($?-l:0),this[i].width=t.width+g+w,this[i].height=t.height+b+S),i==y[2]&&(this[i].left=t.left+s+j/2+(D<0?-f:0),this[i].top=t.top+h+W/2+($?-l:0),this[i].width=t.width+g+w+j/2+F/2,this[i].height=t.height+b+S+T/2+W/2),i==y[3]&&(this[i].left=t.left+(D<0?-f:0),this[i].top=t.top+($?-l:0),this[i].width=t.width+g+w+j+F+s+f,this[i].height=t.height+b+S+T+W+l+h),this[i]},e.layoutBoxUpdate=function(t,e,i,n){var r=this;if(void 0===i&&(i=-1),"border-box"==e.boxSizing){var o=e||{},s=o.border,a=(s=void 0===s?{}:s).borderWidth,h=void 0===a?0:a,c=o.borderTop,f=(c=void 0===c?{}:c).borderTopWidth,d=void 0===f?h:f,l=o.borderBottom,u=(l=void 0===l?{}:l).borderBottomWidth,p=void 0===u?h:u,g=o.borderRight,v=(g=void 0===g?{}:g).borderRightWidth,b=void 0===v?h:v,x=o.borderLeft,w=(x=void 0===x?{}:x).borderLeftWidth,m=void 0===w?h:w,S=o.padding,z=(S=void 0===S?{}:S).paddingTop,I=void 0===z?0:z,M=S.paddingRight,k=void 0===M?0:M,B=S.paddingBottom,W=void 0===B?0:B,P=S.paddingLeft,O=void 0===P?0:P;i||(t.width-=O+k+b+m),1!==i||n||(t.height-=I+W+d+p)}this.layoutBox&&(y.forEach((function(i){return r.layoutBox[i]=r.getOffsetSize(t,e,i)})),this.layoutBox=Object.assign({},this.layoutBox,this.layoutBox.borderSize))},e.getBoxPosition=function(){var t=this.computedStyle,e=this.fixedLine,i=this.lines,n=t.left,r=void 0===n?0:n,o=t.top,s=void 0===o?0:o,a=V({},this.contentSize,{left:r,top:s}),h=this.contentSize.top-this.offsetSize.top,c=this.contentSize.left-this.offsetSize.left;if(this.root.fixedLine&&!this.root.isDone){this.root.isDone=!0;for(var f,d=Z(this.root.fixedLine.elements);!(f=d()).done;){var l=f.value;l.setPosition(l,this.root.offsetSize),l.getBoxPosition()}}if(e)for(var u,p=Z(e.elements);!(u=p()).done;){var g=u.value,v=V({},this.borderSize,{left:r,top:s});g.setPosition(g,v);var y=this.borderSize.top-this.offsetSize.top,b=this.borderSize.left-this.offsetSize.left;g.style.left+=r+b,g.style.top+=s+y,g.getBoxPosition()}if(i)for(var x,w=Z(i);!(x=w()).done;){x.value.layout(a.top+h,a.left+c)}return this.layoutBoxUpdate(a,t),this.layoutBox},e.getBoxState=function(t,e){return this.isBlock(t)||this.isBlock(e)},e.isBlock=function(t){return void 0===t&&(t=this),t&&t.style.display==zt},e.isFlex=function(t){return void 0===t&&(t=this),t&&t.style.display==Mt},e.isInFlow=function(){return!(this.isAbsolute||this.isFixed)},e.inFlexBox=function(t){return void 0===t&&(t=this),!!t.isInFlow()&&(!!t.parent&&(!(!t.parent||t.parent.style.display!==Mt)||void 0))},e.isInline=function(t){return void 0===t&&(t=this),t&&t.style.display==It},e.contrastSize=function(t,e,i){var n=t;return i&&(n=Math.min(n,i)),e&&(n=Math.max(n,e)),n},e.measureText=function(t,e){var i=this.ctx.measureText(t),n=i.width,r=i.actualBoundingBoxAscent,o=i.actualBoundingBoxDescent;return{ascent:r,descent:o,width:n,fontHeight:r+o||.7*e+1}},e.getParentSize=function(t,e){if(void 0===t&&(t=this),void 0===e&&(e=!1),t&&t.parent){if(t.parent.contentSize.width)return t.parent.contentSize;if(e)return this.getParentSize(t.parent,e)}return null},e.getBoxWidthHeight=function(){var t=this,e=this.name,i=this.computedStyle,n=this.attributes,r=this.parent,o=void 0===r?{}:r,s=this.ctx,a=this.getChildren(),h=i.left,c=void 0===h?0:h,f=i.top,d=void 0===f?0:f,l=i.bottom,u=i.right,p=i.width,g=void 0===p?0:p,v=i.minWidth,y=i.maxWidth,b=i.minHeight,x=i.maxHeight,w=i.height,m=void 0===w?0:w,S=i.fontSize,z=i.fontWeight,I=i.fontFamily,M=i.fontStyle,k=i.position;i.textIndent;var B=i.lineClamp,W=i.lineHeight,P=i.padding,O=void 0===P?{}:P,T=i.margin,L=void 0===T?{}:T,R=i.border,F=(R=void 0===R?{}:R).borderWidth,A=void 0===F?0:F,E=i.borderRight,j=(E=void 0===E?{}:E).borderRightWidth,C=void 0===j?A:j,H=i.borderLeft,D=(H=void 0===H?{}:H).borderLeftWidth,$=void 0===D?A:D,U=o.contentSize&&o.contentSize.width,N=o.contentSize&&o.contentSize.height;if(it(g)&&U&&(g=Y(g,U)),it(g)&&!U&&(g=null),it(m)&&N&&(m=Y(m,N)),it(m)&&!N&&(m=null),it(v)&&U&&(v=Y(v,U)),it(y)&&U&&(y=Y(y,U)),it(b)&&N&&(b=Y(b,N)),it(x)&&N&&(x=Y(x,N)),i.padding&&U)for(var _ in i.padding)Object.hasOwnProperty.call(O,_)&&(O[_]=Y(O[_],U));var X=O.paddingRight,q=void 0===X?0:X,G=O.paddingLeft,V=void 0===G?0:G;if(i.margin&&[L.marginLeft,L.marginRight].includes("auto"))if(g){var J=U&&U-g-q-V-$-C||0;L.marginLeft==L.marginRight?L.marginLeft=L.marginRight=J/2:et(L.marginLeft)?L.marginLeft=J:L.marginRight=J}else L.marginLeft=L.marginRight=0;var Q=L.marginRight,Z=void 0===Q?0:Q,K=L.marginLeft,tt={width:g,height:m,left:0,top:0},nt=V+q+$+C+(void 0===K?0:K)+Z;if(this.offsetWidth=nt,e==mt&&!this.attributes.widths){var rt=n.text||"";s.save(),s.setFonts({fontFamily:I,fontSize:S,fontWeight:z,fontStyle:M}),rt.length,"\n"==rt&&(rt="",this.isBr=!0),(""+rt).split("\n").map((function(e){var i=Array.from(e).map((function(e){var i=""+(/^[\u4e00-\u9fa5]+$/.test(e)?"cn":e)+I+S+z+M,n=Ot.get(i);if(n)return{width:n,text:e};var r=t.measureText(e,S).width;return Ot.set(i,r),{width:r,text:e}})),n=t.measureText(e,S),r=n.fontHeight,o=n.ascent,s=n.descent;t.attributes.fontHeight=r,t.attributes.ascent=o,t.attributes.descent=s,t.attributes.widths||(t.attributes.widths=[]),t.attributes.widths.push({widths:i,total:i.reduce((function(t,e){return t+e.width}),0)})})),s.restore()}if(e==wt&&null==g){var ot=n.width,st=n.height;tt.width=this.contrastSize(Math.round(ot*m/st)||0,v,y),this.layoutBoxUpdate(tt,i,0)}if(e==mt&&null==g){var at=this.attributes.widths,ht=Math.max.apply(Math,at.map((function(t){return t.total})));if(o&&U>0&&(ht>U||this.isBlock(this))&&!this.isAbsolute&&!this.isFixed)ht=U;tt.width=this.contrastSize(ht,v,y),this.layoutBoxUpdate(tt,i,0)}if(e==mt&&(o.style.flex||!this.attributes.lines)){var ct=this.attributes.widths.length;this.attributes.widths.forEach((function(t){return t.widths.reduce((function(t,e,i){return t+e.width>tt.width?(ct++,e.width):t+e.width}),0)})),ct=B&&ct>B?B:ct,this.attributes.lines=ct}if(e==wt&&null==m){var ft=n.width,dt=n.height;n.text,tt.height=this.contrastSize(Y(tt.width*dt/ft)||0,b,x),this.layoutBoxUpdate(tt,i,1)}e==mt&&null==m&&(W=Y(W,S),tt.height=this.contrastSize(Y(this.attributes.lines*W),b,x),this.layoutBoxUpdate(tt,i,1,!0)),!g&&o&&o.children&&U&&(!this.isFlex(o)||o.isFlexCalc)&&([St,mt].includes(e)&&this.isFlex()||e==St&&this.isBlock(this)&&this.isInFlow())&&(tt.width=this.contrastSize(U-(o.isFlexCalc?0:nt),v,y),this.layoutBoxUpdate(tt,i)),g&&!it(g)&&(tt.width=this.contrastSize(g,v,y),this.layoutBoxUpdate(tt,i,0)),m&&!it(m)&&(tt.height=this.contrastSize(tt.height,b,x),this.layoutBoxUpdate(tt,i,1));var lt=0;if(a.length){var ut=null,pt=!1;a.forEach((function(e,n){e.getBoxWidthHeight();var r=a[n+1];if(r&&r.isInFlow()&&(e.next=r),!t.line||!t.line.ids.includes(e.id))if(e.isInFlow()&&!e.inFlexBox()){var o=t.getBoxState(ut,e);if(e.isBr)return pt=!0;t.line&&t.line.canIEnter(e)&&!o&&!pt?t.line.add(e):(pt=!1,(new gt).bind(e)),ut=e}else e.inFlexBox()?t.line&&(t.line.canIEnter(e)||"nowrap"==i.flexWrap)?t.line.add(e):(new xt).bind(e):e.isFixed?t.root.fixedLine?t.root.fixedLine.fixedAdd(e):(new gt).fixedBind(e):t.fixedLine?t.fixedLine.fixedAdd(e):(new gt).fixedBind(e,1)})),this.lines&&(lt=this.lines.reduce((function(t,e){return t+e.height}),0))}var vt=0,yt=0;if(!g&&(this.isAbsolute||this.isFixed)&&U){var bt=k==kt?U:this.root.width,zt=bt-(it(c)?Y(c,bt):c)-(it(u)?Y(u,bt):u);vt=i.left?zt:this.lineMaxWidth}if(!m&&(null!=d?d:this.isAbsolute||this.isFixed&&N)){var It=k==kt?N:this.root.height,Mt=It-(it(d)?Y(d,It):d)-(it(l)?Y(l,It):l);yt=i.top?Mt:0}if(g&&!it(g)||tt.width||(tt.width=vt||this.contrastSize((this.isBlock(this)&&!this.isInFlow()?U||o.lineMaxWidth:this.lineMaxWidth)||this.lineMaxWidth,v,y),this.layoutBoxUpdate(tt,i,0)),m||!lt&&!yt||(tt.height=yt||this.contrastSize(lt,b,x),this.layoutBoxUpdate(tt,i)),i.borderRadius&&this.borderSize&&this.borderSize.width)for(var _ in i.borderRadius)Object.hasOwnProperty.call(i.borderRadius,_)&&(i.borderRadius[_]=Y(i.borderRadius[_],this.borderSize.width));return this.layoutBox},e.layout=function(){return this.getBoxWidthHeight(),this.root.offsetSize=this.offsetSize,this.root.contentSize=this.contentSize,this.getBoxPosition(),this.offsetSize},t}(),Lt=function(){var t,e,i,n,r,o,s=[0,11,15,19,23,27,31,16,18,20,22,24,26,28,20,22,24,24,26,28,28,22,24,24,26,26,28,28,24,24,26,26,26,28,28,24,26,26,26,28,28],a=[3220,1468,2713,1235,3062,1890,2119,1549,2344,2936,1117,2583,1330,2470,1667,2249,2028,3780,481,4011,142,3098,831,3445,592,2517,1776,2234,1951,2827,1070,2660,1345,3177],h=[30660,29427,32170,30877,26159,25368,27713,26998,21522,20773,24188,23371,17913,16590,20375,19104,13663,12392,16177,14854,9396,8579,11994,11245,5769,5054,7399,6608,1890,597,3340,2107],c=[1,0,19,7,1,0,16,10,1,0,13,13,1,0,9,17,1,0,34,10,1,0,28,16,1,0,22,22,1,0,16,28,1,0,55,15,1,0,44,26,2,0,17,18,2,0,13,22,1,0,80,20,2,0,32,18,2,0,24,26,4,0,9,16,1,0,108,26,2,0,43,24,2,2,15,18,2,2,11,22,2,0,68,18,4,0,27,16,4,0,19,24,4,0,15,28,2,0,78,20,4,0,31,18,2,4,14,18,4,1,13,26,2,0,97,24,2,2,38,22,4,2,18,22,4,2,14,26,2,0,116,30,3,2,36,22,4,4,16,20,4,4,12,24,2,2,68,18,4,1,43,26,6,2,19,24,6,2,15,28,4,0,81,20,1,4,50,30,4,4,22,28,3,8,12,24,2,2,92,24,6,2,36,22,4,6,20,26,7,4,14,28,4,0,107,26,8,1,37,22,8,4,20,24,12,4,11,22,3,1,115,30,4,5,40,24,11,5,16,20,11,5,12,24,5,1,87,22,5,5,41,24,5,7,24,30,11,7,12,24,5,1,98,24,7,3,45,28,15,2,19,24,3,13,15,30,1,5,107,28,10,1,46,28,1,15,22,28,2,17,14,28,5,1,120,30,9,4,43,26,17,1,22,28,2,19,14,28,3,4,113,28,3,11,44,26,17,4,21,26,9,16,13,26,3,5,107,28,3,13,41,26,15,5,24,30,15,10,15,28,4,4,116,28,17,0,42,26,17,6,22,28,19,6,16,30,2,7,111,28,17,0,46,28,7,16,24,30,34,0,13,24,4,5,121,30,4,14,47,28,11,14,24,30,16,14,15,30,6,4,117,30,6,14,45,28,11,16,24,30,30,2,16,30,8,4,106,26,8,13,47,28,7,22,24,30,22,13,15,30,10,2,114,28,19,4,46,28,28,6,22,28,33,4,16,30,8,4,122,30,22,3,45,28,8,26,23,30,12,28,15,30,3,10,117,30,3,23,45,28,4,31,24,30,11,31,15,30,7,7,116,30,21,7,45,28,1,37,23,30,19,26,15,30,5,10,115,30,19,10,47,28,15,25,24,30,23,25,15,30,13,3,115,30,2,29,46,28,42,1,24,30,23,28,15,30,17,0,115,30,10,23,46,28,10,35,24,30,19,35,15,30,17,1,115,30,14,21,46,28,29,19,24,30,11,46,15,30,13,6,115,30,14,23,46,28,44,7,24,30,59,1,16,30,12,7,121,30,12,26,47,28,39,14,24,30,22,41,15,30,6,14,121,30,6,34,47,28,46,10,24,30,2,64,15,30,17,4,122,30,29,14,46,28,49,10,24,30,24,46,15,30,4,18,122,30,13,32,46,28,48,14,24,30,42,32,15,30,20,4,117,30,40,7,47,28,43,22,24,30,10,67,15,30,19,6,118,30,18,31,47,28,34,34,24,30,20,61,15,30],f=[255,0,1,25,2,50,26,198,3,223,51,238,27,104,199,75,4,100,224,14,52,141,239,129,28,193,105,248,200,8,76,113,5,138,101,47,225,36,15,33,53,147,142,218,240,18,130,69,29,181,194,125,106,39,249,185,201,154,9,120,77,228,114,166,6,191,139,98,102,221,48,253,226,152,37,179,16,145,34,136,54,208,148,206,143,150,219,189,241,210,19,92,131,56,70,64,30,66,182,163,195,72,126,110,107,58,40,84,250,133,186,61,202,94,155,159,10,21,121,43,78,212,229,172,115,243,167,87,7,112,192,247,140,128,99,13,103,74,222,237,49,197,254,24,227,165,153,119,38,184,180,124,17,68,146,217,35,32,137,46,55,63,209,91,149,188,207,205,144,135,151,178,220,252,190,97,242,86,211,171,20,42,93,158,132,60,57,83,71,109,65,162,31,45,67,216,183,123,164,118,196,23,73,236,127,12,111,246,108,161,59,82,41,157,85,170,251,96,134,177,187,204,62,90,203,89,95,176,156,169,160,81,11,245,22,235,122,117,44,215,79,174,213,233,230,231,173,232,116,214,244,234,168,80,88,175],d=[1,2,4,8,16,32,64,128,29,58,116,232,205,135,19,38,76,152,45,90,180,117,234,201,143,3,6,12,24,48,96,192,157,39,78,156,37,74,148,53,106,212,181,119,238,193,159,35,70,140,5,10,20,40,80,160,93,186,105,210,185,111,222,161,95,190,97,194,153,47,94,188,101,202,137,15,30,60,120,240,253,231,211,187,107,214,177,127,254,225,223,163,91,182,113,226,217,175,67,134,17,34,68,136,13,26,52,104,208,189,103,206,129,31,62,124,248,237,199,147,59,118,236,197,151,51,102,204,133,23,46,92,184,109,218,169,79,158,33,66,132,21,42,84,168,77,154,41,82,164,85,170,73,146,57,114,228,213,183,115,230,209,191,99,198,145,63,126,252,229,215,179,123,246,241,255,227,219,171,75,150,49,98,196,149,55,110,220,165,87,174,65,130,25,50,100,200,141,7,14,28,56,112,224,221,167,83,166,81,162,89,178,121,242,249,239,195,155,43,86,172,69,138,9,18,36,72,144,61,122,244,245,247,243,251,235,203,139,11,22,44,88,176,125,250,233,207,131,27,54,108,216,173,71,142,0],l=[],u=[],p=[],g=[],v=[],y=2;function b(t,e){var i;t>e&&(i=t,t=e,e=i),i=e,i*=e,i+=e,i>>=1,g[i+=t]=1}function x(t,i){var n;for(p[t+e*i]=1,n=-2;n<2;n++)p[t+n+e*(i-2)]=1,p[t-2+e*(i+n+1)]=1,p[t+2+e*(i+n)]=1,p[t+n+1+e*(i+2)]=1;for(n=0;n<2;n++)b(t-1,i+n),b(t+1,i-n),b(t-n,i-1),b(t+n,i+1)}function w(t){for(;t>=255;)t=((t-=255)>>8)+(255&t);return t}var m=[];function S(t,e,i,n){var r,o,s;for(r=0;r<n;r++)l[i+r]=0;for(r=0;r<e;r++){if(255!=(s=f[l[t+r]^l[i]]))for(o=1;o<n;o++)l[i+o-1]=l[i+o]^d[w(s+m[n-o])];else for(o=i;o<i+n;o++)l[o]=l[o+1];l[i+n-1]=255==s?0:d[w(s+m[0])]}}function z(t,e){var i;return t>e&&(i=t,t=e,e=i),i=e,i+=e*e,i>>=1,g[i+=t]}function I(t){var i,n,r,o;switch(t){case 0:for(n=0;n<e;n++)for(i=0;i<e;i++)i+n&1||z(i,n)||(p[i+n*e]^=1);break;case 1:for(n=0;n<e;n++)for(i=0;i<e;i++)1&n||z(i,n)||(p[i+n*e]^=1);break;case 2:for(n=0;n<e;n++)for(r=0,i=0;i<e;i++,r++)3==r&&(r=0),r||z(i,n)||(p[i+n*e]^=1);break;case 3:for(o=0,n=0;n<e;n++,o++)for(3==o&&(o=0),r=o,i=0;i<e;i++,r++)3==r&&(r=0),r||z(i,n)||(p[i+n*e]^=1);break;case 4:for(n=0;n<e;n++)for(r=0,o=n>>1&1,i=0;i<e;i++,r++)3==r&&(r=0,o=!o),o||z(i,n)||(p[i+n*e]^=1);break;case 5:for(o=0,n=0;n<e;n++,o++)for(3==o&&(o=0),r=0,i=0;i<e;i++,r++)3==r&&(r=0),(i&n&1)+!(!r|!o)||z(i,n)||(p[i+n*e]^=1);break;case 6:for(o=0,n=0;n<e;n++,o++)for(3==o&&(o=0),r=0,i=0;i<e;i++,r++)3==r&&(r=0),(i&n&1)+(r&&r==o)&1||z(i,n)||(p[i+n*e]^=1);break;case 7:for(o=0,n=0;n<e;n++,o++)for(3==o&&(o=0),r=0,i=0;i<e;i++,r++)3==r&&(r=0),(r&&r==o)+(i+n&1)&1||z(i,n)||(p[i+n*e]^=1)}}function M(t){var e,i=0;for(e=0;e<=t;e++)v[e]>=5&&(i+=3+v[e]-5);for(e=3;e<t-1;e+=2)v[e-2]==v[e+2]&&v[e+2]==v[e-1]&&v[e-1]==v[e+1]&&3*v[e-1]==v[e]&&(0==v[e-3]||e+3>t||3*v[e-3]>=4*v[e]||3*v[e+3]>=4*v[e])&&(i+=40);return i}function k(){var t,i,n,r,o,s=0,a=0;for(i=0;i<e-1;i++)for(t=0;t<e-1;t++)(p[t+e*i]&&p[t+1+e*i]&&p[t+e*(i+1)]&&p[t+1+e*(i+1)]||!(p[t+e*i]||p[t+1+e*i]||p[t+e*(i+1)]||p[t+1+e*(i+1)]))&&(s+=3);for(i=0;i<e;i++){for(v[0]=0,n=r=t=0;t<e;t++)(o=p[t+e*i])==r?v[n]++:v[++n]=1,a+=(r=o)?1:-1;s+=M(n)}a<0&&(a=-a);var h=a,c=0;for(h+=h<<2,h<<=1;h>e*e;)h-=e*e,c++;for(s+=10*c,t=0;t<e;t++){for(v[0]=0,n=r=i=0;i<e;i++)(o=p[t+e*i])==r?v[n]++:v[++n]=1,r=o;s+=M(n)}return s}var B=null;return{api:{get ecclevel(){return y},set ecclevel(t){y=t},get size(){return _size},set size(t){_size=t},get canvas(){return B},set canvas(t){B=t},getFrame:function(v){return function(v){var M,B,W,P,O,T,L,R;P=v.length,t=0;do{if(t++,W=4*(y-1)+16*(t-1),i=c[W++],n=c[W++],r=c[W++],o=c[W],P<=(W=r*(i+n)+n-3+(t<=9)))break}while(t<40);for(e=17+4*t,O=r+(r+o)*(i+n)+n,P=0;P<O;P++)u[P]=0;for(l=v.slice(0),P=0;P<e*e;P++)p[P]=0;for(P=0;P<(e*(e+1)+1)/2;P++)g[P]=0;for(P=0;P<3;P++){for(W=0,B=0,1==P&&(W=e-7),2==P&&(B=e-7),p[B+3+e*(W+3)]=1,M=0;M<6;M++)p[B+M+e*W]=1,p[B+e*(W+M+1)]=1,p[B+6+e*(W+M)]=1,p[B+M+1+e*(W+6)]=1;for(M=1;M<5;M++)b(B+M,W+1),b(B+1,W+M+1),b(B+5,W+M),b(B+M+1,W+5);for(M=2;M<4;M++)p[B+M+e*(W+2)]=1,p[B+2+e*(W+M+1)]=1,p[B+4+e*(W+M)]=1,p[B+M+1+e*(W+4)]=1}if(t>1)for(P=s[t],B=e-7;;){for(M=e-7;M>P-3&&(x(M,B),!(M<P));)M-=P;if(B<=P+9)break;x(6,B-=P),x(B,6)}for(p[8+e*(e-8)]=1,B=0;B<7;B++)b(7,B),b(e-8,B),b(7,B+e-7);for(M=0;M<8;M++)b(M,7),b(M+e-8,7),b(M,e-8);for(M=0;M<9;M++)b(M,8);for(M=0;M<8;M++)b(M+e-8,8),b(8,M);for(B=0;B<7;B++)b(8,B+e-7);for(M=0;M<e-14;M++)1&M?(b(8+M,6),b(6,8+M)):(p[8+M+6*e]=1,p[6+e*(8+M)]=1);if(t>6)for(P=a[t-7],W=17,M=0;M<6;M++)for(B=0;B<3;B++,W--)1&(W>11?t>>W-12:P>>W)?(p[5-M+e*(2-B+e-11)]=1,p[2-B+e-11+e*(5-M)]=1):(b(5-M,2-B+e-11),b(2-B+e-11,5-M));for(B=0;B<e;B++)for(M=0;M<=B;M++)p[M+e*B]&&b(M,B);for(O=l.length,T=0;T<O;T++)u[T]=l.charCodeAt(T);if(l=u.slice(0),O>=(M=r*(i+n)+n)-2&&(O=M-2,t>9&&O--),T=O,t>9){for(l[T+2]=0,l[T+3]=0;T--;)P=l[T],l[T+3]|=255&P<<4,l[T+2]=P>>4;l[2]|=255&O<<4,l[1]=O>>4,l[0]=64|O>>12}else{for(l[T+1]=0,l[T+2]=0;T--;)P=l[T],l[T+2]|=255&P<<4,l[T+1]=P>>4;l[1]|=255&O<<4,l[0]=64|O>>4}for(T=O+3-(t<10);T<M;)l[T++]=236,l[T++]=17;for(m[0]=1,T=0;T<o;T++){for(m[T+1]=1,L=T;L>0;L--)m[L]=m[L]?m[L-1]^d[w(f[m[L]]+T)]:m[L-1];m[0]=d[w(f[m[0]]+T)]}for(T=0;T<=o;T++)m[T]=f[m[T]];for(W=M,B=0,T=0;T<i;T++)S(B,r,W,o),B+=r,W+=o;for(T=0;T<n;T++)S(B,r+1,W,o),B+=r+1,W+=o;for(B=0,T=0;T<r;T++){for(L=0;L<i;L++)u[B++]=l[T+L*r];for(L=0;L<n;L++)u[B++]=l[i*r+T+L*(r+1)]}for(L=0;L<n;L++)u[B++]=l[i*r+T+L*(r+1)];for(T=0;T<o;T++)for(L=0;L<i+n;L++)u[B++]=l[M+T+L*o];for(l=u,M=B=e-1,W=O=1,R=(r+o)*(i+n)+n,T=0;T<R;T++)for(P=l[T],L=0;L<8;L++,P<<=1){128&P&&(p[M+e*B]=1);do{O?M--:(M++,W?0!=B?B--:(W=!W,6==(M-=2)&&(M--,B=9)):B!=e-1?B++:(W=!W,6==(M-=2)&&(M--,B-=8))),O=!O}while(z(M,B))}for(l=p.slice(0),P=0,B=3e4,W=0;W<8&&(I(W),(M=k())<B&&(B=M,P=W),7!=P);W++)p=l.slice(0);for(P!=W&&I(P),B=h[P+(y-1<<3)],W=0;W<8;W++,B>>=1)1&B&&(p[e-1-W+8*e]=1,W<6?p[8+e*W]=1:p[8+e*(W+1)]=1);for(W=0;W<7;W++,B>>=1)1&B&&(p[8+e*(e-7+W)]=1,W?p[6-W+8*e]=1:p[7+8*e]=1);return p}(v)},utf16to8:function(t){var e,i,n,r;for(e="",n=t.length,i=0;i<n;i++)(r=t.charCodeAt(i))>=1&&r<=127?e+=t.charAt(i):r>2047?(e+=String.fromCharCode(224|r>>12&15),e+=String.fromCharCode(128|r>>6&63),e+=String.fromCharCode(128|r>>0&63)):(e+=String.fromCharCode(192|r>>6&31),e+=String.fromCharCode(128|r>>0&63));return e},draw:function(t,i,n,r,o){i.drawView(n,r);var s=i.ctx,a=n.contentSize,h=a.width,c=a.height,f=a.left,d=a.top;r.borderRadius,r.backgroundColor;var l=r.color,u=void 0===l?"#000000":l;r.border,n.contentSize.left,n.borderSize.left,n.contentSize.top,n.borderSize.top;if(y=o||y,s){s.save(),i.setOpacity(r),i.setTransform(n,r);var p=Math.min(h,c);t=this.utf16to8(t);var g=this.getFrame(t),v=p/e;s.setFillStyle(u);for(var b=0;b<e;b++)for(var x=0;x<e;x++)g[x*e+b]&&s.fillRect(f+v*b,d+v*x,v,v);s.restore(),i.setBorder(n,r)}else console.warn("No canvas provided to draw QR code in!")}}}}(),Rt=I,Ft=z,At=M,Et=S,jt=w.TOP,Ct=w.MIDDLE,Ht=w.BOTTOM,Dt=m.LEFT,$t=m.CENTER,Yt=m.RIGHT,Ut=function(){function t(t){var e,i,n=this;this.v="1.9.5.1",this.id=null,this.pixelRatio=1,this.width=0,this.height=0,this.sleep=1e3/30,this.count=0,this.isRate=!1,this.isDraw=!0,this.isCache=!0,this.fixed="",this.useCORS=!1,this.performance=!1,this.imageBus=[],this.createImage=function(t,e){return new Promise((function(i,r){var o=null;window||n.canvas.createImage?(o=n.canvas&&n.canvas.createImage?n.canvas.createImage():new Image,e&&o.setAttribute("crossOrigin","Anonymous"),o.src=t,o.onload=function(){i({width:o.naturalWidth||o.width,height:o.naturalHeight||o.height,path:o,src:this.src})},o.onerror=function(t){r(t)}):r({fail:"getImageInfo fail",src:t})}))},this.options=t,Object.assign(this,t),this.ctx=(e=t.context,i={get:function(t,i){if("setFonts"===i)return function(t){var i=t.fontFamily,n=void 0===i?"sans-serif":i,o=t.fontSize,s=void 0===o?14:o,a=t.fontWeight,h=void 0===a?"normal":a,c=t.fontStyle,f=void 0===c?"normal":c;C==r.MP_TOUTIAO&&(h="bold"==h?"bold":"",f="italic"==f?"italic":""),e.font="".concat(f," ").concat(h," ").concat(Math.round(s),"px ").concat(n)};if(!e.draw||!e.setFillStyle){if("setFillStyle"===i)return function(t){e.fillStyle=t};if("setStrokeStyle"===i)return function(t){e.strokeStyle=t};if("setLineWidth"===i)return function(t){e.lineWidth=t};if("setLineCap"===i)return function(t){e.lineCap=t};if("setFontSize"===i)return function(t){e.font="".concat(String(t),"px sans-serif")};if("setGlobalAlpha"===i)return function(t){e.globalAlpha=t};if("setLineJoin"===i)return function(t){e.lineJoin=t};if("setTextAlign"===i)return function(t){e.textAlign=t};if("setMiterLimit"===i)return function(t){e.miterLimit=t};if("setShadow"===i)return function(t,i,n,r){e.shadowOffsetX=t,e.shadowOffsetY=i,e.shadowBlur=n,e.shadowColor=r};if("setTextBaseline"===i)return function(t){e.textBaseline=t};if("createCircularGradient"===i)return function(){};if("draw"===i)return function(){};if("function"==typeof e[i])return function(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return e[i].apply(e,t)}}return t[i]},set:function(t,i,n){return e[i]=n,!0}},new Proxy(e,i)),this.progress=0,this.root={width:t.width,height:t.height,fontSizeRate:1,fixedLine:null},this.size=this.root;var o=0;Object.defineProperty(this,"progress",{configurable:!0,set:function(t){o=t,n.lifecycle("onProgress",t/n.count)},get:function(){return o||0}})}return t.prototype.lifecycle=function(t,e){this.options.listen&&this.options.listen[t]&&this.options.listen[t](e)},t.prototype.setContext=function(t){t&&(this.ctx=t)},t.prototype.init=function(){if(this.canvas.height||r.WEB==C){this.ctx.setTransform(1,0,0,1,0,0);var t=this.size.height*this.pixelRatio,e=this.size.width*this.pixelRatio;this.canvas.height=t,this.canvas.width=e,this.ctx.scale(this.pixelRatio,this.pixelRatio)}},t.prototype.clear=function(){this.ctx.clearRect(0,0,this.size.width,this.size.height)},t.prototype.clipPath=function(t,e,i,n,r,o,s){void 0===o&&(o=!1),void 0===s&&(s=!1);var a=this.ctx;if(/polygon/.test(r)){var h=r.match(/-?\d+(rpx|px|%)?\s+-?\d+(rpx|px|%)?/g)||[];a.beginPath(),h.map((function(r){var o=r.split(" "),s=o[0],a=o[1];return[Y(s,i)+t,Y(a,n)+e]})).forEach((function(t,e){0==e?a.moveTo(t[0],t[1]):a.lineTo(t[0],t[1])})),a.closePath(),s&&a.stroke(),o&&a.fill()}},t.prototype.roundRect=function(t,e,i,n,r,o,s){if(void 0===o&&(o=!1),void 0===s&&(s=!1),!(r<0)){var a=this.ctx;if(a.beginPath(),r){var h=r||{},c=h.borderTopLeftRadius,f=void 0===c?r||0:c,d=h.borderTopRightRadius,l=void 0===d?r||0:d,u=h.borderBottomRightRadius,p=void 0===u?r||0:u,g=h.borderBottomLeftRadius,v=void 0===g?r||0:g;a.arc(t+i-p,e+n-p,p,0,.5*Math.PI),a.lineTo(t+v,e+n),a.arc(t+v,e+n-v,v,.5*Math.PI,Math.PI),a.lineTo(t,e+f),a.arc(t+f,e+f,f,Math.PI,1.5*Math.PI),a.lineTo(t+i-l,e),a.arc(t+i-l,e+l,l,1.5*Math.PI,2*Math.PI),a.lineTo(t+i,e+n-p)}else a.rect(t,e,i,n);a.closePath(),s&&a.stroke(),o&&a.fill()}},t.prototype.setTransform=function(t,e){var i=e.transform,n=e.transformOrigin,r=this.ctx,o=i||{},s=o.scaleX,a=void 0===s?1:s,h=o.scaleY,c=void 0===h?1:h,f=o.translateX,d=void 0===f?0:f,l=o.translateY,u=void 0===l?0:l,p=o.rotate,g=void 0===p?0:p,v=o.skewX,y=void 0===v?0:v,b=o.skewY,x=void 0===b?0:b,w=t.left,m=t.top,S=t.width,z=t.height;d=Y(d,S)||0,u=Y(u,z)||0;var I=Y("0%",1),M=Y("50%",1),k=Y("100%",1),B={top:I,center:M,bottom:k},W={left:I,center:M,right:k};if(n=n.split(" ").filter((function(t,e){return e<2})).reduce((function(t,e){if(/\d+/.test(e)){var i=Y(e,1)/(/px|rpx$/.test(e)?$(t.x)?z:S:1);return $(t.x)?Object.assign(t,{y:i}):Object.assign(t,{x:i})}return $(W[e])&&!$(t.x)?Object.assign(t,{x:W[e]}):Object.assign(t,{y:B[e]||.5})}),{}),(d||u)&&r.translate(d,u),(a||c)&&r.scale(a,c),g){var P=w+S*n.x,O=m+z*n.y;r.translate(P,O),r.rotate(g*Math.PI/180),r.translate(-P,-O)}(y||x)&&r.transform(1,Math.tan(x*Math.PI/180),Math.tan(y*Math.PI/180),1,0,0)},t.prototype.setBackground=function(t,e,i,n,o){var s=this.ctx;t&&t!=L?_(t)?X(t,e,i,n,o,s):s.setFillStyle(t):[r.MP_TOUTIAO,r.MP_BAIDU].includes(C)?s.setFillStyle("rgba(0,0,0,0)"):s.setFillStyle(L)},t.prototype.setShadow=function(t){var e=t.boxShadow,i=void 0===e?[]:e,n=this.ctx;if(i.length){var r=i[0],o=i[1],s=i[2],a=i[3];n.setShadow(r,o,s,a)}},t.prototype.setBorder=function(t,e){var i=this.ctx,n=t.width,r=t.height,o=t.left,s=t.top,a=e.border,h=e.borderBottom,c=e.borderTop,f=e.borderRight,d=e.borderLeft,l=e.borderRadius,u=e.lineCap,p=a||{},g=p.borderWidth,v=void 0===g?0:g,y=p.borderStyle,b=p.borderColor,x=h||{},w=x.borderBottomWidth,m=void 0===w?v:w,S=x.borderBottomStyle,z=void 0===S?y:S,I=x.borderBottomColor,M=void 0===I?b:I,k=c||{},B=k.borderTopWidth,W=void 0===B?v:B,P=k.borderTopStyle,O=void 0===P?y:P,T=k.borderTopColor,L=void 0===T?b:T,R=f||{},F=R.borderRightWidth,A=void 0===F?v:F,E=R.borderRightStyle,j=void 0===E?y:E,H=R.borderRightColor,D=void 0===H?b:H,$=d||{},Y=$.borderLeftWidth,U=void 0===Y?v:Y,N=$.borderLeftStyle,_=void 0===N?y:N,X=$.borderLeftColor,q=void 0===X?b:X,G=l||{},V=G.borderTopLeftRadius,J=void 0===V?l||0:V,Q=G.borderTopRightRadius,Z=void 0===Q?l||0:Q,K=G.borderBottomRightRadius,tt=void 0===K?l||0:K,et=G.borderBottomLeftRadius,it=void 0===et?l||0:et;if(h||d||c||f||a){var nt=function(t,e,n){"dashed"==e?/mp/.test(C)?i.setLineDash([Math.ceil(4*t/3),Math.ceil(4*t/3)]):i.setLineDash([Math.ceil(6*t),Math.ceil(6*t)]):"dotted"==e&&i.setLineDash([t,t]),i.setStrokeStyle(n)},rt=function(t,e,n,r,o,s,a,h,c,f,d,l,p,g,v){i.save(),i.setLineCap(v?"square":u),i.setLineWidth(l),nt(l,p,g),i.beginPath(),i.arc(t,e,a,Math.PI*c,Math.PI*f),i.lineTo(n,r),i.arc(o,s,h,Math.PI*f,Math.PI*d),i.stroke(),i.restore()};if(i.save(),a&&!h&&!d&&!c&&!f)return i.setLineWidth(v),nt(v,y,b),this.roundRect(o,s,n,r,l,!1,!!b),void i.restore();m&&rt(o+n-tt,s+r-tt,o+it,s+r,o+it,s+r-it,tt,it,.25,.5,.75,m,z,M,U&&A),U&&rt(o+it,s+r-it,o,s+J,o+J,s+J,it,J,.75,1,1.25,U,_,q,W&&m),W&&rt(o+J,s+J,o+n-Z,s,o+n-Z,s+Z,J,Z,1.25,1.5,1.75,W,O,L,U&&A),A&&rt(o+n-Z,s+Z,o+n,s+r-tt,o+n-tt,s+r-tt,Z,tt,1.75,2,.25,A,j,D,W&&m)}},t.prototype.setOpacity=function(t){var e=t.opacity,i=void 0===e?1:e;this.ctx.setGlobalAlpha(i)},t.prototype.drawPattern=function(t,e,r){return i(this,void 0,void 0,(function(){var i=this;return n(this,(function(n){return[2,new Promise((function(n,o){i.drawView(e,r,!0,!1,!0);var s=i,a=s.ctx;s.canvas;var h=e.width,c=e.height,f=e.left,d=e.top,l=r||{},u=l.borderRadius,p=void 0===u?0:u,g=l.backgroundImage,v=l.backgroundRepeat,y=void 0===v?"repeat":v;g&&function(t){var o=a.createPattern(t.src,y);a.setFillStyle(o),i.roundRect(f,d,h,c,p,!0,!1),i.setBorder(e,r),n()}(t)}))]}))}))},t.prototype.drawView=function(t,e,i,n,r){void 0===i&&(i=!0),void 0===n&&(n=!0),void 0===r&&(r=!0);var o=this.ctx,s=t.width,a=t.height,h=t.left,c=t.top,f=e||{},d=f.borderRadius,l=void 0===d?0:d,u=f.backgroundColor,p=void 0===u?L:u,g=f.overflow;e.opacity&&this.setOpacity(e),this.setTransform(t,e),r&&(o.save(),this.setShadow(e)),i&&this.setBackground(p,s,a,h,c),e.clipPath?this.clipPath(h,c,s,a,e.clipPath,i,!1):this.roundRect(h,c,s,a,l,i,!1),r&&o.restore(),n&&this.setBorder(t,e),"hidden"==g&&o.clip()},t.prototype.drawImage=function(t,e,o,s){return void 0===e&&(e={}),void 0===o&&(o={}),void 0===s&&(s=!0),i(this,void 0,void 0,(function(){var a=this;return n(this,(function(h){switch(h.label){case 0:return[4,new Promise((function(h,c){return i(a,void 0,void 0,(function(){var i,a,c,f,d,l,u,p,g,v,y,b,x,w,m,S,z,I,M,k,B,W=this;return n(this,(function(n){return i=this.ctx,a=o.borderRadius,c=void 0===a?0:a,f=o.backgroundColor,d=void 0===f?L:f,l=o.objectFit,u=void 0===l?R:l,p=o.backgroundSize,g=void 0===p?R:p,v=o.objectPosition,y=o.backgroundPosition,b=o.boxShadow,o.backgroundImage&&(u=g,v=y),b&&this.drawView(e,Object.assign(o,{backgroundColor:d||b&&(d||"#ffffff")}),!0,!1,!0),x=e.width,w=e.height,m=e.left,S=e.top,i.save(),z=e.contentSize.left-e.borderSize.left,I=e.contentSize.top-e.borderSize.top,s||(this.setOpacity(o),this.setTransform(e,o),this.setBackground(d,x,w,m,S),this.roundRect(m,S,x,w,c,!!(c||!b&&d),!1)),m+=z,S+=I,i.clip(),M=function(t){if(u!==R){var n=function(t,e,i){var n=t.objectFit,r=t.objectPosition,o=e.width/e.height,s=i.width/i.height,a=1,h="contain",c="cover";n==h&&o>=s||n==c&&o<s?a=e.height/i.height:(n==h&&o<s||n==c&&o>=s)&&(a=e.width/i.width);var f=i.width*a,d=i.height*a,l=r||[],u=l[0],p=l[1],g=N(u)?Y(u,e.width):(e.width-f)*(U(u)?Y(u,1):{left:0,center:.5,right:1}[u||"center"]),v=N(p)?Y(p,e.height):(e.height-d)*(U(p)?Y(p,1):{top:0,center:.5,bottom:1}[p||"center"]),y=function(t,e){return[(t-g)/a,(e-v)/a]},b=y(0,0),x=b[0],w=b[1],m=y(e.width,e.height),S=m[0],z=m[1],I=Math.max,M=Math.min;return{sx:I(x,0),sy:I(w,0),sw:M(S-x,i.width),sh:M(z-w,i.height),dx:I(g,0),dy:I(v,0),dw:M(f,e.width),dh:M(d,e.height)}}({objectFit:u,objectPosition:v},e.contentSize,t),o=n.sx,s=n.sy,a=n.sh,h=n.sw,c=n.dx,f=n.dy,d=n.dh,l=n.dw;C==r.MP_BAIDU?i.drawImage(t.src,c+m,f+S,l,d,o,s,h,a):i.drawImage(t.src,o,s,h,a,c+m,f+S,l,d)}else i.drawImage(t.src,m,S,x,w)},k=function(){i.restore(),W.drawView(e,o,!1,!0,!1),h(1)},B=function(t){M(t),k()},B(t),[2]}))}))}))];case 1:return h.sent(),[2]}}))}))},t.prototype.drawText=function(t,e,i,n){var r=this,o=this.ctx,s=e.borderSize,a=e.contentSize,h=e.left,c=e.top,f=a.width,d=a.height,l=a.left-s.left||0,u=a.top-s.top||0,p=i.color,g=i.lineHeight,v=i.fontSize,y=i.fontWeight,b=i.fontFamily,x=i.fontStyle,w=i.textIndent,m=void 0===w?0:w,S=i.textAlign,z=i.textStroke,I=i.verticalAlign,M=void 0===I?Ct:I,k=i.backgroundColor,B=i.lineClamp,W=i.backgroundClip,P=i.textShadow,O=i.textDecoration;if(m=$(m)?m:0,this.drawView(e,i,W!=Ft),g=Y(g,v),t){o.save(),h+=l,c+=u;var T=n.fontHeight,L=n.descent,R=void 0===L?0:L,F=n.ascent,A=R+(void 0===F?0:F);switch(o.setFonts({fontFamily:b,fontSize:v,fontWeight:y,fontStyle:x}),o.setTextBaseline(Ct),o.setTextAlign(S),W?this.setBackground(k,f,d,h,c):o.setFillStyle(p),S){case Dt:break;case $t:h+=.5*f;break;case Yt:h+=f}var E=n.lines*g,j=Math.ceil((d-E)/2);switch(j<0&&(j=0),M){case jt:break;case Ct:c+=j;break;case Ht:c+=2*j}var C=(g-T)/2,H=g/2,D=function(t){var e=o.measureText(t),i=e.actualBoundingBoxDescent,n=void 0===i?0:i,r=e.actualBoundingBoxAscent;return M==jt?{fix:A?void 0===r?0:r:H-C/2,lineY:A?0:C-C/2}:M==Ct?{fix:A?H+n/4:H,lineY:A?0:C}:M==Ht?{fix:A?g-n:H+C/2,lineY:A?2*C:C+C/2}:{fix:0,height:0,lineY:0}},U=function(t,e,i){var r=t;switch(S){case Dt:r+=i;break;case $t:r=(t-=i/2)+i;break;case Yt:r=t,t-=i}if(O){o.setLineWidth(v/13),o.beginPath();var s=.1*n.fontHeight;/\bunderline\b/.test(O)&&(o.moveTo(t,e+n.fontHeight+s),o.lineTo(r,e+n.fontHeight+s)),/\boverline\b/.test(O)&&(o.moveTo(t,e-s),o.lineTo(r,e-s)),/\bline-through\b/.test(O)&&(o.moveTo(t,e+.5*n.fontHeight),o.lineTo(r,e+.5*n.fontHeight)),o.closePath(),o.setStrokeStyle(p),o.stroke()}},N=function(t,e,i){var n=function(){o.setLineWidth(z.width),o.setStrokeStyle(z.color),o.strokeText(t,e,i)},s="outset";z&&z.type!==s?(o.save(),r.setShadow({boxShadow:P}),o.fillText(t,e,i),o.restore(),n()):z&&z.type==s?(o.save(),r.setShadow({boxShadow:P}),n(),o.restore(),o.save(),o.fillText(t,e,i),o.restore()):(r.setShadow({boxShadow:P}),o.fillText(t,e,i))};if(!n.widths||1==n.widths.length&&n.widths[0].total+m<=a.width){var _=D(t),X=_.fix,q=void 0===X?0:X,G=_.lineY;return N(t,h+m,c+q),U(h+m,c+G,n&&n.widths&&n.widths[0].total||n.text),c+=g,o.restore(),void this.setBorder(e,i)}for(var V=c,J=h,Q="",Z=0,K=o.measureText("...").width,tt=n.widths,et=0;et<tt.length;et++){var it=tt[et].widths,nt=0;Q="",c+=1==(Z+=1)?0:g,1==Z&&m&&(nt=m,J=h+m);for(var rt=0;rt<it.length;rt++){1!==Z&&m&&(J=h);var ot=it[rt],st=ot.width,at=ot.text,ht=(it[rt+1]||{}).width;if(Q+=at,(nt+=st)+(void 0===ht?0:ht)+(0==Z?m:0)+(Z==B?K:0)>a.width){Z>=B&&(Q+="…"),Z++,nt=0;var ct=D(Q);q=ct.fix,G=ct.lineY;N(Q,J,c+q),U(J,c+G,nt),c+=g,Q=""}else if(rt==it.length-1){et!=tt.length-1&&Z==B&&K+nt<a.width&&(Q+="…");var ft=D(Q);q=ft.fix,G=ft.lineY;N(Q,J,c+q),U(J,c+G,nt)}if(c>V+d||Z>B)break}}o.restore()}},t.prototype.source=function(t){return i(this,void 0,void 0,(function(){var e,i,r,o,s=this;return n(this,(function(n){switch(n.label){case 0:if(this.node=null,e=+new Date,"{}"==JSON.stringify(t))return[2];if(t.styles=t.styles||t.css||{},!t.type)for(i in t.type=Et,t)["views","children","type","css","styles"].includes(i)||(t.styles[i]=t[i],delete t[i]);return t.styles.boxSizing||(t.styles.boxSizing="border-box"),[4,this.create(t)];case 1:return(r=n.sent())?(o=r.layout()||{},this.size=o,this.node=r,this.onEffectFinished().then((function(t){return s.lifecycle("onEffectSuccess",t)})).catch((function(t){return s.lifecycle("onEffectFail",t)})),this.performance&&console.log("布局用时："+(+new Date-e)+"ms"),[2,this.size]):[2,console.warn("no node")]}}))}))},t.prototype.getImageInfo=function(t){return this.imageBus[t]||(this.imageBus[t]=this.createImage(t,this.useCORS)),this.imageBus[t]},t.prototype.create=function(t,r){return i(this,void 0,void 0,(function(){function i(t,n,r){void 0===n&&(n={}),void 0===r&&(r=!0);var o=[];return t.forEach((function(t){var s=t.styles,a=void 0===s?{}:s,h=t.css,c=void 0===h?{}:h,f=t.children,d=void 0===f?[]:f,l=t.views,u=void 0===l?[]:l,p=t.text,g=void 0===p?"":p,v=t.type,y=void 0===v?"":v;!d&&u&&(t.children=d=u);var b={};b=e(e(r?e({},n):{},a),c);var x={},w={},m={};Object.keys(b).map((function(t){if(t.includes("padding")||t.includes("margin")){var e=dt(t,b[t]);Object.keys(e).map((function(t){t.includes("Left")?w[t]=e[t]:t.includes("Right")?m[t]=e[t]:x[t]=e[t]}))}}));if(b.textIndent&&(w.textIndent=b.textIndent,delete n.textIndent),""!==g){var S=Array.from(g);S.forEach((function(t,e){var i=Object.assign({},b,x);0===e?Object.assign(i,w):e==S.length-1&&Object.assign(i,m),delete i.padding,delete i.margin,o.push({type:"text",text:t,styles:i})}))}if(y==Rt||y==At)o.push(t);else if("block"===a.display&&d.length>0){var z=i(d,b,!1);t.children=z,t.flattened=!0,o.push(t)}else if(d.length>0){z=i(d,b,r);o=o.concat(z)}})),o}var o,s,a,h,c,f,d,l,u,p,g,v,y,b,x,w,m,S,z,I,M,k,B,P;return n(this,(function(n){switch(n.label){case 0:if(!t)return[2];if(t.styles||(t.styles=t.css||{}),o=t.type,s=t.show,a=void 0===s||s,h=o==Rt,c=[Ft,At].includes(o),f="textBox"==o,d=t.styles||{},l=d.backgroundImage,u=d.display,h&&!t.src&&!t.url)return[2];if(u==W||!a)return[2];if(c||f){if(p=t.children,g=t.views,!p&&g&&(t.children=p=g),!t.text&&(!p||p&&!p.length))return[2];p&&p.length&&!t.flattened&&(v=i(t.children||t.views),t.type="view",t.children=v)}if(!(h||t.type==Et&&l))return[3,4];y=h?t.src:"",b=/url\(['"]?(.*?)['"]?\)/.exec(l),l&&b&&b[1]&&(y=b[1]||""),n.label=1;case 1:return n.trys.push([1,3,,4]),[4,this.getImageInfo(y)];case 2:return x=n.sent(),w=x.width,m=x.height,!(S=x.path)&&h?[2]:(S&&(t.attributes=Object.assign(t.attributes||{},{width:w,height:m,path:S,src:S,naturalSrc:y})),[3,4]);case 3:return z=n.sent(),t.type!=Et?[2]:(this.lifecycle("onEffectFail",e(e({},z),{src:y})),[3,4]);case 4:if(this.count+=1,I=new Tt(t,r,this.root,this.ctx),!(M=t.children||t.views))return[3,8];k=0,n.label=5;case 5:return k<M.length?(B=M[k],[4,this.create(B,I)]):[3,8];case 6:(P=n.sent())&&I.add(P),n.label=7;case 7:return k++,[3,5];case 8:return[2,I]}}))}))},t.prototype.drawNode=function(t,e){return void 0===e&&(e=!1),i(this,void 0,void 0,(function(){var i,r,o,s,a,h,c,f,d,l,u,p,g,v,y,b,x,w,m,S,z,I,M;return n(this,(function(n){switch(n.label){case 0:return i=t.layoutBox,r=t.computedStyle,o=t.attributes,s=t.name,a=t.children,h=t.fixedLine,c=t.attributes,f=c.src,d=c.text,l=r.position,u=r.backgroundImage,p=r.backgroundRepeat,["fixed"].includes(l)&&!e?[2]:(this.ctx.save(),s!==Et?[3,7]:f&&u?p?[4,this.drawPattern(o,i,r)]:[3,2]:[3,5]);case 1:return n.sent(),[3,4];case 2:return[4,this.drawImage(o,i,r,!1)];case 3:n.sent(),n.label=4;case 4:return[3,6];case 5:this.drawView(i,r),n.label=6;case 6:return[3,10];case 7:return s===Rt&&f?[4,this.drawImage(o,i,r,!1)]:[3,9];case 8:return n.sent(),[3,10];case 9:s===Ft?this.drawText(d,i,r,o):s===At&&Lt.api&&Lt.api.draw(d,this,i,r),n.label=10;case 10:if(this.progress+=1,v=(g=h||{}).beforeElements,y=g.afterElements,!v)return[3,14];b=0,x=v,n.label=11;case 11:return b<x.length?(M=x[b],[4,this.drawNode(M)]):[3,14];case 12:n.sent(),n.label=13;case 13:return b++,[3,11];case 14:if(!a)return[3,18];w=Object.values?Object.values(a):Object.keys(a).map((function(t){return a[t]})),m=0,S=w,n.label=15;case 15:return m<S.length?"absolute"===(M=S[m]).computedStyle.position?[3,17]:[4,this.drawNode(M)]:[3,18];case 16:n.sent(),n.label=17;case 17:return m++,[3,15];case 18:if(!y)return[3,22];z=0,I=y,n.label=19;case 19:return z<I.length?(M=I[z],[4,this.drawNode(M)]):[3,22];case 20:n.sent(),n.label=21;case 21:return z++,[3,19];case 22:return this.ctx.restore(),[2]}}))}))},t.prototype.render=function(t){var e=this;return void 0===t&&(t=30),new Promise((function(r,o){return i(e,void 0,void 0,(function(){var e,i,s,a,h,c,f,d,l,u;return n(this,(function(n){switch(n.label){case 0:return e=+new Date,this.init(),[4,(p=t,void 0===p&&(p=0),new Promise((function(t){return setTimeout(t,p)})))];case 1:n.sent(),n.label=2;case 2:if(n.trys.push([2,14,,15]),!this.node)return[3,12];if(i=this.root.fixedLine||{},s=i.beforeElements,a=i.afterElements,!s)return[3,6];h=0,c=s,n.label=3;case 3:return h<c.length?(l=c[h],[4,this.drawNode(l,!0)]):[3,6];case 4:n.sent(),n.label=5;case 5:return h++,[3,3];case 6:return[4,this.drawNode(this.node)];case 7:if(n.sent(),!a)return[3,11];f=0,d=a,n.label=8;case 8:return f<d.length?(l=d[f],[4,this.drawNode(l,!0)]):[3,11];case 9:n.sent(),n.label=10;case 10:return f++,[3,8];case 11:return r(this.node),[3,13];case 12:this.lifecycle("onEffectFail","node is empty"),n.label=13;case 13:return[3,15];case 14:return u=n.sent(),this.lifecycle("onEffectFail",u),o(u),[3,15];case 15:return this.performance&&console.log("渲染用时："+(+new Date-e-30)+"ms"),[2]}var p}))}))}))},t.prototype.onEffectFinished=function(){var t=this,e=Object.keys(this.imageBus).map((function(e){return t.imageBus[e]}));return Promise.all(e)},t.prototype.destroy=function(){this.node=[]},t.prototype.save=function(t){try{var e=t||{},i=e.fileType,n=void 0===i?"png":i,r=e.quality,o=void 0===r?1:r;return this.canvas.toDataURL("image/".concat(n),o)}catch(t){return this.lifecycle("onEffectFail","image cross domain"),t}},t}();r.WEB==C&&(window.Painter=Ut),t.Painter=Ut,t.default=Ut,Object.defineProperty(t,"__esModule",{value:!0})}));
diff --git a/src/uni_modules/lime-painter/hybrid/html/uni.webview.1.5.3.js b/src/uni_modules/lime-painter/hybrid/html/uni.webview.1.5.3.js
new file mode 100644
index 00000000..d6524fa8
--- /dev/null
+++ b/src/uni_modules/lime-painter/hybrid/html/uni.webview.1.5.3.js
@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function i(e,i){return n.call(e,i)}var t=[];function o(){return window.__dcloud_weex_postMessage||window.__dcloud_weex_}var r=function(e,n){var i={options:{timestamp:+new Date},name:e,arg:n};if(o()){if("postMessage"===e){var r={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(r):window.__dcloud_weex_.postMessage(JSON.stringify(r))}var a={type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(a):window.__dcloud_weex_.postMessageToService(JSON.stringify(a))}if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:i,pageId:""},"*");if(0===t.length){var d=plus.webview.currentWebview();if(!d)throw new Error("plus.webview.currentWebview() is undefined");var s=d.parent(),w="";w=s?s.id:d.id,t.push(w)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}},"__uniapp__service");else{var u=JSON.stringify(i);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(u,",").concat(JSON.stringify(t),");"))}},a={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;r("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("redirectTo",{url:encodeURI(n)})},getEnv:function(e){o()?e({nvue:!0}):window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};r("postMessage",e.data||{})}},d=/uni-app/i.test(navigator.userAgent),s=/Html5Plus/i.test(navigator.userAgent),w=/complete|loaded|interactive/;var u=window.my&&navigator.userAgent.indexOf("AlipayClient")>-1;var g=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var c=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var v=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var m=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.qa&&/quickapp/i.test(navigator.userAgent);var f=window.ks&&window.ks.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var l=window.tt&&window.tt.miniProgram&&/Lark|Feishu/i.test(navigator.userAgent);var _=window.jd&&window.jd.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);for(var E,b=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},h=[function(e){if(d||s)return window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&w.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),a},function(e){if(m)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.wx.miniProgram},function(e){if(c)return window.QQJSBridge&&window.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener("QQJSBridgeReady",e),window.qq.miniProgram},function(e){if(u){document.addEventListener("DOMContentLoaded",e);var n=window.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(g)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(v)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(p){window.QaJSBridge&&window.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener("QaJSBridgeReady",e);var n=window.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(f)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.ks.miniProgram},function(e){if(l)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(_)return window.JDJSBridgeReady&&window.JDJSBridgeReady.invoke?setTimeout(e,0):document.addEventListener("JDJSBridgeReady",e),window.jd.miniProgram},function(e){return document.addEventListener("DOMContentLoaded",e),a}],y=0;y<h.length&&!(E=h[y](b));y++);E||(E={});var B="undefined"!=typeof uni?uni:{};if(!B.navigateTo)for(var S in E)i(E,S)&&(B[S]=E[S]);return B.webView=E,B}));
diff --git a/src/uni_modules/lime-painter/package.json b/src/uni_modules/lime-painter/package.json
new file mode 100644
index 00000000..4c253e09
--- /dev/null
+++ b/src/uni_modules/lime-painter/package.json
@@ -0,0 +1,93 @@
+{
+  "id": "lime-painter",
+  "displayName": "海报画板",
+  "version": "1.9.6.6",
+  "description": "一款canvas海报组件，更优雅的海报生成方案，有限的支持富文本",
+  "keywords": [
+    "海报",
+    "富文本",
+    "生成海报",
+    "生成二维码",
+    "JSON"
+],
+  "repository": "https://gitee.com/liangei/lime-painter", 
+  "engines": {
+    "HBuilderX": "^3.4.14"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": "305716444"
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "u",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+        "QQ": "y",
+        "钉钉": "u",
+        "快手": "u",
+        "飞书": "u",
+        "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  },
+  "name": "lime-painter",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/src/uni_modules/lime-painter/parser.js b/src/uni_modules/lime-painter/parser.js
new file mode 100644
index 00000000..da36a87d
--- /dev/null
+++ b/src/uni_modules/lime-painter/parser.js
@@ -0,0 +1,388 @@
+/*
+ * HTML5 Parser By Sam Blowes
+ *
+ * Designed for HTML5 documents
+ *
+ * Original code by John Resig (ejohn.org)
+ * http://ejohn.org/blog/pure-javascript-html-parser/
+ * Original code by Erik Arvidsson, Mozilla Public License
+ * http://erik.eae.net/simplehtmlparser/simplehtmlparser.js
+ *
+ * ----------------------------------------------------------------------------
+ * License
+ * ----------------------------------------------------------------------------
+ *
+ * This code is triple licensed using Apache Software License 2.0,
+ * Mozilla Public License or GNU Public License
+ *
+ * ////////////////////////////////////////////////////////////////////////////
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License.  You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * ////////////////////////////////////////////////////////////////////////////
+ *
+ * The contents of this file are subject to the Mozilla Public License
+ * Version 1.1 (the "License"); you may not use this file except in
+ * compliance with the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS"
+ * basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the
+ * License for the specific language governing rights and limitations
+ * under the License.
+ *
+ * The Original Code is Simple HTML Parser.
+ *
+ * The Initial Developer of the Original Code is Erik Arvidsson.
+ * Portions created by Erik Arvidssson are Copyright (C) 2004. All Rights
+ * Reserved.
+ *
+ * ////////////////////////////////////////////////////////////////////////////
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * ----------------------------------------------------------------------------
+ * Usage
+ * ----------------------------------------------------------------------------
+ *
+ * // Use like so:
+ * HTMLParser(htmlString, {
+ *     start: function(tag, attrs, unary) {},
+ *     end: function(tag) {},
+ *     chars: function(text) {},
+ *     comment: function(text) {}
+ * });
+ *
+ * // or to get an XML string:
+ * HTMLtoXML(htmlString);
+ *
+ * // or to get an XML DOM Document
+ * HTMLtoDOM(htmlString);
+ *
+ * // or to inject into an existing document/DOM node
+ * HTMLtoDOM(htmlString, document);
+ * HTMLtoDOM(htmlString, document.body);
+ *
+ */
+// Regular Expressions for parsing tags and attributes
+var startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
+var endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/;
+var attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; // Empty Elements - HTML 5
+
+var empty = makeMap('area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr'); // Block Elements - HTML 5
+// fixed by xxx 将 ins 标签从块级名单中移除
+
+var block = makeMap('a,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video'); // Inline Elements - HTML 5
+
+var inline = makeMap('abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,code,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var'); // Elements that you can, intentionally, leave open
+// (and which close themselves)
+
+var closeSelf = makeMap('colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr'); // Attributes that have their values filled in disabled="disabled"
+
+var fillAttrs = makeMap('checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected'); // Special Elements (can contain anything)
+
+var special = makeMap('script,style');
+function HTMLParser(html, handler) {
+  var index;
+  var chars;
+  var match;
+  var stack = [];
+  var last = html;
+
+  stack.last = function () {
+    return this[this.length - 1];
+  };
+
+  while (html) {
+    chars = true; // Make sure we're not in a script or style element
+
+    if (!stack.last() || !special[stack.last()]) {
+      // Comment
+      if (html.indexOf('<!--') == 0) {
+        index = html.indexOf('-->');
+
+        if (index >= 0) {
+          if (handler.comment) {
+            handler.comment(html.substring(4, index));
+          }
+
+          html = html.substring(index + 3);
+          chars = false;
+        } // end tag
+
+      } else if (html.indexOf('</') == 0) {
+        match = html.match(endTag);
+
+        if (match) {
+          html = html.substring(match[0].length);
+          match[0].replace(endTag, parseEndTag);
+          chars = false;
+        } // start tag
+
+      } else if (html.indexOf('<') == 0) {
+        match = html.match(startTag);
+
+        if (match) {
+          html = html.substring(match[0].length);
+          match[0].replace(startTag, parseStartTag);
+          chars = false;
+        }
+      }
+
+      if (chars) {
+        index = html.indexOf('<');
+        var text = index < 0 ? html : html.substring(0, index);
+        html = index < 0 ? '' : html.substring(index);
+
+        if (handler.chars) {
+          handler.chars(text);
+        }
+      }
+    } else {
+      html = html.replace(new RegExp('([\\s\\S]*?)<\/' + stack.last() + '[^>]*>'), function (all, text) {
+        text = text.replace(/<!--([\s\S]*?)-->|<!\[CDATA\[([\s\S]*?)]]>/g, '$1$2');
+
+        if (handler.chars) {
+          handler.chars(text);
+        }
+
+        return '';
+      });
+      parseEndTag('', stack.last());
+    }
+
+    if (html == last) {
+      throw 'Parse Error: ' + html;
+    }
+
+    last = html;
+  } // Clean up any remaining tags
+
+
+  parseEndTag();
+
+  function parseStartTag(tag, tagName, rest, unary) {
+    tagName = tagName.toLowerCase();
+    if (block[tagName]) {
+      while (stack.last() && inline[stack.last()]) {
+        parseEndTag('', stack.last());
+      }
+    }
+
+    if (closeSelf[tagName] && stack.last() == tagName) {
+      parseEndTag('', tagName);
+    }
+
+    unary = empty[tagName] || !!unary;
+
+    if (!unary) {
+      stack.push(tagName);
+    }
+
+    if (handler.start) {
+      var attrs = [];
+      rest.replace(attr, function (match, name) {
+        var value = arguments[2] ? arguments[2] : arguments[3] ? arguments[3] : arguments[4] ? arguments[4] : fillAttrs[name] ? name : '';
+        attrs.push({
+          name: name,
+          value: value,
+          escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') // "
+
+        });
+      });
+
+      if (handler.start) {
+        handler.start(tagName, attrs, unary);
+      }
+    }
+  }
+
+  function parseEndTag(tag, tagName) {
+    // If no tag name is provided, clean shop
+    if (!tagName) {
+      var pos = 0;
+    } // Find the closest opened tag of the same type
+    else {
+        for (var pos = stack.length - 1; pos >= 0; pos--) {
+          if (stack[pos] == tagName) {
+            break;
+          }
+        }
+      }
+
+    if (pos >= 0) {
+      // Close all the open elements, up the stack
+      for (var i = stack.length - 1; i >= pos; i--) {
+        if (handler.end) {
+          handler.end(stack[i]);
+        }
+      } // Remove the open elements from the stack
+
+
+      stack.length = pos;
+    }
+  }
+}
+
+function makeMap(str) {
+  var obj = {};
+  var items = str.split(',');
+
+  for (var i = 0; i < items.length; i++) {
+    obj[items[i]] = true;
+  }
+
+  return obj;
+}
+
+function removeDOCTYPE(html) {
+  return html.replace(/<\?xml.*\?>\n/, '').replace(/<!doctype.*>\n/, '').replace(/<!DOCTYPE.*>\n/, '');
+}
+
+function parseAttrs(attrs) {
+  return attrs.reduce(function (pre, attr) {
+    var value = attr.value;
+    var name = attr.name;
+    if (pre[name]) {
+			pre[name] = pre[name] + " " + value;
+    } else {
+			pre[name] = value;
+    }
+
+    return pre;
+  }, {});
+}
+function convertStyleStringToJSON(styleString) {
+  var styles = styleString.split(";"); // 通过分号将样式字符串分割为多个样式声明
+  var result = {};
+
+  styles.forEach(function(style) {
+    var styleParts = style.split(":"); // 通过冒号将样式声明分割为属性和值
+    var property = styleParts[0].trim();
+    var value = styleParts[1] && styleParts[1].trim();
+
+    if (property && value) {
+      result[property] = value; // 将属性和值添加到结果对象中
+    }
+  });
+
+  return result;
+}
+function parseHtml(html) {
+  html = removeDOCTYPE(html);
+  var stacks = [];
+  var results = {
+    node: 'root',
+    children: []
+  };
+  HTMLParser(html, {
+    start: function start(tag, attrs, unary) {
+      var node = {
+        name: tag
+      };
+
+      if (attrs.length !== 0) {
+        node.attrs = parseAttrs(attrs);
+		node.styles = node.attrs.style ? convertStyleStringToJSON(node.attrs.style) : {}
+      }
+	
+	if(!node.type) {
+	  if(inline[node.name] && node.name !== 'img' ) {
+		node.type = 'text';
+		if(node.name == 'br') {
+			node.text = '\n'
+		} else if(node.name == 'strong'){
+			node.styles.fontWeight = 'bold'
+		}
+	  } else if(node.name == 'img'){
+		 node.type = 'image' 
+		 node.src =  node.attrs.src
+	  } else {
+		   node.type = 'view' 
+		   if(['h1','h2','h3','h4','h5','h6'].includes(node.name)) {
+			   node.styles.fontWeight = 'bold'
+		   }
+	  }
+	}		
+      if (unary) {
+        var parent = stacks[0] || results;
+
+        if (!parent.children) {
+          parent.children = [];
+        }
+
+        parent.children.push(node);
+      } else {
+        stacks.unshift(node);
+      }
+    },
+    end: function end(tag) {
+      var node = stacks.shift();
+      if (node.name !== tag) console.error('invalid state: mismatch end tag');
+      if (stacks.length === 0) {
+        results.children.push(node);
+      } else {
+        var parent = stacks[0];
+
+        if (!parent.children) {
+          parent.children = [];
+        }
+        parent.children.push(node);
+      }
+	  const isTextBox = node.children && node.children.length > 1 && node.children.every(child => {
+		  return ['text','image'].includes(child.type)
+	  })
+	  if(isTextBox) {
+		  node.type = 'textBox'
+	  }
+    },
+    chars: function chars(text) {
+      var node = {
+        type: 'text',
+        text: text
+      };
+
+      if (stacks.length === 0) {
+        results.children.push(node);
+      } else {
+        var parent = stacks[0];
+
+        if (!parent.children) {
+          parent.children = [];
+        }
+
+        parent.children.push(node);
+      }
+    },
+    comment: function comment(text) {
+      var node = {
+        node: 'comment',
+        text: text
+      };
+      var parent = stacks[0];
+
+      if (!parent.children) {
+        parent.children = [];
+      }
+
+      parent.children.push(node);
+    }
+  });
+  return results.children;
+}
+
+export default parseHtml;
\ No newline at end of file
diff --git a/src/uni_modules/lime-painter/readme.md b/src/uni_modules/lime-painter/readme.md
new file mode 100644
index 00000000..b05000cb
--- /dev/null
+++ b/src/uni_modules/lime-painter/readme.md
@@ -0,0 +1,961 @@
+# Painter 画板 测试版
+
+> uniapp 海报画板，更优雅的海报生成方案  
+> [查看更多](https://limeui.qcoon.cn/#/painter)  
+
+## 平台兼容
+
+| H5  | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
+| --- | ---------- | ------------ | ---------- | ---------- | --------- | --- |
+| √   | √          | √            | 未测       | √          | √         | √   |
+
+## 安装
+在市场导入**[海报画板](https://ext.dcloud.net.cn/plugin?id=2389)uni_modules**版本的即可，无需`import`
+
+## 代码演示
+
+### 插件demo
+- lime-painter 为 demo
+- 位于 uni_modules/lime-painter/components/lime-painter
+- 导入插件后直接使用可查看demo
+```vue
+<lime-painter />
+```
+
+
+### 基本用法
+
+- 插件提供 JSON 及 Template 的方式绘制海报
+- 参考 css 块状流布局模拟 css schema。
+- 另外flex布局还不是成完善，请谨慎使用，普通的流布局我觉得已经够用了。
+
+#### 方式一 Template
+
+- 提供`l-painter-view`、`l-painter-text`、`l-painter-image`、`l-painter-qrcode`四种类型组件
+- 通过 `css` 属性绘制样式，与 style 使用方式保持一致。
+```html
+<l-painter>
+	//如果使用Template出现顺序错乱，可使用`template` 等所有变量完成再显示
+	<template v-if="show">
+		<l-painter-view
+			css="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block"
+		></l-painter-view>
+		<l-painter-view
+			css="background: #1989fa; height: 120rpx; width: 120rpx; border-top-right-radius: 60rpx; border-bottom-left-radius: 60rpx; display: inline-block; margin: 0 30rpx;"
+		></l-painter-view>
+		<l-painter-view
+			css="background: #ff9d00; height: 120rpx; width: 120rpx; border-radius: 50%; display: inline-block"
+		></l-painter-view>
+	<template>
+</l-painter>
+```
+
+#### 方式二 JSON
+
+- 在 json 里四种类型组件的`type`为`view`、`text`、`image`、`qrcode`
+- 通过 `board` 设置海报所需的 JSON 数据进行绘制或`ref`获取组件实例调用组件内的`render(json)`
+- 所有类型的 schema 都具有`css`字段，css 的 key 值使用**驼峰**如：`lineHeight`
+
+```html
+<l-painter :board="poster"/>
+```
+
+```js
+data() {
+	return {
+		poster: {
+			css: {
+				// 根节点若无尺寸，自动获取父级节点
+				width: '750rpx'
+			},
+			views: [
+				{
+					css: {
+						background: "#07c160",
+						height: "120rpx",
+						width: "120rpx",
+						display: "inline-block"
+					},
+					type: "view"
+				},
+				{
+					css: {
+						background: "#1989fa",
+						height: "120rpx",
+						width: "120rpx",
+						borderTopRightRadius: "60rpx",
+						borderBottomLeftRadius: "60rpx",
+						display: "inline-block",
+						margin: "0 30rpx"
+					},
+					views: [],
+					type: "view"
+				},
+				{
+					css: {
+						background: "#ff9d00",
+						height: "120rpx",
+						width: "120rpx",
+						borderRadius: "50%",
+						display: "inline-block"
+					},
+					views: [],
+					type: "view"
+				},
+			]
+		}
+	}
+}
+```
+
+### View 容器
+
+- 类似于 `div` 可以嵌套承载更多的 view、text、image，qrcode 共同构建一颗完整的节点树
+- 在 JSON 里具有 `views` 的数组字段，用于嵌套承载节点。
+
+#### 方式一 Template
+
+```html
+<l-painter>
+  <l-painter-view css="background: #f0f0f0; padding-top: 100rpx;">
+    <l-painter-view
+      css="background: #d9d9d9; width: 33.33%; height: 100rpx; display: inline-block"
+    ></l-painter-view>
+    <l-painter-view
+      css="background: #bfbfbf; width: 66.66%; height: 100rpx; display: inline-block"
+    ></l-painter-view>
+  </l-painter-view>
+</l-painter>
+```
+
+#### 方式二 JSON
+
+```js
+{
+	css: {},
+	views: [
+		{
+			type: 'view',
+			css: {
+				background: '#f0f0f0',
+				paddingTop: '100rpx'
+			},
+			views: [
+				{
+					type: 'view',
+					css: {
+						background: '#d9d9d9',
+						width: '33.33%',
+						height: '100rpx',
+						display: 'inline-block'
+					}
+				},
+				{
+					type: 'view',
+					css: {
+						background: '#bfbfbf',
+						width: '66.66%',
+						height: '100rpx',
+						display: 'inline-block'
+					}
+				}
+			],
+
+		}
+	]
+}
+```
+
+### Text 文本
+
+- 通过 `text` 属性填写文本内容。
+- 支持`\n`换行符
+- 支持省略号，使用 css 的`line-clamp`设置行数，当文字内容超过会显示省略号。
+- 支持`text-decoration`
+
+#### 方式一 Template
+
+```html
+<l-painter>
+  <l-painter-view css="background: #e0e2db; padding: 30rpx; color: #222a29">
+    <l-painter-text
+      text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
+    />
+    <l-painter-text
+      text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
+      css="text-align:center; padding-top: 20rpx; text-decoration: line-through "
+    />
+    <l-painter-text
+      text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
+      css="text-align:right; padding-top: 20rpx"
+    />
+    <l-painter-text
+      text="水调歌头\n明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。"
+      css="line-clamp: 3; padding-top: 20rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%); background-clip: text"
+    />
+  </l-painter-view>
+</l-painter>
+```
+
+#### 方式二 JSON
+
+```js
+// 基础用法
+{
+	type: 'text',
+	text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
+},
+{
+	type: 'text',
+	text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
+	css: {
+		// 设置居中对齐
+		textAlign: 'center',
+		// 设置中划线
+		textDecoration: 'line-through'
+	}
+},
+{
+	type: 'text',
+	text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
+	css: {
+		// 设置右对齐
+		textAlign: 'right',
+	}
+},
+{
+	type: 'text',
+	text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
+	css: {
+		// 设置行数，超出显示省略号
+		lineClamp: 3,
+		// 渐变文字
+		background: 'linear-gradient(,#ff971b 0%, #1989fa 100%)',
+		backgroundClip: 'text'
+	}
+}
+```
+
+### Image 图片
+
+- 通过 `src` 属性填写图片路径。
+- 图片路径支持：网络图片，本地 static 里的图片路径，缓存路径，**字节的static目录是写相对路径**
+- 通过 `css` 的 `object-fit`属性可以设置图片的填充方式，可选值见下方 CSS 表格。
+- 通过 `css` 的 `object-position`配合 `object-fit` 可以设置图片的对齐方式，类似于`background-position`，详情见下方 CSS 表格。
+- 使用网络图片时：小程序需要去公众平台配置 [downloadFile](https://mp.weixin.qq.com/) 域名
+- 使用网络图片时：**H5 和 Nvue 需要决跨域问题**
+
+#### 方式一 Template
+
+```html
+<l-painter>
+  <!-- 基础用法 -->
+  <l-painter-image
+    src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
+    css="width: 200rpx; height: 200rpx"
+  />
+  <!-- 填充方式 -->
+  <!-- css object-fit 设置 填充方式 见下方表格-->
+  <l-painter-image
+    src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
+    css="width: 200rpx; height: 200rpx; object-fit: contain; background: #eee"
+  />
+  <!-- css object-position 设置 图片的对齐方式-->
+  <l-painter-image
+    src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
+    css="width: 200rpx; height: 200rpx; object-fit: contain; object-position: 50% 50%; background: #eee"
+  />
+</l-painter>
+```
+
+#### 方式二 JSON
+
+```js
+// 基础用法
+{
+	type: 'image',
+	src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
+	css: {
+		width: '200rpx',
+		height: '200rpx'
+	}
+},
+// 填充方式
+// css objectFit 设置 填充方式 见下方表格
+{
+	type: 'image',
+	src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
+	css: {
+		width: '200rpx',
+		height: '200rpx',
+		objectFit: 'contain'
+	}
+},
+// css objectPosition 设置 图片的对齐方式
+{
+	type: 'image',
+	src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
+	css: {
+		width: '200rpx',
+		height: '200rpx',
+		objectFit: 'contain',
+		objectPosition: '50% 50%'
+	}
+}
+```
+
+### Qrcode 二维码
+
+- 通过`text`属性填写需要生成二维码的文本。
+- 通过 `css` 里的 `color` 可设置生成码点的颜色。
+- 通过 `css` 里的 `background`可设置背景色。
+- 通过 `css `里的 `width`、`height`设置尺寸。
+
+#### 方式一 Template
+
+```html
+<l-painter>
+  <l-painter-qrcode
+    text="limeui.qcoon.cn"
+    css="width: 200rpx; height: 200rpx"
+  />
+</l-painter>
+```
+
+#### 方式二 JSON
+
+```js
+{
+	type: 'qrcode',
+	text: 'limeui.qcoon.cn',
+	css: {
+		width: '200rpx',
+		height: '200rpx',
+	}
+}
+```
+
+### 富文本
+- 这是一个有限支持的测试能力，只能通过JSON方式，不要抱太大希望!
+- 首先需要把富文本转成JSON,这需要引入`parser`这个包，如果你不使用是不会进入主包
+
+```html
+<l-painter ref="painter"/>
+```
+```js
+import parseHtml from '@/uni_modules/lime-painter/parser'
+const json = parseHtml(`<p><span>测试测试</span><img src="/static/logo.png"/></p>`)
+this.$refs.painter.render(json)
+```
+
+### 生成图片
+
+- 方式1、通过设置`isCanvasToTempFilePath`自动生成图片并在 `@success` 事件里接收海报临时路径
+- 方式2、通过调用内部方法生成图片：
+
+```html
+<l-painter ref="painter">...code</l-painter>
+```
+
+```js
+this.$refs.painter.canvasToTempFilePathSync({
+  fileType: "jpg",
+  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
+  pathType: 'url',
+  quality: 1,
+  success: (res) => {
+    console.log(res.tempFilePath);
+	// 非H5 保存到相册
+	// H5 提示用户长按图另存
+	uni.saveImageToPhotosAlbum({
+		filePath: res.tempFilePath,
+		success: function () {
+			console.log('save success');
+		}
+	});
+  },
+});
+```
+
+### 主动调用方式
+
+- 通过获取组件实例内部的`render`函数 传递`JSON`即可
+
+```html
+<l-painter ref="painter" />
+```
+
+```js
+// 渲染
+this.$refs.painter.render(jsonSchema);
+// 生成图片
+this.$refs.painter.canvasToTempFilePathSync({
+  fileType: "jpg",
+  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
+  pathType: 'url',
+  quality: 1,
+  success: (res) => {
+    console.log(res.tempFilePath);
+	// 非H5 保存到相册
+	uni.saveImageToPhotosAlbum({
+		filePath: res.tempFilePath,
+		success: function () {
+			console.log('save success');
+		}
+	});
+  },
+});
+```
+
+
+### H5跨域
+- 一般是需要后端或管理OSS资源的大佬处理
+- 一般OSS的处理方式:
+
+1、设置来源
+```cmd
+*
+```
+
+2、允许Methods
+```html
+GET
+```
+
+3、允许Headers
+```html
+access-control-allow-origin:*
+```
+
+4、最后如果还是不行,可试下给插件设置`useCORS`
+```html
+<l-painter useCORS>
+```
+
+
+
+### 海报示例
+
+- 提供一份示例，只把插件当成生成图片的工具，非必要不要在弹窗里使用。
+- 通过设置`isCanvasToTempFilePath`主动生成图片，再由 `@success` 事件接收海报临时路径
+- 设置`hidden`隐藏画板。
+请注意，示例用到了图片，海报的渲染是包括下载图片的时间，也许在某天图片会失效或访问超级慢，请更换为你的图片再查看，另外如果你是小程序请在使用示例时把**不校验合法域名**勾上！！！！！不然不显示还以为是插件的锅，求求了大佬们！
+#### 方式一 Template
+
+```html
+<image :src="path" mode="widthFix"></image>
+<l-painter
+  isCanvasToTempFilePath
+  @success="path = $event"
+  hidden
+  css="width: 750rpx; padding-bottom: 40rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%)"
+>
+  <l-painter-image
+    src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
+    css="margin-left: 40rpx; margin-top: 40rpx; width: 84rpx;  height: 84rpx; border-radius: 50%;"
+  />
+  <l-painter-view
+    css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block"
+  >
+    <l-painter-text
+      text="隔壁老王"
+      css="display: block; padding-bottom: 10rpx; color: #fff; font-size: 32rpx; fontWeight: bold"
+    />
+    <l-painter-text
+      text="为您挑选了一个好物"
+      css="color: rgba(255,255,255,.7); font-size: 24rpx"
+    />
+  </l-painter-view>
+  <l-painter-view
+    css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)"
+  >
+    <l-painter-image
+      src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
+      css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx; border-radius: 12rpx;"
+    />
+    <l-painter-view
+      css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;"
+    >
+      <l-painter-text text="￥" css="vertical-align: bottom" />
+      <l-painter-text
+        text="39"
+        css="vertical-align: bottom; font-size: 58rpx"
+      />
+      <l-painter-text text=".39" css="vertical-align: bottom" />
+      <l-painter-text
+        text="￥59.99"
+        css="vertical-align: bottom; padding-left: 10rpx; font-weight: normal; text-decoration: line-through; color: #999999"
+      />
+    </l-painter-view>
+    <l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
+      <l-painter-text text="自营" css="color: #212121; background: #ffb400;" />
+      <l-painter-text
+        text="30天最低价"
+        css="margin-left: 16rpx; background: #fff4d9; text-decoration: line-through;"
+      />
+      <l-painter-text
+        text="满减优惠"
+        css="margin-left: 16rpx; background: #fff4d9"
+      />
+      <l-painter-text
+        text="超高好评"
+        css="margin-left: 16rpx; background: #fff4d9"
+      />
+    </l-painter-view>
+    <l-painter-view css="margin-top: 30rpx">
+      <l-painter-text
+        css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx; width: 478rpx; padding-right:32rpx; box-sizing: border-box"
+        text="360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝"
+      ></l-painter-text>
+      <l-painter-qrcode
+        css="width: 128rpx; height: 128rpx;"
+        text="limeui.qcoon.cn"
+      ></l-painter-qrcode>
+    </l-painter-view>
+  </l-painter-view>
+</l-painter>
+```
+
+```js
+data() {
+	return {
+		path: ''
+	}
+}
+```
+
+#### 方式二 JSON
+
+```html
+<image :src="path" mode="widthFix"></image>
+<l-painter
+  :board="poster"
+  isCanvasToTempFilePath
+  @success="path = $event"
+  hidden
+/>
+```
+
+```js
+data() {
+	return {
+		path: '',
+		poster: {
+		    css: {
+		        width: "750rpx",
+		        paddingBottom: "40rpx",
+		        background: "linear-gradient(,#000 0%, #ff5000 100%)"
+		    },
+		    views: [
+		        {
+		            src: "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg",
+		            type: "image",
+		            css: {
+		                background: "#fff",
+		                objectFit: "cover",
+		                marginLeft: "40rpx",
+		                marginTop: "40rpx",
+		                width: "84rpx",
+		                border: "2rpx solid #fff",
+		                boxSizing: "border-box",
+		                height: "84rpx",
+		                borderRadius: "50%"
+		            }
+		        },
+		        {
+		            type: "view",
+		            css: {
+		                marginTop: "40rpx",
+		                paddingLeft: "20rpx",
+		                display: "inline-block"
+		            },
+		            views: [
+		                {
+		                    text: "隔壁老王",
+		                    type: "text",
+		                    css: {
+		                        display: "block",
+		                        paddingBottom: "10rpx",
+		                        color: "#fff",
+		                        fontSize: "32rpx",
+		                        fontWeight: "bold"
+		                    }
+		                },
+		                {
+		                    text: "为您挑选了一个好物",
+		                    type: "text",
+		                    css: {
+		                        color: "rgba(255,255,255,.7)",
+		                        fontSize: "24rpx"
+		                    },
+		                }
+		            ],
+		        },
+		        {
+		            css: {
+		                marginLeft: "40rpx",
+		                marginTop: "30rpx",
+		                padding: "32rpx",
+		                boxSizing: "border-box",
+		                background: "#fff",
+		                borderRadius: "16rpx",
+		                width: "670rpx",
+		                boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
+		            },
+		            views: [
+		                {
+							src: "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg",
+							type: "image",
+		                    css: {
+		                        objectFit: "cover",
+		                        objectPosition: "50% 50%",
+		                        width: "606rpx",
+		                        height: "606rpx"
+		                    },
+		                }, {
+		                    css: {
+		                        marginTop: "32rpx",
+		                        color: "#FF0000",
+		                        fontWeight: "bold",
+		                        fontSize: "28rpx",
+		                        lineHeight: "1em"
+		                    },
+		                    views: [{
+								text: "￥",
+								type: "text",
+		                        css: {
+		                            verticalAlign: "bottom"
+		                        },
+		                    }, {
+								text: "39",
+								type: "text",
+		                        css: {
+		                            verticalAlign: "bottom",
+		                            fontSize: "58rpx"
+		                        },
+		                    }, {
+								text: ".39",
+								type: "text",
+		                        css: {
+		                            verticalAlign: "bottom"
+		                        },
+		                    }, {
+								text: "￥59.99",
+								type: "text",
+		                        css: {
+		                            verticalAlign: "bottom",
+		                            paddingLeft: "10rpx",
+		                            fontWeight: "normal",
+		                            textDecoration: "line-through",
+		                            color: "#999999"
+		                        }
+		                    }],
+
+		                    type: "view"
+		                }, {
+		                    css: {
+		                        marginTop: "32rpx",
+		                        fontSize: "26rpx",
+		                        color: "#8c5400"
+		                    },
+		                    views: [{
+								text: "自营",
+								type: "text",
+		                        css: {
+		                            color: "#212121",
+		                            background: "#ffb400"
+		                        },
+		                    }, {
+								text: "30天最低价",
+								type: "text",
+		                        css: {
+		                            marginLeft: "16rpx",
+		                            background: "#fff4d9",
+		                            textDecoration: "line-through"
+		                        },
+		                    }, {
+								text: "满减优惠",
+								type: "text",
+		                        css: {
+		                            marginLeft: "16rpx",
+		                            background: "#fff4d9"
+		                        },
+		                    }, {
+								text: "超高好评",
+								type: "text",
+		                        css: {
+		                            marginLeft: "16rpx",
+		                            background: "#fff4d9"
+		                        },
+
+		                    }],
+
+		                    type: "view"
+		                }, {
+		                    css: {
+		                        marginTop: "30rpx"
+		                    },
+		                    views: [
+								{
+									text: "360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝",
+									type: "text",
+									css: {
+										paddingRight: "32rpx",
+										boxSizing: "border-box",
+										lineClamp: 2,
+										color: "#333333",
+										lineHeight: "1.8em",
+										fontSize: "36rpx",
+										width: "478rpx"
+		                        },
+		                    }, {
+								text: "limeui.qcoon.cn",
+								type: "qrcode",
+		                        css: {
+		                            width: "128rpx",
+		                            height: "128rpx",
+		                        },
+
+		                    }],
+		                    type: "view"
+		                }],
+		            type: "view"
+		        }
+		    ]
+		}
+	}
+}
+```
+
+
+### 自定义字体
+- 需要平台的支持，已知微信小程序支持，其它的没试过，如果可行请告之
+
+```
+// 需要在app.vue中下载字体
+uni.loadFontFace({
+	global:true,
+	scopes: ['native'],
+	family: '自定义字体名称',
+	source: 'url("https://sungd.github.io/Pacifico.ttf")',
+  
+	success() {
+	  console.log('success')
+  }
+})
+
+
+// 然后就可以在插件的css中写font-family: '自定义字体名称'
+```
+
+
+### Nvue
+- 必须为HBX 3.4.11及以上
+
+
+### 原生小程序
+
+- 插件里的`painter.js`支持在原生小程序中使用
+- new Painter 之后在`source`里传入 JSON
+- 再调用`render`绘制海报
+- 如需生成图片，请查看微信小程序 cavnas 的[canvasToTempFilePath](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html)
+
+```html
+<canvas type="2d" id="painter" style="width: 100%"></canvas>
+```
+
+```js
+import { Painter } from "./painter";
+page({
+  data: {
+    poster: {
+      css: {
+        width: "750rpx",
+      },
+      views: [
+        {
+          type: "view",
+          css: {
+            background: "#d2d4c8",
+            paddingTop: "100rpx",
+          },
+          views: [
+            {
+              type: "view",
+              css: {
+                background: "#5f7470",
+                width: "33.33%",
+                height: "100rpx",
+                display: "inline-block",
+              },
+            },
+            {
+              type: "view",
+              css: {
+                background: "#889696",
+                width: "33.33%",
+                height: "100rpx",
+                display: "inline-block",
+              },
+            },
+            {
+              type: "view",
+              css: {
+                background: "#b8bdb5",
+                width: "33.33%",
+                height: "100rpx",
+                display: "inline-block",
+              },
+            },
+          ],
+        },
+      ],
+    },
+  },
+  async onLoad() {
+    const res = await this.getCentext();
+    const painter = new Painter(res);
+    // 返回计算布局后的整个内容尺寸
+    const { width, height } = await painter.source(this.data.poster);
+    // 得到计算后的尺寸后 可给canvas尺寸赋值，达到动态响应效果
+    // 渲染
+    await painter.render();
+  },
+  // 获取canvas 2d
+  // 非2d 需要传一个 createImage 方法用于获取图片信息 即把 getImageInfo 的 success 通过 promise resolve 返回
+  getCentext() {
+    return new Promise((resolve) => {
+      wx.createSelectorQuery()
+        .select(`#painter`)
+        .node()
+        .exec((res) => {
+          let { node: canvas } = res[0];
+          resolve({
+            canvas,
+            context: canvas.getContext("2d"),
+            width: canvas.width,
+            height: canvas.height,
+			// createImage: getImageInfo()
+            pixelRatio: 2,
+          });
+        });
+    });
+  },
+});
+```
+
+### 旧版(1.6.x)更新
+
+- 由于 1.8.x 版放弃了以定位的方式，所以 1.6.x 版更新之后要每个样式都加上`position: absolute`
+- 旧版的 `image` mode 模式被放弃，使用`object-fit`
+- 旧版的 `isRenderImage` 改成 `is-canvas-to-temp-file-path`
+- 旧版的 `maxLines` 改成 `line-clamp`
+
+## API
+
+### Props
+
+| 参数                       | 说明                                                         | 类型             | 默认值       |
+| -------------------------- | ------------------------------------------------------------ | ---------------- | ------------ |
+| board                      | JSON 方式的海报元素对象集                                    | <em>object</em>  | -            |
+| css                        | 海报内容最外层的样式，可以理解为`body`                           | <em>object</em>  | 参数请向下看 |
+| custom-style               | canvas 元素的样式                                            | <em>string</em>  |              |
+| hidden               		 | 隐藏画板                                                    | <em>boolean</em>  |   `false`    |
+| is-canvas-to-temp-file-path | 是否生成图片，在`@success`事件接收图片地址                   | <em>boolean</em> | `false`      |
+| after-delay                | 生成图片错乱，可延时生成图片                                 | <em>number</em>  | `100`        |
+| type                       | canvas 类型，对微信头条支付宝小程序可有效,可选值：`2d`，`''` | <em>string</em>  | `2d`         |
+| file-type                  | 生成图片的后缀类型, 可选值：`png`、`jpg`                     | <em>string</em>  | `png`        |
+| path-type                  | 生成图片路径类型，可选值`url`、`base64`                      | <em>string</em>  | `-`          |
+| pixel-ratio                | 生成图片的像素密度，默认为对应手机的像素密度，`nvue`无效     | <em>number</em>  | `-`          |
+| hidpi                | H5和APP是否使用高清处理     | <em>boolean</em>  | `true`          |
+| width                      | **废弃** 画板的宽度，一般只用于通过内部方法时加上            | <em>number</em>  | ``           |
+| height                     | **废弃** 画板的高度 ，同上                                   | <em>number</em>  | ``           |
+
+### css
+| 属性名                                                                              | 支持的值或类型                                                                                                                                                                       | 默认值   |
+| ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
+| (min\max)width                                                                      | 支持`%`、`rpx`、`px`                                                                                                                                                                 | -        |
+| height                                                                              | 同上                                                                                                                                                                                 | -        |
+| color                                                                               | `string`                                                                                                                                                                             | -        |
+| position                                                                            | 定位，可选值：`absolute`、`fixed`                                                                                                                                                    | -        |
+| ↳ left、top、right、bottom                                                          | 配合`position`才生效，支持`%`、`rpx`、`px`                                                                                                                                           | -        |
+| margin                                                                              | 可简写或各方向分别写，如：`margin-top`，支持`auto`、`rpx`、`px`                                                                                                                      | -        |
+| padding                                                                             | 可简写或各方向分别写，支持`rpx`、`px`                                                                                                                                                | -        |
+| border                                                                              | 可简写或各个值分开写：`border-width`、`border-style` 、`border-color`，简写请按顺序写                                                                                                | -        |
+| line-clamp                                                                          | `number`，超过行数显示省略号                                                                                                                                                         | -        |
+| vertical-align                                                                      | 文字垂直对齐，可选值：`bottom`、`top`、`middle`                                                                                                                                      | `middle` |
+| line-height                                                                         | 文字行高，支持`rpx`、`px`、`em`                                                                                                                                                      | `1.4em`  |
+| font-weight                                                                         | 文字粗细，可选值：`normal`、`bold`                                                                                                                                                   | `normal` |
+| font-size                                                                           | 文字大小，`string`，支持`rpx`、`px`                                                                                                                                                  | `14px`   |
+| text-decoration                                                                     | 文本修饰，可选值：`underline` 、`line-through`、`overline`                                                                                                                           | -        |
+| text-stroke                                                                         | 文字描边，可简写或各个值分开写，如：`text-stroke-color`, `text-stroke-width`                                                                                                              | -        |
+| text-align                                                                          | 文本水平对齐，可选值：`right` 、`center`                                                                                                                                             | `left`   |
+| display                                                                             | 框类型，可选值：`block`、`inline-block`、`flex`、`none`，当为`none`时是不渲染该段, `flex`功能简陋。                                                                                                            | -        |
+| flex                                                                                | 配合 display: flex; 属性定义了在分配多余空间,目前只用为数值如： flex: 1                                                                                                           | -        |
+| align-self                                                                          | 配合 display: flex; 单个项目垂直轴对齐方式: `flex-start` `flex-end` `center`                                                                                                         | `flex-start`        |
+| justify-content                                                                     | 配合 display: flex; 水平轴对齐方式: `flex-start` `flex-end` `center`                                                                                                         | `flex-start`        |
+| align-items                                                                         | 配合 display: flex; 垂直轴对齐方式: `flex-start` `flex-end` `center`                                                                                                  | `flex-start`        |
+| border-radius                                                                       | 圆角边框，支持`%`、`rpx`、`px`                                                                                                                                                       | -        |
+| box-sizing                                                                          | 可选值：`border-box`                                                                                                                                                                 | -        |
+| box-shadow                                                                          | 投影                                                                                                                                                                                 | -        |
+| background(color)                                                                   | 支持渐变，但必须写百分比！如:`linear-gradient(,#ff971b 0%, #ff5000 100%)`、`radial-gradient(#0ff 15%, #f0f 60%)`,目前 radial-gradient 渐变的圆心为元素中点，半径为最长边，不支持设置 | -        |
+| background-clip                                                                	  | 文字渐变，配合`background`背景渐变，设置`background-clip: text` 达到文字渐变效果 | -        |
+| background-image                                                                    | view 元素背景：`url(src)`,若只是设置背景图，请不要设置`background-repeat`                                                                                                                                                           | -        |
+| background-repeat                                                                   | 设置是否及如何重复背景纹理，可选值：`repeat`、`repeat-x`、`repeat-y`、`no-repeat`                                                                                                    | `repeat` |
+| [object-fit](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit/)          | 图片元素适应容器方式,类似于`mode`,可选值：`cover`、 `contain`、 `fill`、 `none`                                                                                                      | -        |
+| [object-position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-position) | 图片的对齐方式，配合`object-fit`使用                                                                                                                                                 | -        |
+
+### 图片填充模式 object-fit
+
+| 名称    | 含义                                                   |
+| ------- | ------------------------------------------------------ |
+| contain | 保持宽高缩放图片，使图片的长边能完全显示出来           |
+| cover   | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 |
+| fill    | 拉伸图片，使图片填满元素                               |
+| none    | 保持图片原有尺寸                                       |
+
+### 事件 Events
+
+| 事件名   | 说明                                                             | 返回值 |
+| -------- | ---------------------------------------------------------------- | ------ |
+| success  | 生成图片成功,若使用`is-canvas-to-temp-filePath` 可以接收图片地址 | path   |
+| fail     | 生成图片失败                                                     | error  |
+| done     | 绘制成功                                                         |        |
+| progress | 绘制进度                                                         | number |
+
+### 暴露函数 Expose
+| 事件名   | 说明                                                             | 返回值 |
+| -------- | ---------------------------------------------------------------- | ------ |
+| render(object)   |  渲染器，传入JSON 绘制海报 | promise   |
+| [canvasToTempFilePath](https://uniapp.dcloud.io/api/canvas/canvasToTempFilePath.html#canvastotempfilepath)(object)   | 把当前画布指定区域的内容导出生成指定大小的图片，并返回文件临时路径。    |   |
+| canvasToTempFilePathSync(object)    | 同步接口，同上                                                         |        |
+
+
+## 常见问题
+
+- 1、H5 端使用网络图片需要解决跨域问题。
+- 2、小程序使用网络图片需要去公众平台增加下载白名单！二级域名也需要配！
+- 3、H5 端生成图片是 base64，有时显示只有一半可以使用原生标签`<IMG/>`
+- 4、发生保存图片倾斜变形或提示 native buffer exceed size limit 时，使用 pixel-ratio="2"参数，降分辨率。
+- 5、h5 保存图片不需要调接口，提示用户长按图片保存。
+- 6、画板不能隐藏，包括`v-if`，`v-show`、`display:none`、`opacity:0`，另外也不要把画板放在弹窗里。如果需要隐藏画板请设置 `custom-style="position: fixed; left: 200%"`
+- 7、微信小程序真机调试请使用 **真机调试2.0**，不支持1.0。
+- 8、微信小程序打开调试时可以生但并闭无法生成时，这种情况一般是没有在公众号配置download域名
+- 9、HBX 3.4.5之前的版本不支持vue3
+- 10、在微信开发工具上 canvas 层级最高无法zindex，并不影响真机
+- 11、请不要导入非uni_modules插件
+- 12、关于QQ小程序 报 Propertyor method"toJSON"is not defined 请把基础库调到 1.50.3
+- 13、支付宝小程序 IDE 不支持 生成图片 请以真机调试结果为准
+- 14、返回值为字符串 `data:,` 大概是尺寸超过限制，设置 pixel-ratio="2"
+- 华为手机 APP 上无法生成图片，请使用 HBX2.9.11++（已过时，忽略这条）
+- IOS APP 请勿使用 HBX2.9.3.20201014 的版本！这个版本无法生成图片。（已过时，忽略这条）
+- 苹果微信 7.0.20 存在闪退和图片无法 onload 为微信 bug（已过时，忽略这条）
+- 微信小程序 IOS 旧接口 如父级设置圆角，子级也设会导致子级的失效，为旧接口BUG。
+- 微信小程序 安卓 旧接口 如使用图片必须加背景色，为旧接口BUG。
+- 微信小程序 安卓端 [图片可能在首次可以加载成功，再次加载会不触发任何事件](https://developers.weixin.qq.com/community/develop/doc/000ee2b8dacf4009337f51f4556800?highLine=canvas%25202d%2520createImage)，临时解决方法是给图片加个时间戳
+## 打赏
+
+如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
+
+![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/alipay.png)
+![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/wpay.png)
\ No newline at end of file
diff --git a/src/uni_modules/mp-html/README.md b/src/uni_modules/mp-html/README.md
new file mode 100644
index 00000000..7626289f
--- /dev/null
+++ b/src/uni_modules/mp-html/README.md
@@ -0,0 +1,194 @@
+## 为减小组件包的大小，默认组件包中不包含编辑、latex 公式等扩展功能，需要使用扩展功能的请参考下方的 插件扩展 栏的说明
+
+## 功能介绍
+- 全端支持（含 `v3、NVUE`）
+- 支持丰富的标签（包括 `table`、`video`、`svg` 等）
+- 支持丰富的事件效果（自动预览图片、链接处理等）
+- 支持设置占位图（加载中、出错时、预览时）
+- 支持锚点跳转、长按复制等丰富功能
+- 支持大部分 *html* 实体
+- 丰富的插件（关键词搜索、内容编辑、`latex` 公式等）
+- 效率高、容错性强且轻量化
+
+查看 [功能介绍](https://jin-yufeng.gitee.io/mp-html/#/overview/feature) 了解更多
+
+## 使用方法
+- `uni_modules` 方式  
+  1. 点击右上角的 `使用 HBuilder X 导入插件` 按钮直接导入项目或点击 `下载插件 ZIP` 按钮下载插件包并解压到项目的 `uni_modules/mp-html` 目录下  
+  2. 在需要使用页面的 `(n)vue` 文件中添加  
+     ```html
+     <!-- 不需要引入，可直接使用 -->
+     <mp-html :content="html" />
+     ```
+     ```javascript
+     export default {
+       data() {
+         return {
+           html: '<div>Hello World!</div>'
+         }
+       }
+     }
+     ```
+  3. 需要更新版本时在 `HBuilder X` 中右键 `uni_modules/mp-html` 目录选择 `从插件市场更新` 即可  
+
+- 源码方式  
+  1. 从 [github](https://github.com/jin-yufeng/mp-html/tree/master/dist/uni-app) 或 [gitee](https://gitee.com/jin-yufeng/mp-html/tree/master/dist/uni-app) 下载源码  
+     插件市场的 **非 uni_modules 版本** 无法更新，不建议从插件市场获取  
+  2. 在需要使用页面的 `(n)vue` 文件中添加  
+     ```html
+     <mp-html :content="html" />
+     ```
+     ```javascript
+     import mpHtml from '@/components/mp-html/mp-html'
+     export default {
+       // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
+       components: {
+         mpHtml
+       },
+       data() {
+         return {
+           html: '<div>Hello World!</div>'
+         }
+       }
+     }
+     ```
+
+- npm 方式  
+  1. 在项目根目录下执行  
+     ```bash
+     npm install mp-html
+     ```
+  2. 在需要使用页面的 `(n)vue` 文件中添加  
+     ```html
+     <mp-html :content="html" />
+     ```
+     ```javascript
+     import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
+     export default {
+       // 不可省略
+       components: {
+         mpHtml
+       },
+       data() {
+         return {
+           html: '<div>Hello World!</div>'
+         }
+       }
+     }
+     ```
+  3. 需要更新版本时执行以下命令即可  
+     ```bash
+     npm update mp-html
+     ```
+  
+  使用 *cli* 方式运行的项目，通过 *npm* 方式引入时，需要在 *vue.config.js* 中配置 *transpileDependencies*，详情可见 [#330](https://github.com/jin-yufeng/mp-html/issues/330#issuecomment-913617687)  
+  如果在 **nvue** 中使用还要将 `dist/uni-app/static` 目录下的内容拷贝到项目的 `static` 目录下，否则无法运行  
+
+查看 [快速开始](https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart) 了解更多
+
+## 组件属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|:---:|:---:|:---:|---|
+| container-style | String |  | 容器的样式（[2.1.0+](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog#v210)） |
+| content | String |  | 用于渲染的 html 字符串 |
+| copy-link | Boolean | true | 是否允许外部链接被点击时自动复制 |
+| domain | String |  | 主域名（用于链接拼接） |
+| error-img | String |  | 图片出错时的占位图链接 |
+| lazy-load | Boolean | false | 是否开启图片懒加载 |
+| loading-img | String |  | 图片加载过程中的占位图链接 |
+| pause-video | Boolean | true | 是否在播放一个视频时自动暂停其他视频 |
+| preview-img | Boolean | true | 是否允许图片被点击时自动预览 |
+| scroll-table | Boolean | false | 是否给每个表格添加一个滚动层使其能单独横向滚动 |
+| selectable | Boolean | false | 是否开启文本长按复制 |
+| set-title | Boolean | true | 是否将 title 标签的内容设置到页面标题 |
+| show-img-menu | Boolean | true | 是否允许图片被长按时显示菜单 |
+| tag-style | Object |  | 设置标签的默认样式 |
+| use-anchor | Boolean | false | 是否使用锚点链接 |
+
+查看 [属性](https://jin-yufeng.gitee.io/mp-html/#/basic/prop) 了解更多
+
+## 组件事件
+
+| 名称 | 触发时机 |
+|:---:|---|
+| load | dom 树加载完毕时 |
+| ready | 图片加载完毕时 |
+| error | 发生渲染错误时 |
+| imgtap | 图片被点击时 |
+| linktap | 链接被点击时 |
+| play | 音视频播放时 |
+
+查看 [事件](https://jin-yufeng.gitee.io/mp-html/#/basic/event) 了解更多
+
+## api
+组件实例上提供了一些 `api` 方法可供调用
+
+| 名称 | 作用 |
+|:---:|---|
+| in | 将锚点跳转的范围限定在一个 scroll-view 内 |
+| navigateTo | 锚点跳转 |
+| getText | 获取文本内容 |
+| getRect | 获取富文本内容的位置和大小 |
+| setContent | 设置富文本内容 |
+| imgList | 获取所有图片的数组 |
+| pauseMedia | 暂停播放音视频（[2.2.2+](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog#v222)） |
+| setPlaybackRate | 设置音视频播放速率（[2.4.0+](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog#v240)） |
+
+查看 [api](https://jin-yufeng.gitee.io/mp-html/#/advanced/api) 了解更多
+
+## 插件扩展  
+除基本功能外，本组件还提供了丰富的扩展，可按照需要选用
+
+| 名称 | 作用 |
+|:---:|---|
+| audio | 音乐播放器 |
+| editable | 富文本 **编辑**（[示例项目](https://mp-html.oss-cn-hangzhou.aliyuncs.com/editable.zip)） |
+| emoji | 解析 emoji |
+| highlight | 代码块高亮显示 |
+| markdown | 渲染 markdown |
+| search | 关键词搜索 |
+| style | 匹配 style 标签中的样式 |
+| txv-video | 使用腾讯视频 |
+| img-cache | 图片缓存 by [@PentaTea](https://github.com/PentaTea) |
+| latex | 渲染 latex 公式 by [@Zeng-J](https://github.com/Zeng-J) |
+
+从插件市场导入的包中 **不含有** 扩展插件，使用插件需通过微信小程序 `富文本插件` 获取或参考以下方法进行打包：  
+1. 获取完整组件包  
+   ```bash
+   npm install mp-html
+   ```
+2. 编辑 `tools/config.js` 中的 `plugins` 项，选择需要的插件  
+3. 生成新的组件包  
+   在 `node_modules/mp-html` 目录下执行  
+   ```bash
+   npm install
+   npm run build:uni-app
+   ```
+4. 拷贝 `dist/uni-app` 中的内容到项目根目录  
+
+查看 [插件](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin) 了解更多
+
+## 关于 nvue
+`nvue` 使用原生渲染，不支持部分 `css` 样式，为实现和 `html` 相同的效果，组件内部通过 `web-view` 进行渲染，性能上差于原生，根据 `weex` 官方建议，`web` 标签仅应用在非常规的降级场景。因此，如果通过原生的方式（如 `richtext`）能够满足需要，则不建议使用本组件，如果有较多的富文本内容，则可以直接使用 `vue` 页面  
+由于渲染方式与其他端不同，有以下限制：  
+1. 不支持 `lazy-load` 属性
+2. 视频不支持全屏播放
+3. 如果在 `flex-direction: row` 的容器中使用，需要给组件设置宽度或设置 `flex: 1` 占满剩余宽度
+
+纯 `nvue` 模式下，[此问题](https://ask.dcloud.net.cn/question/119678) 修复前，不支持通过 `uni_modules` 引入，需要本地引入（将 [dist/uni-app](https://github.com/jin-yufeng/mp-html/tree/master/dist/uni-app) 中的内容拷贝到项目根目录下）  
+
+## 立即体验
+![富文本插件](https://mp-html.oss-cn-hangzhou.aliyuncs.com/qrcode.jpg)
+
+## 问题反馈
+遇到问题时，请先查阅 [常见问题](https://jin-yufeng.gitee.io/mp-html/#/question/faq) 和 [issue](https://github.com/jin-yufeng/mp-html/issues) 中是否已有相同的问题  
+可通过 [issue](https://github.com/jin-yufeng/mp-html/issues/new/choose) 、插件问答或发送邮件到 [mp_html@126.com](mailto:mp_html@126.com) 提问，不建议在评论区提问（不方便回复）  
+提问请严格按照 [issue 模板](https://github.com/jin-yufeng/mp-html/issues/new/choose) ，描述清楚使用环境、`html` 内容或可复现的 `demo` 项目以及复现方式，对于 **描述不清**、**无法复现** 或重复的问题将不予回复  
+
+欢迎加入 `QQ` 交流群：  
+群1（已满）：`699734691`  
+群2（已满）：`778239129`  
+群3：`960265313`  
+
+查看 [问题反馈](https://jin-yufeng.gitee.io/mp-html/#/question/feedback) 了解更多
diff --git a/src/uni_modules/mp-html/changelog.md b/src/uni_modules/mp-html/changelog.md
new file mode 100644
index 00000000..6fd03ebc
--- /dev/null
+++ b/src/uni_modules/mp-html/changelog.md
@@ -0,0 +1,150 @@
+## v2.5.0（2024-04-22）
+1. `U` `play` 事件增加返回 `src` 等信息 [详细](https://github.com/jin-yufeng/mp-html/issues/526)
+2. `U` `preview-img` 属性支持设置为 `all` 开启 `base64` 图片预览 [详细](https://github.com/jin-yufeng/mp-html/issues/536)
+3. `U` `editable` 插件增加简易模式（点击文字直接编辑）
+4. `U` `latex` 插件支持块级公式 [详细](https://github.com/jin-yufeng/mp-html/issues/582)
+5. `F` 修复了表格部分情况下背景丢失的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/587)
+6. `F` 修复了部分 `svg` 无法显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/591)
+7. `F` 修复了 `h5` 和 `app` 端部分情况下样式无法识别的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/518)
+8. `F` 修复了 `latex` 插件部分情况下显示不正确的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/580)
+9. `F` 修复了 `editable` 插件表格无法删除的问题
+10. `F` 修复了 `editable` 插件 `vue3` `h5` 端点击图片报错的问题
+11. `F` 修复了 `editable` 插件点击表格没有菜单栏的问题
+## v2.4.3（2024-01-21）
+1. `A` 增加 [card](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#card) 插件 [详细](https://github.com/jin-yufeng/mp-html/pull/533) by [@whoooami](https://github.com/whoooami)
+2. `F` 修复了 `svg` 中包含 `foreignobject` 可能不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/523)
+3. `F` 修复了合并单元格的表格部分情况下显示不正确的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/561)
+4. `F` 修复了 `img` 标签设置 `object-fit` 无效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/567)
+5. `F` 修复了 `latex` 插件公式会换行的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/540) 
+6. `F` 修复了 `editable` 和 `audio` 插件共用时点击 `audio` 无法编辑的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/529) by [@whoooami](https://github.com/whoooami)
+7. `F` 修复了微信小程序部分情况下图片会报错 `replace of undefined` 的问题
+8. `F` 修复了快手小程序图片不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/571)
+## v2.4.2（2023-05-14）
+1. `A` `editable` 插件支持修改文字颜色 [详细](https://github.com/jin-yufeng/mp-html/issues/254)
+2. `F` 修复了 `svg` 中有 `style` 不生效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/505)
+3. `F` 修复了使用旧版编译器可能报错 `Bad attr nodes` 的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/472)
+4. `F` 修复了 `app` 端可能出现无法读取 `lazyLoad` 的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/513)
+5. `F` 修复了 `editable` 插件在点击换图时未拼接 `domain` 的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/497) by [@TwoKe945](https://github.com/TwoKe945)
+6. `F` 修复了 `latex` 插件部分情况下不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/515) 
+7. `F` 修复了 `editable` 插件点击音视频时其他标签框不消失的问题
+## v2.4.1（2022-12-25）
+1. `F` 修复了没有图片时 `ready` 事件可能不触发的问题
+2. `F` 修复了加载过程中可能出现 `Root label not found` 错误的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/470)
+3. `F` 修复了 `audio` 插件退出页面可能会报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/457)
+4. `F` 修复了 `vue3` 运行到 `app` 在 `HBuilder X 3.6.10` 以上报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/480)
+5. `F` 修复了 `nvue` 端链接中包含 `%22` 时可能无法显示的问题
+6. `F` 修复了 `vue3` 使用 `highlight` 插件可能报错的问题
+## v2.4.0（2022-08-27）
+1. `A` 增加了 [setPlaybackRate](https://jin-yufeng.gitee.io/mp-html/#/advanced/api#setPlaybackRate) 的 `api`，可以设置音视频的播放速率 [详细](https://github.com/jin-yufeng/mp-html/issues/452)
+2. `A` 示例小程序代码开源 [详细](https://github.com/jin-yufeng/mp-html-demo)
+3. `U` 优化 `ready` 事件触发时机，未设置懒加载的情况下基本可以准确触发 [详细](https://github.com/jin-yufeng/mp-html/issues/195)
+4. `U` `highlight` 插件在编辑状态下不进行高亮处理，便于编辑
+5. `F` 修复了 `flex` 布局下图片大小可能不正确的问题
+6. `F` 修复了 `selectable` 属性没有设置 `force` 也可能出现渲染异常的问题
+7. `F` 修复了表格中的图片大小可能不正确的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/448)
+8. `F` 修复了含有合并单元格的表格可能无法设置竖直对齐的问题
+9. `F` 修复了 `editable` 插件在 `scroll-view` 中使用时工具条位置可能不正确的问题
+10. `F` 修复了 `vue3` 使用 [search](advanced/plugin#search) 插件可能导致错误换行的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/449)
+## v2.3.2（2022-08-13）
+1. `A` 增加 [latex](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#latex) 插件，可以渲染数学公式 [详细](https://github.com/jin-yufeng/mp-html/pull/447) by [@Zeng-J](https://github.com/Zeng-J)
+2. `U` 优化根节点下有很多标签的长内容渲染速度
+3. `U` `highlight` 插件适配 `lang-xxx` 格式
+4. `F` 修复了 `table` 标签设置 `border` 属性后可能无法修改边框样式的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/439) by [@zouxingjie](https://github.com/zouxingjie)
+5. `F` 修复了 `editable` 插件输入连续空格无效的问题
+6. `F` 修复了 `vue3` 图片设置 `inline` 会报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/438)
+7. `F` 修复了 `vue3` 使用 `table` 可能报错的问题
+## v2.3.1（2022-05-20）
+1. `U` `app` 端支持使用本地图片
+2. `U` 优化了微信小程序 `selectable` 属性在 `ios` 端的处理 [详细](https://jin-yufeng.gitee.io/mp-html/#/basic/prop#selectable)
+3. `F` 修复了 `editable` 插件不在顶部时 `tooltip` 位置可能错误的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/430)
+4. `F` 修复了 `vue3` 运行到微信小程序可能报错丢失内容的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/414)
+5. `F` 修复了 `vue3` 部分标签可能被错误换行的问题
+6. `F` 修复了 `editable` 插件 `app` 端插入视频无法预览的问题
+## v2.3.0（2022-04-01）
+1. `A` 增加了 `play` 事件，音视频播放时触发，可用于与页面其他音视频进行互斥播放 [详细](basic/event#play)
+2. `U` `show-img-menu` 属性支持控制预览时是否长按弹出菜单
+3. `U` 优化 `wxs` 处理，提高渲染性能 [详细](https://developers.weixin.qq.com/community/develop/article/doc/0006cc2b204740f601bd43fa25a413)  
+4. `U` `video` 标签支持 `object-fit` 属性
+5. `U` 增加支持一些常用实体编码 [详细](https://github.com/jin-yufeng/mp-html/issues/418)
+6. `F` 修复了图片仅设置高度可能不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/410)
+7. `F` 修复了 `video` 标签高度设置为 `auto` 不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/411)
+8. `F` 修复了使用 `grid` 布局时可能样式错误的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/413)
+9. `F` 修复了含有合并单元格的表格部分情况下显示异常的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/417)
+10. `F` 修复了 `editable` 插件连续插入内容时顺序不正确的问题
+11. `F` 修复了 `uni-app` 包 `vue3` 使用 `audio` 插件报错的问题
+12. `F` 修复了 `uni-app` 包 `highlight` 插件使用自定义的 `prism.min.js` 报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/416)
+## v2.2.2（2022-02-26）
+1. `A` 增加了 [pauseMedia](https://jin-yufeng.gitee.io/mp-html/#/advanced/api#pauseMedia) 的 `api`，可用于暂停播放音视频 [详细](https://github.com/jin-yufeng/mp-html/issues/317)
+2. `U` 优化了长内容的加载速度  
+3. `U` 适配 `vue3` [#389](https://github.com/jin-yufeng/mp-html/issues/389)、[#398](https://github.com/jin-yufeng/mp-html/pull/398) by [@zhouhuafei](https://github.com/zhouhuafei)、[#400](https://github.com/jin-yufeng/mp-html/issues/400)
+4. `F` 修复了小程序端图片高度设置为百分比时可能不显示的问题
+5. `F` 修复了 `highlight` 插件部分情况下可能显示不完整的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/403)
+## v2.2.1（2021-12-24）
+1. `A` `editable` 插件增加上下移动标签功能
+2. `U` `editable` 插件支持在文本中间光标处插入内容
+3. `F` 修复了 `nvue` 端设置 `margin` 后可能导致高度不正确的问题
+4. `F` 修复了 `highlight` 插件使用压缩版的 `prism.css` 可能导致背景失效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/367)
+5. `F` 修复了编辑状态下使用 `emoji` 插件内容为空时可能报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/371)
+6. `F` 修复了使用 `editable` 插件后将 `selectable` 属性设置为 `force` 不生效的问题
+## v2.2.0（2021-10-12）
+1. `A` 增加 `customElements` 配置项，便于添加自定义功能性标签 [详细](https://github.com/jin-yufeng/mp-html/issues/350)
+2. `A` `editable` 插件增加切换音视频自动播放状态的功能 [详细](https://github.com/jin-yufeng/mp-html/pull/341) by [@leeseett](https://github.com/leeseett)
+3. `A` `editable` 插件删除媒体标签时触发 `remove` 事件，便于删除已上传的文件
+4. `U` `editable` 插件 `insertImg` 方法支持同时插入多张图片 [详细](https://github.com/jin-yufeng/mp-html/issues/342)
+5. `U` `editable` 插入图片和音视频时支持拼接 `domian` 主域名
+6. `F` 修复了内部链接参数中包含 `://` 时被认为是外部链接的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/356)
+7. `F` 修复了部分 `svg` 标签名或属性名大小写不正确时不生效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/351)
+8. `F` 修复了 `nvue` 页面运行到非 `app` 平台时可能样式错误的问题
+## v2.1.5（2021-08-13）
+1. `A` 增加支持标签的 `dir` 属性
+2. `F` 修复了 `ruby` 标签文字与拼音没有居中对齐的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/325)
+3. `F` 修复了音视频标签内有 `a` 标签时可能无法播放的问题
+4. `F` 修复了 `externStyle` 中的 `class` 名包含下划线或数字时可能失效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/326)
+5. `F` 修复了 `h5` 端引入 `externStyle` 可能不生效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/326)
+## v2.1.4（2021-07-14）
+1. `F` 修复了 `rt` 标签无法设置样式的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/318)
+2. `F` 修复了表格中有单元格同时合并行和列时可能显示不正确的问题
+3. `F` 修复了 `app` 端无法关闭图片长按菜单的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/322)
+4. `F` 修复了 `editable` 插件只能添加图片链接不能修改的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/312) by [@leeseett](https://github.com/leeseett)
+## v2.1.3（2021-06-12）
+1. `A` `editable` 插件增加 `insertTable` 方法
+2. `U` `editable` 插件支持编辑表格中的空白单元格 [详细](https://github.com/jin-yufeng/mp-html/issues/310)
+3. `F` 修复了 `externStyle` 中使用伪类可能失效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/298)
+4. `F` 修复了多个组件同时使用时 `tag-style` 属性时可能互相影响的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/305) by [@woodguoyu](https://github.com/woodguoyu)
+5. `F` 修复了包含 `linearGradient` 的 `svg` 可能无法显示的问题
+6. `F` 修复了编译到头条小程序时可能报错的问题
+7. `F` 修复了 `nvue` 端不触发 `click` 事件的问题
+8. `F` 修复了 `editable` 插件尾部插入时无法撤销的问题
+9. `F` 修复了 `editable` 插件的 `insertHtml` 方法只能在末尾插入的问题
+10. `F` 修复了 `editable` 插件插入音频不显示的问题
+## v2.1.2（2021-04-24）
+1. `A` 增加了 [img-cache](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#img-cache) 插件，可以在 `app` 端缓存图片 [详细](https://github.com/jin-yufeng/mp-html/issues/292) by [@PentaTea](https://github.com/PentaTea)
+2. `U` 支持通过 `container-style` 属性设置 `white-space` 来保留连续空格和换行符 [详细](https://jin-yufeng.gitee.io/mp-html/#/question/faq#space)
+3. `U` 代码风格符合 [standard](https://standardjs.com) 标准
+4. `U` `editable` 插件编辑状态下支持预览视频 [详细](https://github.com/jin-yufeng/mp-html/issues/286)
+5. `F` 修复了 `svg` 标签内嵌 `svg` 时无法显示的问题
+6. `F` 修复了编译到支付宝和头条小程序时部分区域不可复制的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/291)
+## v2.1.1（2021-04-09）
+1. 修复了对 `p` 标签设置 `tag-style` 可能不生效的问题
+2. 修复了 `svg` 标签中的文本无法显示的问题
+3. 修复了使用 `editable` 插件编辑表格时可能报错的问题
+4. 修复了使用 `highlight` 插件运行到头条小程序时可能没有样式的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/280)
+5. 修复了使用 `editable` 插件 `editable` 属性为 `false` 时会报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/284)
+6. 修复了 `style` 插件连续子选择器失效的问题
+7. 修复了 `editable` 插件无法修改图片和字体大小的问题
+## v2.1.0.2（2021-03-21）
+修复了 `nvue` 端使用可能报错的问题
+## v2.1.0（2021-03-20）
+1. `A` 增加了 [container-style](https://jin-yufeng.gitee.io/mp-html/#/basic/prop#container-style) 属性 [详细](https://gitee.com/jin-yufeng/mp-html/pulls/1)
+2. `A` 增加支持 `strike` 标签
+3. `A` `editable` 插件增加 `placeholder` 属性 [详细](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#editable)
+4. `A` `editable` 插件增加 `insertHtml` 方法 [详细](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#editable)
+5. `U` 外部样式支持标签名选择器 [详细](https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart#setting)
+6. `F` 修复了 `nvue` 端部分情况下可能不显示的问题
+## v2.0.5（2021-03-12）
+1. `U` [linktap](https://jin-yufeng.gitee.io/mp-html/#/basic/event#linktap) 事件增加返回内部文本内容 `innerText` [详细](https://github.com/jin-yufeng/mp-html/issues/271)
+2. `U` [selectable](https://jin-yufeng.gitee.io/mp-html/#/basic/prop#selectable) 属性设置为 `force` 时能够在微信 `iOS` 端生效（文本块会变成 `inline-block`） [详细](https://github.com/jin-yufeng/mp-html/issues/267)
+3. `F` 修复了部分情况下竖向无法滚动的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/182)
+4. `F` 修复了多次修改富文本数据时部分内容可能不显示的问题
+5. `F` 修复了 [腾讯视频](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#txv-video) 插件可能无法播放的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/265)
+6. `F` 修复了 [highlight](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#highlight) 插件没有设置高亮语言时没有应用默认样式的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/276) by [@fuzui](https://github.com/fuzui)
diff --git a/src/uni_modules/mp-html/components/mp-html/mp-html.vue b/src/uni_modules/mp-html/components/mp-html/mp-html.vue
new file mode 100644
index 00000000..5d1d36d4
--- /dev/null
+++ b/src/uni_modules/mp-html/components/mp-html/mp-html.vue
@@ -0,0 +1,498 @@
+<template>
+  <view id="_root" :class="(selectable?'_select ':'')+'_root'" :style="containerStyle">
+    <slot v-if="!nodes[0]" />
+    <!-- #ifndef APP-PLUS-NVUE -->
+    <node v-else :childs="nodes" :opts="[lazyLoad,loadingImg,errorImg,showImgMenu,selectable]" name="span" />
+    <!-- #endif -->
+    <!-- #ifdef APP-PLUS-NVUE -->
+    <web-view ref="web" src="/uni_modules/mp-html/static/app-plus/mp-html/local.html" :style="'margin-top:-2px;height:' + height + 'px'" @onPostMessage="_onMessage" />
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+/**
+ * mp-html v2.5.0
+ * @description 富文本组件
+ * @tutorial https://github.com/jin-yufeng/mp-html
+ * @property {String} container-style 容器的样式
+ * @property {String} content 用于渲染的 html 字符串
+ * @property {Boolean} copy-link 是否允许外部链接被点击时自动复制
+ * @property {String} domain 主域名，用于拼接链接
+ * @property {String} error-img 图片出错时的占位图链接
+ * @property {Boolean} lazy-load 是否开启图片懒加载
+ * @property {string} loading-img 图片加载过程中的占位图链接
+ * @property {Boolean} pause-video 是否在播放一个视频时自动暂停其他视频
+ * @property {Boolean} preview-img 是否允许图片被点击时自动预览
+ * @property {Boolean} scroll-table 是否给每个表格添加一个滚动层使其能单独横向滚动
+ * @property {Boolean | String} selectable 是否开启长按复制
+ * @property {Boolean} set-title 是否将 title 标签的内容设置到页面标题
+ * @property {Boolean} show-img-menu 是否允许图片被长按时显示菜单
+ * @property {Object} tag-style 标签的默认样式
+ * @property {Boolean | Number} use-anchor 是否使用锚点链接
+ * @event {Function} load dom 结构加载完毕时触发
+ * @event {Function} ready 所有图片加载完毕时触发
+ * @event {Function} imgtap 图片被点击时触发
+ * @event {Function} linktap 链接被点击时触发
+ * @event {Function} play 音视频播放时触发
+ * @event {Function} error 媒体加载出错时触发
+ */
+// #ifndef APP-PLUS-NVUE
+import node from './node/node'
+// #endif
+import Parser from './parser'
+const plugins=[]
+// #ifdef APP-PLUS-NVUE
+const dom = weex.requireModule('dom')
+// #endif
+export default {
+  name: 'mp-html',
+  data () {
+    return {
+      nodes: [],
+      // #ifdef APP-PLUS-NVUE
+      height: 3
+      // #endif
+    }
+  },
+  props: {
+    containerStyle: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    copyLink: {
+      type: [Boolean, String],
+      default: true
+    },
+    domain: String,
+    errorImg: {
+      type: String,
+      default: ''
+    },
+    lazyLoad: {
+      type: [Boolean, String],
+      default: false
+    },
+    loadingImg: {
+      type: String,
+      default: ''
+    },
+    pauseVideo: {
+      type: [Boolean, String],
+      default: true
+    },
+    previewImg: {
+      type: [Boolean, String],
+      default: true
+    },
+    scrollTable: [Boolean, String],
+    selectable: [Boolean, String],
+    setTitle: {
+      type: [Boolean, String],
+      default: true
+    },
+    showImgMenu: {
+      type: [Boolean, String],
+      default: true
+    },
+    tagStyle: Object,
+    useAnchor: [Boolean, Number]
+  },
+  // #ifdef VUE3
+  emits: ['load', 'ready', 'imgtap', 'linktap', 'play', 'error'],
+  // #endif
+  // #ifndef APP-PLUS-NVUE
+  components: {
+    node
+  },
+  // #endif
+  watch: {
+    content (content) {
+      this.setContent(content)
+    }
+  },
+  created () {
+    this.plugins = []
+    for (let i = plugins.length; i--;) {
+      this.plugins.push(new plugins[i](this))
+    }
+  },
+  mounted () {
+    if (this.content && !this.nodes.length) {
+      this.setContent(this.content)
+    }
+  },
+  beforeDestroy () {
+    this._hook('onDetached')
+  },
+  methods: {
+    /**
+     * @description 将锚点跳转的范围限定在一个 scroll-view 内
+     * @param {Object} page scroll-view 所在页面的示例
+     * @param {String} selector scroll-view 的选择器
+     * @param {String} scrollTop scroll-view scroll-top 属性绑定的变量名
+     */
+    in (page, selector, scrollTop) {
+      // #ifndef APP-PLUS-NVUE
+      if (page && selector && scrollTop) {
+        this._in = {
+          page,
+          selector,
+          scrollTop
+        }
+      }
+      // #endif
+    },
+
+    /**
+     * @description 锚点跳转
+     * @param {String} id 要跳转的锚点 id
+     * @param {Number} offset 跳转位置的偏移量
+     * @returns {Promise}
+     */
+    navigateTo (id, offset) {
+      return new Promise((resolve, reject) => {
+        if (!this.useAnchor) {
+          reject(Error('Anchor is disabled'))
+          return
+        }
+        offset = offset || parseInt(this.useAnchor) || 0
+        // #ifdef APP-PLUS-NVUE
+        if (!id) {
+          dom.scrollToElement(this.$refs.web, {
+            offset
+          })
+          resolve()
+        } else {
+          this._navigateTo = {
+            resolve,
+            reject,
+            offset
+          }
+          this.$refs.web.evalJs('uni.postMessage({data:{action:"getOffset",offset:(document.getElementById(' + id + ')||{}).offsetTop}})')
+        }
+        // #endif
+        // #ifndef APP-PLUS-NVUE
+        let deep = ' '
+        // #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO
+        deep = '>>>'
+        // #endif
+        const selector = uni.createSelectorQuery()
+          // #ifndef MP-ALIPAY
+          .in(this._in ? this._in.page : this)
+          // #endif
+          .select((this._in ? this._in.selector : '._root') + (id ? `${deep}#${id}` : '')).boundingClientRect()
+        if (this._in) {
+          selector.select(this._in.selector).scrollOffset()
+            .select(this._in.selector).boundingClientRect()
+        } else {
+          // 获取 scroll-view 的位置和滚动距离
+          selector.selectViewport().scrollOffset() // 获取窗口的滚动距离
+        }
+        selector.exec(res => {
+          if (!res[0]) {
+            reject(Error('Label not found'))
+            return
+          }
+          const scrollTop = res[1].scrollTop + res[0].top - (res[2] ? res[2].top : 0) + offset
+          if (this._in) {
+            // scroll-view 跳转
+            this._in.page[this._in.scrollTop] = scrollTop
+          } else {
+            // 页面跳转
+            uni.pageScrollTo({
+              scrollTop,
+              duration: 300
+            })
+          }
+          resolve()
+        })
+        // #endif
+      })
+    },
+
+    /**
+     * @description 获取文本内容
+     * @return {String}
+     */
+    getText (nodes) {
+      let text = '';
+      (function traversal (nodes) {
+        for (let i = 0; i < nodes.length; i++) {
+          const node = nodes[i]
+          if (node.type === 'text') {
+            text += node.text.replace(/&amp;/g, '&')
+          } else if (node.name === 'br') {
+            text += '\n'
+          } else {
+            // 块级标签前后加换行
+            const isBlock = node.name === 'p' || node.name === 'div' || node.name === 'tr' || node.name === 'li' || (node.name[0] === 'h' && node.name[1] > '0' && node.name[1] < '7')
+            if (isBlock && text && text[text.length - 1] !== '\n') {
+              text += '\n'
+            }
+            // 递归获取子节点的文本
+            if (node.children) {
+              traversal(node.children)
+            }
+            if (isBlock && text[text.length - 1] !== '\n') {
+              text += '\n'
+            } else if (node.name === 'td' || node.name === 'th') {
+              text += '\t'
+            }
+          }
+        }
+      })(nodes || this.nodes)
+      return text
+    },
+
+    /**
+     * @description 获取内容大小和位置
+     * @return {Promise}
+     */
+    getRect () {
+      return new Promise((resolve, reject) => {
+        uni.createSelectorQuery()
+          // #ifndef MP-ALIPAY
+          .in(this)
+          // #endif
+          .select('#_root').boundingClientRect().exec(res => res[0] ? resolve(res[0]) : reject(Error('Root label not found')))
+      })
+    },
+
+    /**
+     * @description 暂停播放媒体
+     */
+    pauseMedia () {
+      for (let i = (this._videos || []).length; i--;) {
+        this._videos[i].pause()
+      }
+      // #ifdef APP-PLUS
+      const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].pause()'
+      // #ifndef APP-PLUS-NVUE
+      let page = this.$parent
+      while (!page.$scope) page = page.$parent
+      page.$scope.$getAppWebview().evalJS(command)
+      // #endif
+      // #ifdef APP-PLUS-NVUE
+      this.$refs.web.evalJs(command)
+      // #endif
+      // #endif
+    },
+
+    /**
+     * @description 设置媒体播放速率
+     * @param {Number} rate 播放速率
+     */
+    setPlaybackRate (rate) {
+      this.playbackRate = rate
+      for (let i = (this._videos || []).length; i--;) {
+        this._videos[i].playbackRate(rate)
+      }
+      // #ifdef APP-PLUS
+      const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].playbackRate=' + rate
+      // #ifndef APP-PLUS-NVUE
+      let page = this.$parent
+      while (!page.$scope) page = page.$parent
+      page.$scope.$getAppWebview().evalJS(command)
+      // #endif
+      // #ifdef APP-PLUS-NVUE
+      this.$refs.web.evalJs(command)
+      // #endif
+      // #endif
+    },
+
+    /**
+     * @description 设置内容
+     * @param {String} content html 内容
+     * @param {Boolean} append 是否在尾部追加
+     */
+    setContent (content, append) {
+      if (!append || !this.imgList) {
+        this.imgList = []
+      }
+      const nodes = new Parser(this).parse(content)
+      // #ifdef APP-PLUS-NVUE
+      if (this._ready) {
+        this._set(nodes, append)
+      }
+      // #endif
+      this.$set(this, 'nodes', append ? (this.nodes || []).concat(nodes) : nodes)
+
+      // #ifndef APP-PLUS-NVUE
+      this._videos = []
+      this.$nextTick(() => {
+        this._hook('onLoad')
+        this.$emit('load')
+      })
+
+      if (this.lazyLoad || this.imgList._unloadimgs < this.imgList.length / 2) {
+        // 设置懒加载，每 350ms 获取高度，不变则认为加载完毕
+        let height = 0
+        const callback = rect => {
+          if (!rect || !rect.height) rect = {}
+          // 350ms 总高度无变化就触发 ready 事件
+          if (rect.height === height) {
+            this.$emit('ready', rect)
+          } else {
+            height = rect.height
+            setTimeout(() => {
+              this.getRect().then(callback).catch(callback)
+            }, 350)
+          }
+        }
+        this.getRect().then(callback).catch(callback)
+      } else {
+        // 未设置懒加载，等待所有图片加载完毕
+        if (!this.imgList._unloadimgs) {
+          this.getRect().then(rect => {
+            this.$emit('ready', rect)
+          }).catch(() => {
+            this.$emit('ready', {})
+          })
+        }
+      }
+      // #endif
+    },
+
+    /**
+     * @description 调用插件钩子函数
+     */
+    _hook (name) {
+      for (let i = plugins.length; i--;) {
+        if (this.plugins[i][name]) {
+          this.plugins[i][name]()
+        }
+      }
+    },
+
+    // #ifdef APP-PLUS-NVUE
+    /**
+     * @description 设置内容
+     */
+    _set (nodes, append) {
+      this.$refs.web.evalJs('setContent(' + JSON.stringify(nodes).replace(/%22/g, '') + ',' + JSON.stringify([this.containerStyle.replace(/(?:margin|padding)[^;]+/g, ''), this.errorImg, this.loadingImg, this.pauseVideo, this.scrollTable, this.selectable]) + ',' + append + ')')
+    },
+
+    /**
+     * @description 接收到 web-view 消息
+     */
+    _onMessage (e) {
+      const message = e.detail.data[0]
+      switch (message.action) {
+        // web-view 初始化完毕
+        case 'onJSBridgeReady':
+          this._ready = true
+          if (this.nodes) {
+            this._set(this.nodes)
+          }
+          break
+        // 内容 dom 加载完毕
+        case 'onLoad':
+          this.height = message.height
+          this._hook('onLoad')
+          this.$emit('load')
+          break
+        // 所有图片加载完毕
+        case 'onReady':
+          this.getRect().then(res => {
+            this.$emit('ready', res)
+          }).catch(() => {
+            this.$emit('ready', {})
+          })
+          break
+        // 总高度发生变化
+        case 'onHeightChange':
+          this.height = message.height
+          break
+        // 图片点击
+        case 'onImgTap':
+          this.$emit('imgtap', message.attrs)
+          if (this.previewImg) {
+            uni.previewImage({
+              current: parseInt(message.attrs.i),
+              urls: this.imgList
+            })
+          }
+          break
+        // 链接点击
+        case 'onLinkTap': {
+          const href = message.attrs.href
+          this.$emit('linktap', message.attrs)
+          if (href) {
+            // 锚点跳转
+            if (href[0] === '#') {
+              if (this.useAnchor) {
+                dom.scrollToElement(this.$refs.web, {
+                  offset: message.offset
+                })
+              }
+            } else if (href.includes('://')) {
+              // 打开外链
+              if (this.copyLink) {
+                plus.runtime.openWeb(href)
+              }
+            } else {
+              uni.navigateTo({
+                url: href,
+                fail () {
+                  uni.switchTab({
+                    url: href
+                  })
+                }
+              })
+            }
+          }
+          break
+        }
+        case 'onPlay':
+          this.$emit('play')
+          break
+        // 获取到锚点的偏移量
+        case 'getOffset':
+          if (typeof message.offset === 'number') {
+            dom.scrollToElement(this.$refs.web, {
+              offset: message.offset + this._navigateTo.offset
+            })
+            this._navigateTo.resolve()
+          } else {
+            this._navigateTo.reject(Error('Label not found'))
+          }
+          break
+        // 点击
+        case 'onClick':
+          this.$emit('tap')
+          this.$emit('click')
+          break
+        // 出错
+        case 'onError':
+          this.$emit('error', {
+            source: message.source,
+            attrs: message.attrs
+          })
+      }
+    }
+    // #endif
+  }
+}
+</script>
+
+<style>
+/* #ifndef APP-PLUS-NVUE */
+/* 根节点样式 */
+._root {
+  padding: 1px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 长按复制 */
+._select {
+  user-select: text;
+}
+/* #endif */
+</style>
diff --git a/src/uni_modules/mp-html/components/mp-html/node/node.vue b/src/uni_modules/mp-html/components/mp-html/node/node.vue
new file mode 100644
index 00000000..b26eaa15
--- /dev/null
+++ b/src/uni_modules/mp-html/components/mp-html/node/node.vue
@@ -0,0 +1,587 @@
+<template>
+  <view :id="attrs.id" :class="'_block _'+name+' '+attrs.class" :style="attrs.style">
+    <block v-for="(n, i) in childs" v-bind:key="i">
+      <!-- 图片 -->
+      <!-- 占位图 -->
+      <image v-if="n.name==='img'&&!n.t&&((opts[1]&&!ctrl[i])||ctrl[i]<0)" class="_img" :style="n.attrs.style" :src="ctrl[i]<0?opts[2]:opts[1]" mode="widthFix" />
+      <!-- 显示图片 -->
+      <!-- #ifdef H5 || (APP-PLUS && VUE2) -->
+      <img v-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <!-- #endif -->
+      <!-- #ifndef H5 || (APP-PLUS && VUE2) -->
+      <!-- 表格中的图片，使用 rich-text 防止大小不正确 -->
+      <rich-text v-if="n.name==='img'&&n.t" :style="'display:'+n.t" :nodes="[{attrs:{style:n.attrs.style||'',src:n.attrs.src},name:'img'}]" :data-i="i" @tap.stop="imgTap" />
+      <!-- #endif -->
+      <!-- #ifndef H5 || APP-PLUS || MP-KUAISHOU -->
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;height:1px;'+n.attrs.style" :src="n.attrs.src" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||'scaleToFill'))" :lazy-load="opts[0]" :webp="n.webp" :show-menu-by-longpress="opts[3]&&!n.attrs.ignore" :image-menu-prevent="!opts[3]||n.attrs.ignore" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <!-- #endif -->
+      <!-- #ifdef MP-KUAISHOU -->
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src" :lazy-load="opts[0]" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap"></image>
+      <!-- #endif -->
+      <!-- #ifdef APP-PLUS && VUE3 -->
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;'+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||''))" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <!-- #endif -->
+      <!-- 文本 -->
+      <!-- #ifdef MP-WEIXIN -->
+      <text v-else-if="n.text" :user-select="opts[4]=='force'&&isiOS" decode>{{n.text}}</text>
+      <!-- #endif -->
+      <!-- #ifndef MP-WEIXIN || MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
+      <text v-else-if="n.text" decode>{{n.text}}</text>
+      <!-- #endif -->
+      <text v-else-if="n.name==='br'">\n</text>
+      <!-- 链接 -->
+      <view v-else-if="n.name==='a'" :id="n.attrs.id" :class="(n.attrs.href?'_a ':'')+n.attrs.class" hover-class="_hover" :style="'display:inline;'+n.attrs.style" :data-i="i" @tap.stop="linkTap">
+        <node name="span" :childs="n.children" :opts="opts" style="display:inherit" />
+      </view>
+      <!-- 视频 -->
+      <!-- #ifdef APP-PLUS -->
+      <view v-else-if="n.html" :id="n.attrs.id" :class="'_video '+n.attrs.class" :style="n.attrs.style" v-html="n.html" @vplay.stop="play" />
+      <!-- #endif -->
+      <!-- #ifndef APP-PLUS -->
+      <video v-else-if="n.name==='video'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay" :controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :object-fit="n.attrs['object-fit']" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
+      <!-- #endif -->
+      <!-- #ifdef H5 || APP-PLUS -->
+      <iframe v-else-if="n.name==='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder" :src="n.attrs.src" />
+      <embed v-else-if="n.name==='embed'" :style="n.attrs.style" :src="n.attrs.src" />
+      <!-- #endif -->
+      <!-- #ifndef MP-TOUTIAO || ((H5 || APP-PLUS) && VUE3) -->
+      <!-- 音频 -->
+      <audio v-else-if="n.name==='audio'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author" :controls="n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
+      <!-- #endif -->
+      <view v-else-if="(n.name==='table'&&n.c)||n.name==='li'" :id="n.attrs.id" :class="'_'+n.name+' '+n.attrs.class" :style="n.attrs.style">
+        <node v-if="n.name==='li'" :childs="n.children" :opts="opts" />
+        <view v-else v-for="(tbody, x) in n.children" v-bind:key="x" :class="'_'+tbody.name+' '+tbody.attrs.class" :style="tbody.attrs.style">
+          <node v-if="tbody.name==='td'||tbody.name==='th'" :childs="tbody.children" :opts="opts" />
+          <block v-else v-for="(tr, y) in tbody.children" v-bind:key="y">
+            <view v-if="tr.name==='td'||tr.name==='th'" :class="'_'+tr.name+' '+tr.attrs.class" :style="tr.attrs.style">
+              <node :childs="tr.children" :opts="opts" />
+            </view>
+            <view v-else :class="'_'+tr.name+' '+tr.attrs.class" :style="tr.attrs.style">
+              <view v-for="(td, z) in tr.children" v-bind:key="z" :class="'_'+td.name+' '+td.attrs.class" :style="td.attrs.style">
+                <node :childs="td.children" :opts="opts" />
+              </view>
+            </view>
+          </block>
+        </view>
+      </view>
+
+      <!-- 富文本 -->
+      <!-- #ifdef H5 || ((MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE2) -->
+      <rich-text v-else-if="!n.c&&!handler.isInline(n.name, n.attrs.style)" :id="n.attrs.id" :style="n.f" :user-select="opts[4]" :nodes="[n]" />
+      <!-- #endif -->
+      <!-- #ifndef H5 || ((MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE2) -->
+      <rich-text v-else-if="!n.c" :id="n.attrs.id" :style="'display:inline;'+n.f" :preview="false" :selectable="opts[4]" :user-select="opts[4]" :nodes="[n]" />
+      <!-- #endif -->
+      <!-- 继续递归 -->
+      <view v-else-if="n.c===2" :id="n.attrs.id" :class="'_block _'+n.name+' '+n.attrs.class" :style="n.f+';'+n.attrs.style">
+        <node v-for="(n2, j) in n.children" v-bind:key="j" :style="n2.f" :name="n2.name" :attrs="n2.attrs" :childs="n2.children" :opts="opts" />
+      </view>
+      <node v-else :style="n.f" :name="n.name" :attrs="n.attrs" :childs="n.children" :opts="opts" />
+    </block>
+  </view>
+</template>
+<script module="handler" lang="wxs">
+// 行内标签列表
+var inlineTags = {
+  abbr: true,
+  b: true,
+  big: true,
+  code: true,
+  del: true,
+  em: true,
+  i: true,
+  ins: true,
+  label: true,
+  q: true,
+  small: true,
+  span: true,
+  strong: true,
+  sub: true,
+  sup: true
+}
+/**
+ * @description 判断是否为行内标签
+ */
+module.exports = {
+  isInline: function (tagName, style) {
+    return inlineTags[tagName] || (style || '').indexOf('display:inline') !== -1
+  }
+}
+</script>
+<script>
+
+import node from './node'
+export default {
+  name: 'node',
+  options: {
+    // #ifdef MP-WEIXIN
+    virtualHost: true,
+    // #endif
+    // #ifdef MP-TOUTIAO
+    addGlobalClass: false
+    // #endif
+  },
+  data () {
+    return {
+      ctrl: {},
+      // #ifdef MP-WEIXIN
+      isiOS: uni.getDeviceInfo().system.includes('iOS')
+      // #endif
+    }
+  },
+  props: {
+    name: String,
+    attrs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    childs: Array,
+    opts: Array
+  },
+  components: {
+
+    // #ifndef (H5 || APP-PLUS) && VUE3
+    node
+    // #endif
+  },
+  mounted () {
+    this.$nextTick(() => {
+      for (this.root = this.$parent; this.root.$options.name !== 'mp-html'; this.root = this.root.$parent);
+    })
+    // #ifdef H5 || APP-PLUS
+    if (this.opts[0]) {
+      let i
+      for (i = this.childs.length; i--;) {
+        if (this.childs[i].name === 'img') break
+      }
+      if (i !== -1) {
+        this.observer = uni.createIntersectionObserver(this).relativeToViewport({
+          top: 500,
+          bottom: 500
+        })
+        this.observer.observe('._img', res => {
+          if (res.intersectionRatio) {
+            this.$set(this.ctrl, 'load', 1)
+            this.observer.disconnect()
+          }
+        })
+      }
+    }
+    // #endif
+  },
+  beforeDestroy () {
+    // #ifdef H5 || APP-PLUS
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+    // #endif
+  },
+  methods:{
+    // #ifdef MP-WEIXIN
+    toJSON () { return this },
+    // #endif
+    /**
+     * @description 播放视频事件
+     * @param {Event} e
+     */
+    play (e) {
+      const i = e.currentTarget.dataset.i
+      const node = this.childs[i]
+      this.root.$emit('play', {
+        source: node.name,
+        attrs: {
+          ...node.attrs,
+          src: node.src[this.ctrl[i] || 0]
+        }
+      })
+      // #ifndef APP-PLUS
+      if (this.root.pauseVideo) {
+        let flag = false
+        const id = e.target.id
+        for (let i = this.root._videos.length; i--;) {
+          if (this.root._videos[i].id === id) {
+            flag = true
+          } else {
+            this.root._videos[i].pause() // 自动暂停其他视频
+          }
+        }
+        // 将自己加入列表
+        if (!flag) {
+          const ctx = uni.createVideoContext(id
+            // #ifndef MP-BAIDU
+            , this
+            // #endif
+          )
+          ctx.id = id
+          if (this.root.playbackRate) {
+            ctx.playbackRate(this.root.playbackRate)
+          }
+          this.root._videos.push(ctx)
+        }
+      }
+      // #endif
+    },
+
+    /**
+     * @description 图片点击事件
+     * @param {Event} e
+     */
+    imgTap (e) {
+      const node = this.childs[e.currentTarget.dataset.i]
+      if (node.a) {
+        this.linkTap(node.a)
+        return
+      }
+      if (node.attrs.ignore) return
+      // #ifdef H5 || APP-PLUS
+      node.attrs.src = node.attrs.src || node.attrs['data-src']
+      // #endif
+      this.root.$emit('imgtap', node.attrs)
+      // 自动预览图片
+      if (this.root.previewImg) {
+        uni.previewImage({
+          // #ifdef MP-WEIXIN
+          showmenu: this.root.showImgMenu,
+          // #endif
+          // #ifdef MP-ALIPAY
+          enablesavephoto: this.root.showImgMenu,
+          enableShowPhotoDownload: this.root.showImgMenu,
+          // #endif
+          current: parseInt(node.attrs.i),
+          urls: this.root.imgList
+        })
+      }
+    },
+
+    /**
+     * @description 图片长按
+     */
+    imgLongTap (e) {
+      // #ifdef APP-PLUS
+      const attrs = this.childs[e.currentTarget.dataset.i].attrs
+      if (this.opts[3] && !attrs.ignore) {
+        uni.showActionSheet({
+          itemList: ['保存图片'],
+          success: () => {
+            const save = path => {
+              uni.saveImageToPhotosAlbum({
+                filePath: path,
+                success () {
+                  uni.showToast({
+                    title: '保存成功'
+                  })
+                }
+              })
+            }
+            if (this.root.imgList[attrs.i].startsWith('http')) {
+              uni.downloadFile({
+                url: this.root.imgList[attrs.i],
+                success: res => save(res.tempFilePath)
+              })
+            } else {
+              save(this.root.imgList[attrs.i])
+            }
+          }
+        })
+      }
+      // #endif
+    },
+
+    /**
+     * @description 图片加载完成事件
+     * @param {Event} e
+     */
+    imgLoad (e) {
+      const i = e.currentTarget.dataset.i
+      /* #ifndef H5 || (APP-PLUS && VUE2) */
+      if (!this.childs[i].w) {
+        // 设置原宽度
+        this.$set(this.ctrl, i, e.detail.width)
+      } else /* #endif */ if ((this.opts[1] && !this.ctrl[i]) || this.ctrl[i] === -1) {
+        // 加载完毕，取消加载中占位图
+        this.$set(this.ctrl, i, 1)
+      }
+      this.checkReady()
+    },
+
+    /**
+     * @description 检查是否所有图片加载完毕
+     */
+    checkReady () {
+      if (this.root && !this.root.lazyLoad) {
+        this.root._unloadimgs -= 1
+        if (!this.root._unloadimgs) {
+          setTimeout(() => {
+            this.root.getRect().then(rect => {
+              this.root.$emit('ready', rect)
+            }).catch(() => {
+              this.root.$emit('ready', {})
+            })
+          }, 350)
+        }
+      }
+    },
+
+    /**
+     * @description 链接点击事件
+     * @param {Event} e
+     */
+    linkTap (e) {
+      const node = e.currentTarget ? this.childs[e.currentTarget.dataset.i] : {}
+      const attrs = node.attrs || e
+      const href = attrs.href
+      this.root.$emit('linktap', Object.assign({
+        innerText: this.root.getText(node.children || []) // 链接内的文本内容
+      }, attrs))
+      if (href) {
+        if (href[0] === '#') {
+          // 跳转锚点
+          this.root.navigateTo(href.substring(1)).catch(() => { })
+        } else if (href.split('?')[0].includes('://')) {
+          // 复制外部链接
+          if (this.root.copyLink) {
+            // #ifdef H5
+            window.open(href)
+            // #endif
+            // #ifdef MP
+            uni.setClipboardData({
+              data: href,
+              success: () =>
+                uni.showToast({
+                  title: '链接已复制'
+                })
+            })
+            // #endif
+            // #ifdef APP-PLUS
+            plus.runtime.openWeb(href)
+            // #endif
+          }
+        } else {
+          // 跳转页面
+          uni.navigateTo({
+            url: href,
+            fail () {
+              uni.switchTab({
+                url: href,
+                fail () { }
+              })
+            }
+          })
+        }
+      }
+    },
+
+    /**
+     * @description 错误事件
+     * @param {Event} e
+     */
+    mediaError (e) {
+      const i = e.currentTarget.dataset.i
+      const node = this.childs[i]
+      // 加载其他源
+      if (node.name === 'video' || node.name === 'audio') {
+        let index = (this.ctrl[i] || 0) + 1
+        if (index > node.src.length) {
+          index = 0
+        }
+        if (index < node.src.length) {
+          this.$set(this.ctrl, i, index)
+          return
+        }
+      } else if (node.name === 'img') {
+        // #ifdef H5 && VUE3
+        if (this.opts[0] && !this.ctrl.load) return
+        // #endif
+        // 显示错误占位图
+        if (this.opts[2]) {
+          this.$set(this.ctrl, i, -1)
+        }
+        this.checkReady()
+      }
+      if (this.root) {
+        this.root.$emit('error', {
+          source: node.name,
+          attrs: node.attrs,
+          // #ifndef H5 && VUE3
+          errMsg: e.detail.errMsg
+          // #endif
+        })
+      }
+    }
+  }
+}
+</script>
+<style>
+/* a 标签默认效果 */
+._a {
+  padding: 1.5px 0 1.5px 0;
+  color: #366092;
+  word-break: break-all;
+}
+
+/* a 标签点击态效果 */
+._hover {
+  text-decoration: underline;
+  opacity: 0.7;
+}
+
+/* 图片默认效果 */
+._img {
+  max-width: 100%;
+  -webkit-touch-callout: none;
+}
+
+/* 内部样式 */
+
+._block {
+  display: block;
+}
+
+._b,
+._strong {
+  font-weight: bold;
+}
+
+._code {
+  font-family: monospace;
+}
+
+._del {
+  text-decoration: line-through;
+}
+
+._em,
+._i {
+  font-style: italic;
+}
+
+._h1 {
+  font-size: 2em;
+}
+
+._h2 {
+  font-size: 1.5em;
+}
+
+._h3 {
+  font-size: 1.17em;
+}
+
+._h5 {
+  font-size: 0.83em;
+}
+
+._h6 {
+  font-size: 0.67em;
+}
+
+._h1,
+._h2,
+._h3,
+._h4,
+._h5,
+._h6 {
+  display: block;
+  font-weight: bold;
+}
+
+._image {
+  height: 1px;
+}
+
+._ins {
+  text-decoration: underline;
+}
+
+._li {
+  display: list-item;
+}
+
+._ol {
+  list-style-type: decimal;
+}
+
+._ol,
+._ul {
+  display: block;
+  padding-left: 40px;
+  margin: 1em 0;
+}
+
+._q::before {
+  content: '"';
+}
+
+._q::after {
+  content: '"';
+}
+
+._sub {
+  font-size: smaller;
+  vertical-align: sub;
+}
+
+._sup {
+  font-size: smaller;
+  vertical-align: super;
+}
+
+._thead,
+._tbody,
+._tfoot {
+  display: table-row-group;
+}
+
+._tr {
+  display: table-row;
+}
+
+._td,
+._th {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+._th {
+  font-weight: bold;
+  text-align: center;
+}
+
+._ul {
+  list-style-type: disc;
+}
+
+._ul ._ul {
+  margin: 0;
+  list-style-type: circle;
+}
+
+._ul ._ul ._ul {
+  list-style-type: square;
+}
+
+._abbr,
+._b,
+._code,
+._del,
+._em,
+._i,
+._ins,
+._label,
+._q,
+._span,
+._strong,
+._sub,
+._sup {
+  display: inline;
+}
+
+/* #ifdef APP-PLUS */
+._video {
+  width: 300px;
+  height: 225px;
+}
+/* #endif */
+</style>
\ No newline at end of file
diff --git a/src/uni_modules/mp-html/components/mp-html/parser.js b/src/uni_modules/mp-html/components/mp-html/parser.js
new file mode 100644
index 00000000..5bddd163
--- /dev/null
+++ b/src/uni_modules/mp-html/components/mp-html/parser.js
@@ -0,0 +1,1395 @@
+/**
+ * @fileoverview html 解析器
+ */
+
+// 配置
+const config = {
+  // 信任的标签（保持标签名不变）
+  trustTags: makeMap('a,abbr,ad,audio,b,blockquote,br,code,col,colgroup,dd,del,dl,dt,div,em,fieldset,h1,h2,h3,h4,h5,h6,hr,i,img,ins,label,legend,li,ol,p,q,ruby,rt,source,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,title,ul,video'),
+
+  // 块级标签（转为 div，其他的非信任标签转为 span）
+  blockTags: makeMap('address,article,aside,body,caption,center,cite,footer,header,html,nav,pre,section'),
+
+  // #ifdef (MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE3
+  // 行内标签
+  inlineTags: makeMap('abbr,b,big,code,del,em,i,ins,label,q,small,span,strong,sub,sup'),
+  // #endif
+
+  // 要移除的标签
+  ignoreTags: makeMap('area,base,canvas,embed,frame,head,iframe,input,link,map,meta,param,rp,script,source,style,textarea,title,track,wbr'),
+
+  // 自闭合的标签
+  voidTags: makeMap('area,base,br,col,circle,ellipse,embed,frame,hr,img,input,line,link,meta,param,path,polygon,rect,source,track,use,wbr'),
+
+  // html 实体
+  entities: {
+    lt: '<',
+    gt: '>',
+    quot: '"',
+    apos: "'",
+    ensp: '\u2002',
+    emsp: '\u2003',
+    nbsp: '\xA0',
+    semi: ';',
+    ndash: '–',
+    mdash: '—',
+    middot: '·',
+    lsquo: '‘',
+    rsquo: '’',
+    ldquo: '“',
+    rdquo: '”',
+    bull: '•',
+    hellip: '…',
+    larr: '←',
+    uarr: '↑',
+    rarr: '→',
+    darr: '↓'
+  },
+
+  // 默认的标签样式
+  tagStyle: {
+    // #ifndef APP-PLUS-NVUE
+    address: 'font-style:italic',
+    big: 'display:inline;font-size:1.2em',
+    caption: 'display:table-caption;text-align:center',
+    center: 'text-align:center',
+    cite: 'font-style:italic',
+    dd: 'margin-left:40px',
+    mark: 'background-color:yellow',
+    pre: 'font-family:monospace;white-space:pre',
+    s: 'text-decoration:line-through',
+    small: 'display:inline;font-size:0.8em',
+    strike: 'text-decoration:line-through',
+    u: 'text-decoration:underline'
+    // #endif
+  },
+
+  // svg 大小写对照表
+  svgDict: {
+    animatetransform: 'animateTransform',
+    lineargradient: 'linearGradient',
+    viewbox: 'viewBox',
+    attributename: 'attributeName',
+    repeatcount: 'repeatCount',
+    repeatdur: 'repeatDur',
+    foreignobject: 'foreignObject'
+  }
+}
+const tagSelector={}
+const {
+  // #ifdef MP-WEIXIN
+  system
+  // #endif
+} = uni.getDeviceInfo()
+const {
+  windowWidth
+} = uni.getWindowInfo()
+const blankChar = makeMap(' ,\r,\n,\t,\f')
+let idIndex = 0
+
+// #ifdef H5 || APP-PLUS
+config.ignoreTags.iframe = undefined
+config.trustTags.iframe = true
+config.ignoreTags.embed = undefined
+config.trustTags.embed = true
+// #endif
+// #ifdef APP-PLUS-NVUE
+config.ignoreTags.source = undefined
+config.ignoreTags.style = undefined
+// #endif
+
+/**
+ * @description 创建 map
+ * @param {String} str 逗号分隔
+ */
+function makeMap (str) {
+  const map = Object.create(null)
+  const list = str.split(',')
+  for (let i = list.length; i--;) {
+    map[list[i]] = true
+  }
+  return map
+}
+
+/**
+ * @description 解码 html 实体
+ * @param {String} str 要解码的字符串
+ * @param {Boolean} amp 要不要解码 &amp;
+ * @returns {String} 解码后的字符串
+ */
+function decodeEntity (str, amp) {
+  let i = str.indexOf('&')
+  while (i !== -1) {
+    const j = str.indexOf(';', i + 3)
+    let code
+    if (j === -1) break
+    if (str[i + 1] === '#') {
+      // &#123; 形式的实体
+      code = parseInt((str[i + 2] === 'x' ? '0' : '') + str.substring(i + 2, j))
+      if (!isNaN(code)) {
+        str = str.substr(0, i) + String.fromCharCode(code) + str.substr(j + 1)
+      }
+    } else {
+      // &nbsp; 形式的实体
+      code = str.substring(i + 1, j)
+      if (config.entities[code] || (code === 'amp' && amp)) {
+        str = str.substr(0, i) + (config.entities[code] || '&') + str.substr(j + 1)
+      }
+    }
+    i = str.indexOf('&', i + 1)
+  }
+  return str
+}
+
+/**
+ * @description 合并多个块级标签，加快长内容渲染
+ * @param {Array} nodes 要合并的标签数组
+ */
+function mergeNodes (nodes) {
+  let i = nodes.length - 1
+  for (let j = i; j >= -1; j--) {
+    if (j === -1 || nodes[j].c || !nodes[j].name || (nodes[j].name !== 'div' && nodes[j].name !== 'p' && nodes[j].name[0] !== 'h') || (nodes[j].attrs.style || '').includes('inline')) {
+      if (i - j >= 5) {
+        nodes.splice(j + 1, i - j, {
+          name: 'div',
+          attrs: {},
+          children: nodes.slice(j + 1, i + 1)
+        })
+      }
+      i = j - 1
+    }
+  }
+}
+
+/**
+ * @description html 解析器
+ * @param {Object} vm 组件实例
+ */
+function Parser (vm) {
+  this.options = vm || {}
+  this.tagStyle = Object.assign({}, config.tagStyle, this.options.tagStyle)
+  this.imgList = vm.imgList || []
+  this.imgList._unloadimgs = 0
+  this.plugins = vm.plugins || []
+  this.attrs = Object.create(null)
+  this.stack = []
+  this.nodes = []
+  this.pre = (this.options.containerStyle || '').includes('white-space') && this.options.containerStyle.includes('pre') ? 2 : 0
+}
+
+/**
+ * @description 执行解析
+ * @param {String} content 要解析的文本
+ */
+Parser.prototype.parse = function (content) {
+  // 插件处理
+  for (let i = this.plugins.length; i--;) {
+    if (this.plugins[i].onUpdate) {
+      content = this.plugins[i].onUpdate(content, config) || content
+    }
+  }
+
+  new Lexer(this).parse(content)
+  // 出栈未闭合的标签
+  while (this.stack.length) {
+    this.popNode()
+  }
+  if (this.nodes.length > 50) {
+    mergeNodes(this.nodes)
+  }
+  return this.nodes
+}
+
+/**
+ * @description 将标签暴露出来（不被 rich-text 包含）
+ */
+Parser.prototype.expose = function () {
+  // #ifndef APP-PLUS-NVUE
+  for (let i = this.stack.length; i--;) {
+    const item = this.stack[i]
+    if (item.c || item.name === 'a' || item.name === 'video' || item.name === 'audio') return
+    item.c = 1
+  }
+  // #endif
+}
+
+/**
+ * @description 处理插件
+ * @param {Object} node 要处理的标签
+ * @returns {Boolean} 是否要移除此标签
+ */
+Parser.prototype.hook = function (node) {
+  for (let i = this.plugins.length; i--;) {
+    if (this.plugins[i].onParse && this.plugins[i].onParse(node, this) === false) {
+      return false
+    }
+  }
+  return true
+}
+
+/**
+ * @description 将链接拼接上主域名
+ * @param {String} url 需要拼接的链接
+ * @returns {String} 拼接后的链接
+ */
+Parser.prototype.getUrl = function (url) {
+  const domain = this.options.domain
+  if (url[0] === '/') {
+    if (url[1] === '/') {
+      // // 开头的补充协议名
+      url = (domain ? domain.split('://')[0] : 'http') + ':' + url
+    } else if (domain) {
+      // 否则补充整个域名
+      url = domain + url
+    } /* #ifdef APP-PLUS */ else {
+      url = plus.io.convertLocalFileSystemURL(url)
+    } /* #endif */
+  } else if (!url.includes('data:') && !url.includes('://')) {
+    if (domain) {
+      url = domain + '/' + url
+    } /* #ifdef APP-PLUS */ else {
+      url = plus.io.convertLocalFileSystemURL(url)
+    } /* #endif */
+  }
+  return url
+}
+
+/**
+ * @description 解析样式表
+ * @param {Object} node 标签
+ * @returns {Object}
+ */
+Parser.prototype.parseStyle = function (node) {
+  const attrs = node.attrs
+  const list = (this.tagStyle[node.name] || '').split(';').concat((attrs.style || '').split(';'))
+  const styleObj = {}
+  let tmp = ''
+
+  if (attrs.id && !this.xml) {
+    // 暴露锚点
+    if (this.options.useAnchor) {
+      this.expose()
+    } else if (node.name !== 'img' && node.name !== 'a' && node.name !== 'video' && node.name !== 'audio') {
+      attrs.id = undefined
+    }
+  }
+
+  // 转换 width 和 height 属性
+  if (attrs.width) {
+    styleObj.width = parseFloat(attrs.width) + (attrs.width.includes('%') ? '%' : 'px')
+    attrs.width = undefined
+  }
+  if (attrs.height) {
+    styleObj.height = parseFloat(attrs.height) + (attrs.height.includes('%') ? '%' : 'px')
+    attrs.height = undefined
+  }
+
+  for (let i = 0, len = list.length; i < len; i++) {
+    const info = list[i].split(':')
+    if (info.length < 2) continue
+    const key = info.shift().trim().toLowerCase()
+    let value = info.join(':').trim()
+    if ((value[0] === '-' && value.lastIndexOf('-') > 0) || value.includes('safe')) {
+      // 兼容性的 css 不压缩
+      tmp += `;${key}:${value}`
+    } else if (!styleObj[key] || value.includes('import') || !styleObj[key].includes('import')) {
+      // 重复的样式进行覆盖
+      if (value.includes('url')) {
+        // 填充链接
+        let j = value.indexOf('(') + 1
+        if (j) {
+          while (value[j] === '"' || value[j] === "'" || blankChar[value[j]]) {
+            j++
+          }
+          value = value.substr(0, j) + this.getUrl(value.substr(j))
+        }
+      } else if (value.includes('rpx')) {
+        // 转换 rpx（rich-text 内部不支持 rpx）
+        value = value.replace(/[0-9.]+\s*rpx/g, $ => parseFloat($) * windowWidth / 750 + 'px')
+      }
+      styleObj[key] = value
+    }
+  }
+
+  node.attrs.style = tmp
+  return styleObj
+}
+
+/**
+ * @description 解析到标签名
+ * @param {String} name 标签名
+ * @private
+ */
+Parser.prototype.onTagName = function (name) {
+  this.tagName = this.xml ? name : name.toLowerCase()
+  if (this.tagName === 'svg') {
+    this.xml = (this.xml || 0) + 1 // svg 标签内大小写敏感
+    config.ignoreTags.style = undefined // svg 标签内 style 可用
+  }
+}
+
+/**
+ * @description 解析到属性名
+ * @param {String} name 属性名
+ * @private
+ */
+Parser.prototype.onAttrName = function (name) {
+  name = this.xml ? name : name.toLowerCase()
+  // #ifdef (VUE3 && (H5 || APP-PLUS)) || APP-PLUS-NVUE
+  if (name.includes('?') || name.includes(';')) {
+    this.attrName = undefined
+    return
+  }
+  // #endif
+  if (name.substr(0, 5) === 'data-') {
+    if (name === 'data-src' && !this.attrs.src) {
+      // data-src 自动转为 src
+      this.attrName = 'src'
+    } else if (this.tagName === 'img' || this.tagName === 'a') {
+      // a 和 img 标签保留 data- 的属性，可以在 imgtap 和 linktap 事件中使用
+      this.attrName = name
+    } else {
+      // 剩余的移除以减小大小
+      this.attrName = undefined
+    }
+  } else {
+    this.attrName = name
+    this.attrs[name] = 'T' // boolean 型属性缺省设置
+  }
+}
+
+/**
+ * @description 解析到属性值
+ * @param {String} val 属性值
+ * @private
+ */
+Parser.prototype.onAttrVal = function (val) {
+  const name = this.attrName || ''
+  if (name === 'style' || name === 'href') {
+    // 部分属性进行实体解码
+    this.attrs[name] = decodeEntity(val, true)
+  } else if (name.includes('src')) {
+    // 拼接主域名
+    this.attrs[name] = this.getUrl(decodeEntity(val, true))
+  } else if (name) {
+    this.attrs[name] = val
+  }
+}
+
+/**
+ * @description 解析到标签开始
+ * @param {Boolean} selfClose 是否有自闭合标识 />
+ * @private
+ */
+Parser.prototype.onOpenTag = function (selfClose) {
+  // 拼装 node
+  const node = Object.create(null)
+  node.name = this.tagName
+  node.attrs = this.attrs
+  // 避免因为自动 diff 使得 type 被设置为 null 导致部分内容不显示
+  if (this.options.nodes.length) {
+    node.type = 'node'
+  }
+  this.attrs = Object.create(null)
+
+  const attrs = node.attrs
+  const parent = this.stack[this.stack.length - 1]
+  const siblings = parent ? parent.children : this.nodes
+  const close = this.xml ? selfClose : config.voidTags[node.name]
+
+  // 替换标签名选择器
+  if (tagSelector[node.name]) {
+    attrs.class = tagSelector[node.name] + (attrs.class ? ' ' + attrs.class : '')
+  }
+
+  // 转换 embed 标签
+  if (node.name === 'embed') {
+    // #ifndef H5 || APP-PLUS
+    const src = attrs.src || ''
+    // 按照后缀名和 type 将 embed 转为 video 或 audio
+    if (src.includes('.mp4') || src.includes('.3gp') || src.includes('.m3u8') || (attrs.type || '').includes('video')) {
+      node.name = 'video'
+    } else if (src.includes('.mp3') || src.includes('.wav') || src.includes('.aac') || src.includes('.m4a') || (attrs.type || '').includes('audio')) {
+      node.name = 'audio'
+    }
+    if (attrs.autostart) {
+      attrs.autoplay = 'T'
+    }
+    attrs.controls = 'T'
+    // #endif
+    // #ifdef H5 || APP-PLUS
+    this.expose()
+    // #endif
+  }
+
+  // #ifndef APP-PLUS-NVUE
+  // 处理音视频
+  if (node.name === 'video' || node.name === 'audio') {
+    // 设置 id 以便获取 context
+    if (node.name === 'video' && !attrs.id) {
+      attrs.id = 'v' + idIndex++
+    }
+    // 没有设置 controls 也没有设置 autoplay 的自动设置 controls
+    if (!attrs.controls && !attrs.autoplay) {
+      attrs.controls = 'T'
+    }
+    // 用数组存储所有可用的 source
+    node.src = []
+    if (attrs.src) {
+      node.src.push(attrs.src)
+      attrs.src = undefined
+    }
+    this.expose()
+  }
+  // #endif
+
+  // 处理自闭合标签
+  if (close) {
+    if (!this.hook(node) || config.ignoreTags[node.name]) {
+      // 通过 base 标签设置主域名
+      if (node.name === 'base' && !this.options.domain) {
+        this.options.domain = attrs.href
+      } /* #ifndef APP-PLUS-NVUE */ else if (node.name === 'source' && parent && (parent.name === 'video' || parent.name === 'audio') && attrs.src) {
+        // 设置 source 标签（仅父节点为 video 或 audio 时有效）
+        parent.src.push(attrs.src)
+      } /* #endif */
+      return
+    }
+
+    // 解析 style
+    const styleObj = this.parseStyle(node)
+
+    // 处理图片
+    if (node.name === 'img') {
+      if (attrs.src) {
+        // 标记 webp
+        if (attrs.src.includes('webp')) {
+          node.webp = 'T'
+        }
+        // data url 图片如果没有设置 original-src 默认为不可预览的小图片
+        if (attrs.src.includes('data:') && this.options.previewImg !== 'all' && !attrs['original-src']) {
+          attrs.ignore = 'T'
+        }
+        if (!attrs.ignore || node.webp || attrs.src.includes('cloud://')) {
+          for (let i = this.stack.length; i--;) {
+            const item = this.stack[i]
+            if (item.name === 'a') {
+              node.a = item.attrs
+            }
+            if (item.name === 'table' && !node.webp && !attrs.src.includes('cloud://')) {
+              if (!styleObj.display || styleObj.display.includes('inline')) {
+                node.t = 'inline-block'
+              } else {
+                node.t = styleObj.display
+              }
+              styleObj.display = undefined
+            }
+            // #ifndef H5 || APP-PLUS
+            const style = item.attrs.style || ''
+            if (style.includes('flex:') && !style.includes('flex:0') && !style.includes('flex: 0') && (!styleObj.width || parseInt(styleObj.width) > 100)) {
+              styleObj.width = '100% !important'
+              styleObj.height = ''
+              for (let j = i + 1; j < this.stack.length; j++) {
+                this.stack[j].attrs.style = (this.stack[j].attrs.style || '').replace('inline-', '')
+              }
+            } else if (style.includes('flex') && styleObj.width === '100%') {
+              for (let j = i + 1; j < this.stack.length; j++) {
+                const style = this.stack[j].attrs.style || ''
+                if (!style.includes(';width') && !style.includes(' width') && style.indexOf('width') !== 0) {
+                  styleObj.width = ''
+                  break
+                }
+              }
+            } else if (style.includes('inline-block')) {
+              if (styleObj.width && styleObj.width[styleObj.width.length - 1] === '%') {
+                item.attrs.style += ';max-width:' + styleObj.width
+                styleObj.width = ''
+              } else {
+                item.attrs.style += ';max-width:100%'
+              }
+            }
+            // #endif
+            item.c = 1
+          }
+          attrs.i = this.imgList.length.toString()
+          let src = attrs['original-src'] || attrs.src
+          // #ifndef H5 || MP-ALIPAY || APP-PLUS || MP-360
+          if (this.imgList.includes(src)) {
+            // 如果有重复的链接则对域名进行随机大小写变换避免预览时错位
+            let i = src.indexOf('://')
+            if (i !== -1) {
+              i += 3
+              let newSrc = src.substr(0, i)
+              for (; i < src.length; i++) {
+                if (src[i] === '/') break
+                newSrc += Math.random() > 0.5 ? src[i].toUpperCase() : src[i]
+              }
+              newSrc += src.substr(i)
+              src = newSrc
+            }
+          }
+          // #endif
+          this.imgList.push(src)
+          if (!node.t) {
+            this.imgList._unloadimgs += 1
+          }
+          // #ifdef H5 || APP-PLUS
+          if (this.options.lazyLoad) {
+            attrs['data-src'] = attrs.src
+            attrs.src = undefined
+          }
+          // #endif
+        }
+      }
+      if (styleObj.display === 'inline') {
+        styleObj.display = ''
+      }
+      // #ifndef APP-PLUS-NVUE
+      if (attrs.ignore) {
+        styleObj['max-width'] = styleObj['max-width'] || '100%'
+        attrs.style += ';-webkit-touch-callout:none'
+      }
+      // #endif
+      // 设置的宽度超出屏幕，为避免变形，高度转为自动
+      if (parseInt(styleObj.width) > windowWidth) {
+        styleObj.height = undefined
+      }
+      // 记录是否设置了宽高
+      if (!isNaN(parseInt(styleObj.width))) {
+        node.w = 'T'
+      }
+      if (!isNaN(parseInt(styleObj.height)) && (!styleObj.height.includes('%') || (parent && (parent.attrs.style || '').includes('height')))) {
+        node.h = 'T'
+      }
+      if (node.w && node.h && styleObj['object-fit']) {
+        if (styleObj['object-fit'] === 'contain') {
+          node.m = 'aspectFit'
+        } else if (styleObj['object-fit'] === 'cover') {
+          node.m = 'aspectFill'
+        }
+      }
+    } else if (node.name === 'svg') {
+      siblings.push(node)
+      this.stack.push(node)
+      this.popNode()
+      return
+    }
+    for (const key in styleObj) {
+      if (styleObj[key]) {
+        attrs.style += `;${key}:${styleObj[key].replace(' !important', '')}`
+      }
+    }
+    attrs.style = attrs.style.substr(1) || undefined
+    // #ifdef (MP-WEIXIN || MP-QQ) && VUE3
+    if (!attrs.style) {
+      delete attrs.style
+    }
+    // #endif
+  } else {
+    if ((node.name === 'pre' || ((attrs.style || '').includes('white-space') && attrs.style.includes('pre'))) && this.pre !== 2) {
+      this.pre = node.pre = 1
+    }
+    node.children = []
+    this.stack.push(node)
+  }
+
+  // 加入节点树
+  siblings.push(node)
+}
+
+/**
+ * @description 解析到标签结束
+ * @param {String} name 标签名
+ * @private
+ */
+Parser.prototype.onCloseTag = function (name) {
+  // 依次出栈到匹配为止
+  name = this.xml ? name : name.toLowerCase()
+  let i
+  for (i = this.stack.length; i--;) {
+    if (this.stack[i].name === name) break
+  }
+  if (i !== -1) {
+    while (this.stack.length > i) {
+      this.popNode()
+    }
+  } else if (name === 'p' || name === 'br') {
+    const siblings = this.stack.length ? this.stack[this.stack.length - 1].children : this.nodes
+    siblings.push({
+      name,
+      attrs: {
+        class: tagSelector[name] || '',
+        style: this.tagStyle[name] || ''
+      }
+    })
+  }
+}
+
+/**
+ * @description 处理标签出栈
+ * @private
+ */
+Parser.prototype.popNode = function () {
+  const node = this.stack.pop()
+  let attrs = node.attrs
+  const children = node.children
+  const parent = this.stack[this.stack.length - 1]
+  const siblings = parent ? parent.children : this.nodes
+
+  if (!this.hook(node) || config.ignoreTags[node.name]) {
+    // 获取标题
+    if (node.name === 'title' && children.length && children[0].type === 'text' && this.options.setTitle) {
+      uni.setNavigationBarTitle({
+        title: children[0].text
+      })
+    }
+    siblings.pop()
+    return
+  }
+
+  if (node.pre && this.pre !== 2) {
+    // 是否合并空白符标识
+    this.pre = node.pre = undefined
+    for (let i = this.stack.length; i--;) {
+      if (this.stack[i].pre) {
+        this.pre = 1
+      }
+    }
+  }
+
+  const styleObj = {}
+
+  // 转换 svg
+  if (node.name === 'svg') {
+    if (this.xml > 1) {
+      // 多层 svg 嵌套
+      this.xml--
+      return
+    }
+    // #ifdef APP-PLUS-NVUE
+    (function traversal (node) {
+      if (node.name) {
+        // 调整 svg 的大小写
+        node.name = config.svgDict[node.name] || node.name
+        for (const item in node.attrs) {
+          if (config.svgDict[item]) {
+            node.attrs[config.svgDict[item]] = node.attrs[item]
+            node.attrs[item] = undefined
+          }
+        }
+        for (let i = 0; i < (node.children || []).length; i++) {
+          traversal(node.children[i])
+        }
+      }
+    })(node)
+    // #endif
+    // #ifndef APP-PLUS-NVUE
+    let src = ''
+    const style = attrs.style
+    attrs.style = ''
+    attrs.xmlns = 'http://www.w3.org/2000/svg';
+    (function traversal (node) {
+      if (node.type === 'text') {
+        src += node.text
+        return
+      }
+      const name = config.svgDict[node.name] || node.name
+      if (name === 'foreignObject') {
+        for (const child of (node.children || [])) {
+          if (child.attrs && !child.attrs.xmlns) {
+            child.attrs.xmlns = 'http://www.w3.org/1999/xhtml'
+            break
+          }
+        }
+      }
+      src += '<' + name
+      for (const item in node.attrs) {
+        const val = node.attrs[item]
+        if (val) {
+          src += ` ${config.svgDict[item] || item}="${val.replace(/"/g, '')}"`
+        }
+      }
+      if (!node.children) {
+        src += '/>'
+      } else {
+        src += '>'
+        for (let i = 0; i < node.children.length; i++) {
+          traversal(node.children[i])
+        }
+        src += '</' + name + '>'
+      }
+    })(node)
+    node.name = 'img'
+    node.attrs = {
+      src: 'data:image/svg+xml;utf8,' + src.replace(/#/g, '%23'),
+      style,
+      ignore: 'T'
+    }
+    node.children = undefined
+    // #endif
+    this.xml = false
+    config.ignoreTags.style = true
+    return
+  }
+
+  // #ifndef APP-PLUS-NVUE
+  // 转换 align 属性
+  if (attrs.align) {
+    if (node.name === 'table') {
+      if (attrs.align === 'center') {
+        styleObj['margin-inline-start'] = styleObj['margin-inline-end'] = 'auto'
+      } else {
+        styleObj.float = attrs.align
+      }
+    } else {
+      styleObj['text-align'] = attrs.align
+    }
+    attrs.align = undefined
+  }
+
+  // 转换 dir 属性
+  if (attrs.dir) {
+    styleObj.direction = attrs.dir
+    attrs.dir = undefined
+  }
+
+  // 转换 font 标签的属性
+  if (node.name === 'font') {
+    if (attrs.color) {
+      styleObj.color = attrs.color
+      attrs.color = undefined
+    }
+    if (attrs.face) {
+      styleObj['font-family'] = attrs.face
+      attrs.face = undefined
+    }
+    if (attrs.size) {
+      let size = parseInt(attrs.size)
+      if (!isNaN(size)) {
+        if (size < 1) {
+          size = 1
+        } else if (size > 7) {
+          size = 7
+        }
+        styleObj['font-size'] = ['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'xxx-large'][size - 1]
+      }
+      attrs.size = undefined
+    }
+  }
+  // #endif
+
+  // 一些编辑器的自带 class
+  if ((attrs.class || '').includes('align-center')) {
+    styleObj['text-align'] = 'center'
+  }
+
+  Object.assign(styleObj, this.parseStyle(node))
+
+  if (node.name !== 'table' && parseInt(styleObj.width) > windowWidth) {
+    styleObj['max-width'] = '100%'
+    styleObj['box-sizing'] = 'border-box'
+  }
+
+  // #ifndef APP-PLUS-NVUE
+  if (config.blockTags[node.name]) {
+    node.name = 'div'
+  } else if (!config.trustTags[node.name] && !this.xml) {
+    // 未知标签转为 span，避免无法显示
+    node.name = 'span'
+  }
+
+  if (node.name === 'a' || node.name === 'ad'
+    // #ifdef H5 || APP-PLUS
+    || node.name === 'iframe' // eslint-disable-line
+    // #endif
+  ) {
+    this.expose()
+  } else if (node.name === 'video') {
+    if ((styleObj.height || '').includes('auto')) {
+      styleObj.height = undefined
+    }
+    /* #ifdef APP-PLUS */
+    let str = '<video style="width:100%;height:100%"'
+    for (const item in attrs) {
+      if (attrs[item]) {
+        str += ' ' + item + '="' + attrs[item] + '"'
+      }
+    }
+    if (this.options.pauseVideo) {
+      str += ' onplay="this.dispatchEvent(new CustomEvent(\'vplay\',{bubbles:!0}));for(var e=document.getElementsByTagName(\'video\'),t=0;t<e.length;t++)e[t]!=this&&e[t].pause()"'
+    }
+    str += '>'
+    for (let i = 0; i < node.src.length; i++) {
+      str += '<source src="' + node.src[i] + '">'
+    }
+    str += '</video>'
+    node.html = str
+    /* #endif */
+  } else if ((node.name === 'ul' || node.name === 'ol') && node.c) {
+    // 列表处理
+    const types = {
+      a: 'lower-alpha',
+      A: 'upper-alpha',
+      i: 'lower-roman',
+      I: 'upper-roman'
+    }
+    if (types[attrs.type]) {
+      attrs.style += ';list-style-type:' + types[attrs.type]
+      attrs.type = undefined
+    }
+    for (let i = children.length; i--;) {
+      if (children[i].name === 'li') {
+        children[i].c = 1
+      }
+    }
+  } else if (node.name === 'table') {
+    // 表格处理
+    // cellpadding、cellspacing、border 这几个常用表格属性需要通过转换实现
+    let padding = parseFloat(attrs.cellpadding)
+    let spacing = parseFloat(attrs.cellspacing)
+    const border = parseFloat(attrs.border)
+    const bordercolor = styleObj['border-color']
+    const borderstyle = styleObj['border-style']
+    if (node.c) {
+      // padding 和 spacing 默认 2
+      if (isNaN(padding)) {
+        padding = 2
+      }
+      if (isNaN(spacing)) {
+        spacing = 2
+      }
+    }
+    if (border) {
+      attrs.style += `;border:${border}px ${borderstyle || 'solid'} ${bordercolor || 'gray'}`
+    }
+    if (node.flag && node.c) {
+      // 有 colspan 或 rowspan 且含有链接的表格通过 grid 布局实现
+      styleObj.display = 'grid'
+      if (styleObj['border-collapse'] === 'collapse') {
+        styleObj['border-collapse'] = undefined
+        spacing = 0
+      }
+      if (spacing) {
+        styleObj['grid-gap'] = spacing + 'px'
+        styleObj.padding = spacing + 'px'
+      } else if (border) {
+        // 无间隔的情况下避免边框重叠
+        attrs.style += ';border-left:0;border-top:0'
+      }
+
+      const width = [] // 表格的列宽
+      const trList = [] // tr 列表
+      const cells = [] // 保存新的单元格
+      const map = {}; // 被合并单元格占用的格子
+
+      (function traversal (nodes) {
+        for (let i = 0; i < nodes.length; i++) {
+          if (nodes[i].name === 'tr') {
+            trList.push(nodes[i])
+          } else if (nodes[i].name === 'colgroup') {
+            let colI = 1
+            for (const col of (nodes[i].children || [])) {
+              if (col.name === 'col') {
+                const style = col.attrs.style || ''
+                const start = style.indexOf('width') ? style.indexOf(';width') : 0
+                // 提取出宽度
+                if (start !== -1) {
+                  let end = style.indexOf(';', start + 6)
+                  if (end === -1) {
+                    end = style.length
+                  }
+                  width[colI] = style.substring(start ? start + 7 : 6, end)
+                }
+                colI += 1
+              }
+            }
+          } else {
+            traversal(nodes[i].children || [])
+          }
+        }
+      })(children)
+
+      for (let row = 1; row <= trList.length; row++) {
+        let col = 1
+        for (let j = 0; j < trList[row - 1].children.length; j++) {
+          const td = trList[row - 1].children[j]
+          if (td.name === 'td' || td.name === 'th') {
+            // 这个格子被上面的单元格占用，则列号++
+            while (map[row + '.' + col]) {
+              col++
+            }
+            let style = td.attrs.style || ''
+            let start = style.indexOf('width') ? style.indexOf(';width') : 0
+            // 提取出 td 的宽度
+            if (start !== -1) {
+              let end = style.indexOf(';', start + 6)
+              if (end === -1) {
+                end = style.length
+              }
+              if (!td.attrs.colspan) {
+                width[col] = style.substring(start ? start + 7 : 6, end)
+              }
+              style = style.substr(0, start) + style.substr(end)
+            }
+            // 设置竖直对齐
+            style += ';display:flex'
+            start = style.indexOf('vertical-align')
+            if (start !== -1) {
+              const val = style.substr(start + 15, 10)
+              if (val.includes('middle')) {
+                style += ';align-items:center'
+              } else if (val.includes('bottom')) {
+                style += ';align-items:flex-end'
+              }
+            } else {
+              style += ';align-items:center'
+            }
+            // 设置水平对齐
+            start = style.indexOf('text-align')
+            if (start !== -1) {
+              const val = style.substr(start + 11, 10)
+              if (val.includes('center')) {
+                style += ';justify-content: center'
+              } else if (val.includes('right')) {
+                style += ';justify-content: right'
+              }
+            }
+            style = (border ? `;border:${border}px ${borderstyle || 'solid'} ${bordercolor || 'gray'}` + (spacing ? '' : ';border-right:0;border-bottom:0') : '') + (padding ? `;padding:${padding}px` : '') + ';' + style
+            // 处理列合并
+            if (td.attrs.colspan) {
+              style += `;grid-column-start:${col};grid-column-end:${col + parseInt(td.attrs.colspan)}`
+              if (!td.attrs.rowspan) {
+                style += `;grid-row-start:${row};grid-row-end:${row + 1}`
+              }
+              col += parseInt(td.attrs.colspan) - 1
+            }
+            // 处理行合并
+            if (td.attrs.rowspan) {
+              style += `;grid-row-start:${row};grid-row-end:${row + parseInt(td.attrs.rowspan)}`
+              if (!td.attrs.colspan) {
+                style += `;grid-column-start:${col};grid-column-end:${col + 1}`
+              }
+              // 记录下方单元格被占用
+              for (let rowspan = 1; rowspan < td.attrs.rowspan; rowspan++) {
+                for (let colspan = 0; colspan < (td.attrs.colspan || 1); colspan++) {
+                  map[(row + rowspan) + '.' + (col - colspan)] = 1
+                }
+              }
+            }
+            if (style) {
+              td.attrs.style = style
+            }
+            cells.push(td)
+            col++
+          }
+        }
+        if (row === 1) {
+          let temp = ''
+          for (let i = 1; i < col; i++) {
+            temp += (width[i] ? width[i] : 'auto') + ' '
+          }
+          styleObj['grid-template-columns'] = temp
+        }
+      }
+      node.children = cells
+    } else {
+      // 没有使用合并单元格的表格通过 table 布局实现
+      if (node.c) {
+        styleObj.display = 'table'
+      }
+      if (!isNaN(spacing)) {
+        styleObj['border-spacing'] = spacing + 'px'
+      }
+      if (border || padding) {
+        // 遍历
+        (function traversal (nodes) {
+          for (let i = 0; i < nodes.length; i++) {
+            const td = nodes[i]
+            if (td.name === 'th' || td.name === 'td') {
+              if (border) {
+                td.attrs.style = `border:${border}px ${borderstyle || 'solid'} ${bordercolor || 'gray'};${td.attrs.style || ''}`
+              }
+              if (padding) {
+                td.attrs.style = `padding:${padding}px;${td.attrs.style || ''}`
+              }
+            } else if (td.children) {
+              traversal(td.children)
+            }
+          }
+        })(children)
+      }
+    }
+    // 给表格添加一个单独的横向滚动层
+    if (this.options.scrollTable && !(attrs.style || '').includes('inline')) {
+      const table = Object.assign({}, node)
+      node.name = 'div'
+      node.attrs = {
+        style: 'overflow:auto'
+      }
+      node.children = [table]
+      attrs = table.attrs
+    }
+  } else if ((node.name === 'tbody' || node.name === 'tr') && node.flag && node.c) {
+    node.flag = undefined;
+    (function traversal (nodes) {
+      for (let i = 0; i < nodes.length; i++) {
+        if (nodes[i].name === 'td') {
+          // 颜色样式设置给单元格避免丢失
+          for (const style of ['color', 'background', 'background-color']) {
+            if (styleObj[style]) {
+              nodes[i].attrs.style = style + ':' + styleObj[style] + ';' + (nodes[i].attrs.style || '')
+            }
+          }
+        } else {
+          traversal(nodes[i].children || [])
+        }
+      }
+    })(children)
+  } else if ((node.name === 'td' || node.name === 'th') && (attrs.colspan || attrs.rowspan)) {
+    for (let i = this.stack.length; i--;) {
+      if (this.stack[i].name === 'table' || this.stack[i].name === 'tbody' || this.stack[i].name === 'tr') {
+        this.stack[i].flag = 1 // 指示含有合并单元格
+      }
+    }
+  } else if (node.name === 'ruby') {
+    // 转换 ruby
+    node.name = 'span'
+    for (let i = 0; i < children.length - 1; i++) {
+      if (children[i].type === 'text' && children[i + 1].name === 'rt') {
+        children[i] = {
+          name: 'div',
+          attrs: {
+            style: 'display:inline-block;text-align:center'
+          },
+          children: [{
+            name: 'div',
+            attrs: {
+              style: 'font-size:50%;' + (children[i + 1].attrs.style || '')
+            },
+            children: children[i + 1].children
+          }, children[i]]
+        }
+        children.splice(i + 1, 1)
+      }
+    }
+  } else if (node.c) {
+    (function traversal (node) {
+      node.c = 2
+      for (let i = node.children.length; i--;) {
+        const child = node.children[i]
+        // #ifdef (MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE3
+        if (child.name && (config.inlineTags[child.name] || ((child.attrs.style || '').includes('inline') && child.children)) && !child.c) {
+          traversal(child)
+        }
+        // #endif
+        if (!child.c || child.name === 'table') {
+          node.c = 1
+        }
+      }
+    })(node)
+  }
+
+  if ((styleObj.display || '').includes('flex') && !node.c) {
+    for (let i = children.length; i--;) {
+      const item = children[i]
+      if (item.f) {
+        item.attrs.style = (item.attrs.style || '') + item.f
+        item.f = undefined
+      }
+    }
+  }
+  // flex 布局时部分样式需要提取到 rich-text 外层
+  const flex = parent && ((parent.attrs.style || '').includes('flex') || (parent.attrs.style || '').includes('grid'))
+    // #ifdef MP-WEIXIN
+    // 检查基础库版本 virtualHost 是否可用
+    && !(node.c && wx.getNFCAdapter) // eslint-disable-line
+    // #endif
+    // #ifndef MP-WEIXIN || MP-QQ || MP-BAIDU || MP-TOUTIAO
+    && !node.c // eslint-disable-line
+  // #endif
+  if (flex) {
+    node.f = ';max-width:100%'
+  }
+
+  if (children.length >= 50 && node.c && !(styleObj.display || '').includes('flex')) {
+    mergeNodes(children)
+  }
+  // #endif
+
+  for (const key in styleObj) {
+    if (styleObj[key]) {
+      const val = `;${key}:${styleObj[key].replace(' !important', '')}`
+      /* #ifndef APP-PLUS-NVUE */
+      if (flex && ((key.includes('flex') && key !== 'flex-direction') || key === 'align-self' || key.includes('grid') || styleObj[key][0] === '-' || (key.includes('width') && val.includes('%')))) {
+        node.f += val
+        if (key === 'width') {
+          attrs.style += ';width:100%'
+        }
+      } else /* #endif */ {
+        attrs.style += val
+      }
+    }
+  }
+  attrs.style = attrs.style.substr(1) || undefined
+  // #ifdef (MP-WEIXIN || MP-QQ) && VUE3
+  for (const key in attrs) {
+    if (!attrs[key]) {
+      delete attrs[key]
+    }
+  }
+  // #endif
+}
+
+/**
+ * @description 解析到文本
+ * @param {String} text 文本内容
+ */
+Parser.prototype.onText = function (text) {
+  if (!this.pre) {
+    // 合并空白符
+    let trim = ''
+    let flag
+    for (let i = 0, len = text.length; i < len; i++) {
+      if (!blankChar[text[i]]) {
+        trim += text[i]
+      } else {
+        if (trim[trim.length - 1] !== ' ') {
+          trim += ' '
+        }
+        if (text[i] === '\n' && !flag) {
+          flag = true
+        }
+      }
+    }
+    // 去除含有换行符的空串
+    if (trim === ' ') {
+      if (flag) return
+      // #ifdef VUE3
+      else {
+        const parent = this.stack[this.stack.length - 1]
+        if (parent && parent.name[0] === 't') return
+      }
+      // #endif
+    }
+    text = trim
+  }
+  const node = Object.create(null)
+  node.type = 'text'
+  // #ifdef (MP-BAIDU || MP-ALIPAY || MP-TOUTIAO) && VUE3
+  node.attrs = {}
+  // #endif
+  node.text = decodeEntity(text)
+  if (this.hook(node)) {
+    // #ifdef MP-WEIXIN
+    if (this.options.selectable === 'force' && system.includes('iOS') && !uni.canIUse('rich-text.user-select')) {
+      this.expose()
+    }
+    // #endif
+    const siblings = this.stack.length ? this.stack[this.stack.length - 1].children : this.nodes
+    siblings.push(node)
+  }
+}
+
+/**
+ * @description html 词法分析器
+ * @param {Object} handler 高层处理器
+ */
+function Lexer (handler) {
+  this.handler = handler
+}
+
+/**
+ * @description 执行解析
+ * @param {String} content 要解析的文本
+ */
+Lexer.prototype.parse = function (content) {
+  this.content = content || ''
+  this.i = 0 // 标记解析位置
+  this.start = 0 // 标记一个单词的开始位置
+  this.state = this.text // 当前状态
+  for (let len = this.content.length; this.i !== -1 && this.i < len;) {
+    this.state()
+  }
+}
+
+/**
+ * @description 检查标签是否闭合
+ * @param {String} method 如果闭合要进行的操作
+ * @returns {Boolean} 是否闭合
+ * @private
+ */
+Lexer.prototype.checkClose = function (method) {
+  const selfClose = this.content[this.i] === '/'
+  if (this.content[this.i] === '>' || (selfClose && this.content[this.i + 1] === '>')) {
+    if (method) {
+      this.handler[method](this.content.substring(this.start, this.i))
+    }
+    this.i += selfClose ? 2 : 1
+    this.start = this.i
+    this.handler.onOpenTag(selfClose)
+    if (this.handler.tagName === 'script') {
+      this.i = this.content.indexOf('</', this.i)
+      if (this.i !== -1) {
+        this.i += 2
+        this.start = this.i
+      }
+      this.state = this.endTag
+    } else {
+      this.state = this.text
+    }
+    return true
+  }
+  return false
+}
+
+/**
+ * @description 文本状态
+ * @private
+ */
+Lexer.prototype.text = function () {
+  this.i = this.content.indexOf('<', this.i) // 查找最近的标签
+  if (this.i === -1) {
+    // 没有标签了
+    if (this.start < this.content.length) {
+      this.handler.onText(this.content.substring(this.start, this.content.length))
+    }
+    return
+  }
+  const c = this.content[this.i + 1]
+  if ((c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z')) {
+    // 标签开头
+    if (this.start !== this.i) {
+      this.handler.onText(this.content.substring(this.start, this.i))
+    }
+    this.start = ++this.i
+    this.state = this.tagName
+  } else if (c === '/' || c === '!' || c === '?') {
+    if (this.start !== this.i) {
+      this.handler.onText(this.content.substring(this.start, this.i))
+    }
+    const next = this.content[this.i + 2]
+    if (c === '/' && ((next >= 'a' && next <= 'z') || (next >= 'A' && next <= 'Z'))) {
+      // 标签结尾
+      this.i += 2
+      this.start = this.i
+      this.state = this.endTag
+      return
+    }
+    // 处理注释
+    let end = '-->'
+    if (c !== '!' || this.content[this.i + 2] !== '-' || this.content[this.i + 3] !== '-') {
+      end = '>'
+    }
+    this.i = this.content.indexOf(end, this.i)
+    if (this.i !== -1) {
+      this.i += end.length
+      this.start = this.i
+    }
+  } else {
+    this.i++
+  }
+}
+
+/**
+ * @description 标签名状态
+ * @private
+ */
+Lexer.prototype.tagName = function () {
+  if (blankChar[this.content[this.i]]) {
+    // 解析到标签名
+    this.handler.onTagName(this.content.substring(this.start, this.i))
+    while (blankChar[this.content[++this.i]]);
+    if (this.i < this.content.length && !this.checkClose()) {
+      this.start = this.i
+      this.state = this.attrName
+    }
+  } else if (!this.checkClose('onTagName')) {
+    this.i++
+  }
+}
+
+/**
+ * @description 属性名状态
+ * @private
+ */
+Lexer.prototype.attrName = function () {
+  let c = this.content[this.i]
+  if (blankChar[c] || c === '=') {
+    // 解析到属性名
+    this.handler.onAttrName(this.content.substring(this.start, this.i))
+    let needVal = c === '='
+    const len = this.content.length
+    while (++this.i < len) {
+      c = this.content[this.i]
+      if (!blankChar[c]) {
+        if (this.checkClose()) return
+        if (needVal) {
+          // 等号后遇到第一个非空字符
+          this.start = this.i
+          this.state = this.attrVal
+          return
+        }
+        if (this.content[this.i] === '=') {
+          needVal = true
+        } else {
+          this.start = this.i
+          this.state = this.attrName
+          return
+        }
+      }
+    }
+  } else if (!this.checkClose('onAttrName')) {
+    this.i++
+  }
+}
+
+/**
+ * @description 属性值状态
+ * @private
+ */
+Lexer.prototype.attrVal = function () {
+  const c = this.content[this.i]
+  const len = this.content.length
+  if (c === '"' || c === "'") {
+    // 有冒号的属性
+    this.start = ++this.i
+    this.i = this.content.indexOf(c, this.i)
+    if (this.i === -1) return
+    this.handler.onAttrVal(this.content.substring(this.start, this.i))
+  } else {
+    // 没有冒号的属性
+    for (; this.i < len; this.i++) {
+      if (blankChar[this.content[this.i]]) {
+        this.handler.onAttrVal(this.content.substring(this.start, this.i))
+        break
+      } else if (this.checkClose('onAttrVal')) return
+    }
+  }
+  while (blankChar[this.content[++this.i]]);
+  if (this.i < len && !this.checkClose()) {
+    this.start = this.i
+    this.state = this.attrName
+  }
+}
+
+/**
+ * @description 结束标签状态
+ * @returns {String} 结束的标签名
+ * @private
+ */
+Lexer.prototype.endTag = function () {
+  const c = this.content[this.i]
+  if (blankChar[c] || c === '>' || c === '/') {
+    this.handler.onCloseTag(this.content.substring(this.start, this.i))
+    if (c !== '>') {
+      this.i = this.content.indexOf('>', this.i)
+      if (this.i === -1) return
+    }
+    this.start = ++this.i
+    this.state = this.text
+  } else {
+    this.i++
+  }
+}
+
+export default Parser
diff --git a/src/uni_modules/mp-html/package.json b/src/uni_modules/mp-html/package.json
new file mode 100644
index 00000000..84c07e33
--- /dev/null
+++ b/src/uni_modules/mp-html/package.json
@@ -0,0 +1,76 @@
+{
+    "id": "mp-html",
+    "displayName": "mp-html 富文本组件【全端支持，支持编辑、latex等扩展】",
+    "version": "v2.5.0",
+    "description": "一个强大的富文本组件，高效轻量，功能丰富",
+    "keywords": [
+        "富文本",
+        "编辑器",
+        "html",
+        "rich-text",
+        "editor"
+    ],
+    "repository": "https://github.com/jin-yufeng/mp-html",
+    "dcloudext": {
+        "sale": {
+            "regular": {
+                "price": "0.00"
+            },
+            "sourcecode": {
+                "price": "0.00"
+            }
+        },
+        "contact": {
+            "qq": ""
+        },
+        "declaration": {
+            "ads": "无",
+            "data": "无",
+            "permissions": "无"
+        },
+        "npmurl": "https://www.npmjs.com/package/mp-html",
+        "type": "component-vue"
+    },
+    "uni_modules": {
+        "platforms": {
+            "cloud": {
+                "tcb": "y",
+                "aliyun": "y"
+            },
+            "client": {
+                "App": {
+                    "app-vue": "y",
+                    "app-nvue": "y"
+                },
+                "H5-mobile": {
+                    "Safari": "y",
+                    "Android Browser": "y",
+                    "微信浏览器(Android)": "y",
+                    "QQ浏览器(Android)": "y"
+                },
+                "H5-pc": {
+                    "Chrome": "y",
+                    "IE": "u",
+                    "Edge": "y",
+                    "Firefox": "y",
+                    "Safari": "y"
+                },
+                "小程序": {
+                    "微信": "y",
+                    "阿里": "y",
+                    "百度": "y",
+                    "字节跳动": "y",
+                    "QQ": "y"
+                },
+                "快应用": {
+                    "华为": "y",
+                    "联盟": "y"
+                },
+                "Vue": {
+                    "vue2": "y",
+                    "vue3": "y"
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/uni_modules/mp-html/static/app-plus/mp-html/js/handler.js b/src/uni_modules/mp-html/static/app-plus/mp-html/js/handler.js
new file mode 100644
index 00000000..1d986bdc
--- /dev/null
+++ b/src/uni_modules/mp-html/static/app-plus/mp-html/js/handler.js
@@ -0,0 +1 @@
+"use strict";function t(t){for(var e=Object.create(null),n=t.attributes.length;n--;)e[t.attributes[n].name]=t.attributes[n].value;return e}function e(){a[1]&&(this.src=a[1],this.onerror=null),this.onclick=null,this.ontouchstart=null,uni.postMessage({data:{action:"onError",source:"img",attrs:t(this)}})}function n(){window.unloadimgs-=1,0===window.unloadimgs&&uni.postMessage({data:{action:"onReady"}})}function o(r,s,c){for(var d=0;d<r.length;d++)!function(d){var u=r[d],l=void 0;if(u.type&&"node"!==u.type)l=document.createTextNode(u.text.replace(/&amp;/g,"&"));else{var g=u.name;"svg"===g&&(c="http://www.w3.org/2000/svg"),"html"!==g&&"body"!==g||(g="div"),l=c?document.createElementNS(c,g):document.createElement(g);for(var p in u.attrs)l.setAttribute(p,u.attrs[p]);if(u.children&&o(u.children,l,c),"img"===g){if(window.unloadimgs+=1,l.onload=n,l.onerror=n,!l.src&&l.getAttribute("data-src")&&(l.src=l.getAttribute("data-src")),u.attrs.ignore||(l.onclick=function(e){e.stopPropagation(),uni.postMessage({data:{action:"onImgTap",attrs:t(this)}})}),a[2]){var h=new Image;h.src=l.src,l.src=a[2],h.onload=function(){l.src=this.src},h.onerror=function(){l.onerror()}}l.onerror=e}else if("a"===g)l.addEventListener("click",function(e){e.stopPropagation(),e.preventDefault();var n,o=this.getAttribute("href");o&&"#"===o[0]&&(n=(document.getElementById(o.substr(1))||{}).offsetTop),uni.postMessage({data:{action:"onLinkTap",attrs:t(this),offset:n}})},!0);else if("video"===g||"audio"===g)i.push(l),u.attrs.autoplay||u.attrs.controls||l.setAttribute("controls","true"),l.onplay=function(){if(uni.postMessage({data:{action:"onPlay"}}),a[3])for(var t=0;t<i.length;t++)i[t]!==this&&i[t].pause()},l.onerror=function(){uni.postMessage({data:{action:"onError",source:g,attrs:t(this)}})};else if("table"===g&&a[4]&&!l.style.cssText.includes("inline")){var f=document.createElement("div");f.style.overflow="auto",f.appendChild(l),l=f}else"svg"===g&&(c=void 0)}s.appendChild(l)}(d)}document.addEventListener("UniAppJSBridgeReady",function(){document.body.onclick=function(){return uni.postMessage({data:{action:"onClick"}})},uni.postMessage({data:{action:"onJSBridgeReady"}})});var a,i=[];window.setContent=function(t,e,n){var r=document.getElementById("content");e[0]&&(document.body.style.cssText=e[0]),e[5]||(r.style.userSelect="none"),n||(r.innerHTML="",i=[]),a=e,window.unloadimgs=0;var s=document.createDocumentFragment();o(t,s),r.appendChild(s);var c=r.scrollHeight;uni.postMessage({data:{action:"onLoad",height:c}}),window.unloadimgs||uni.postMessage({data:{action:"onReady",height:c}}),clearInterval(window.timer),window.timer=setInterval(function(){r.scrollHeight!==c&&(c=r.scrollHeight,uni.postMessage({data:{action:"onHeightChange",height:c}}))},350)},window.onunload=function(){clearInterval(window.timer)};
\ No newline at end of file
diff --git a/src/uni_modules/mp-html/static/app-plus/mp-html/js/uni.webview.min.js b/src/uni_modules/mp-html/static/app-plus/mp-html/js/uni.webview.min.js
new file mode 100644
index 00000000..b0c84451
--- /dev/null
+++ b/src/uni_modules/mp-html/static/app-plus/mp-html/js/uni.webview.min.js
@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function t(e,t){return n.call(e,t)}var i=[],a=function(e,n){var t={options:{timestamp:+new Date},name:e,arg:n};if(window.__dcloud_weex_postMessage||window.__dcloud_weex_){if("postMessage"===e){var a={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(a):window.__dcloud_weex_.postMessage(JSON.stringify(a))}var o={type:"WEB_INVOKE_APPSERVICE",args:{data:t,webviewIds:i}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(o):window.__dcloud_weex_.postMessageToService(JSON.stringify(o))}if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:t,pageId:""},"*");if(0===i.length){var r=plus.webview.currentWebview();if(!r)throw new Error("plus.webview.currentWebview() is undefined");var d=r.parent(),s="";s=d?d.id:r.id,i.push(s)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:t,webviewIds:i}},"__uniapp__service");else{var w=JSON.stringify(t);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(w,",").concat(JSON.stringify(i),");"))}},o={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;a("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("redirectTo",{url:encodeURI(n)})},getEnv:function(e){window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a("postMessage",e.data||{})}},r=/uni-app/i.test(navigator.userAgent),d=/Html5Plus/i.test(navigator.userAgent),s=/complete|loaded|interactive/;var w=window.my&&navigator.userAgent.indexOf("AlipayClient")>-1;var u=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var c=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var g=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var v=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.qa&&/quickapp/i.test(navigator.userAgent);for(var l,_=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},f=[function(e){if(r||d)return window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&s.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),o},function(e){if(v)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.wx.miniProgram},function(e){if(c)return window.QQJSBridge&&window.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener("QQJSBridgeReady",e),window.qq.miniProgram},function(e){if(w){document.addEventListener("DOMContentLoaded",e);var n=window.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(u)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(g)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(p){window.QaJSBridge&&window.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener("QaJSBridgeReady",e);var n=window.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){return document.addEventListener("DOMContentLoaded",e),o}],m=0;m<f.length&&!(l=f[m](_));m++);l||(l={});var E="undefined"!=typeof uni?uni:{};if(!E.navigateTo)for(var b in l)t(l,b)&&(E[b]=l[b]);return E.webView=l,E}));
\ No newline at end of file
diff --git a/src/uni_modules/mp-html/static/app-plus/mp-html/local.html b/src/uni_modules/mp-html/static/app-plus/mp-html/local.html
new file mode 100644
index 00000000..04355c90
--- /dev/null
+++ b/src/uni_modules/mp-html/static/app-plus/mp-html/local.html
@@ -0,0 +1 @@
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><style>body,html{width:100%;height:100%;overflow-x:scroll;overflow-y:hidden}body{margin:0}video{width:300px;height:225px}img{max-width:100%;-webkit-touch-callout:none}</style></head><body><div id="content" style="overflow:hidden"></div><script type="text/javascript" src="./js/uni.webview.min.js"></script><script type="text/javascript" src="./js/handler.js"></script></body>
\ No newline at end of file
diff --git a/src/uni_modules/uni-badge/changelog.md b/src/uni_modules/uni-badge/changelog.md
new file mode 100644
index 00000000..e352c60c
--- /dev/null
+++ b/src/uni_modules/uni-badge/changelog.md
@@ -0,0 +1,33 @@
+## 1.2.2（2023-01-28）
+- 修复 运行/打包 控制台警告问题
+## 1.2.1（2022-09-05）
+- 修复 当 text 超过 max-num 时，badge 的宽度计算是根据 text 的长度计算，更改为 css 计算实际展示宽度，详见:[https://ask.dcloud.net.cn/question/150473](https://ask.dcloud.net.cn/question/150473)
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-badge](https://uniapp.dcloud.io/component/uniui/uni-badge)
+## 1.1.7（2021-11-08）
+- 优化 升级ui
+- 修改 size 属性默认值调整为 small
+- 修改 type 属性，默认值调整为 error，info 替换 default
+## 1.1.6（2021-09-22）
+- 修复 在字节小程序上样式不生效的 bug
+## 1.1.5（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.4（2021-07-29）
+- 修复 去掉 nvue 不支持css 的 align-self 属性，nvue 下不暂支持 absolute 属性
+## 1.1.3（2021-06-24）
+- 优化 示例项目
+## 1.1.1（2021-05-12）
+- 新增 组件示例地址
+## 1.1.0（2021-05-12）
+- 新增 uni-badge 的 absolute 属性，支持定位
+- 新增 uni-badge 的 offset 属性，支持定位偏移
+- 新增 uni-badge 的 is-dot 属性，支持仅显示有一个小点
+- 新增 uni-badge 的 max-num 属性，支持自定义封顶的数字值，超过 99 显示99+
+- 优化 uni-badge 属性 custom-style， 支持以对象形式自定义样式
+## 1.0.7（2021-05-07）
+- 修复 uni-badge 在 App 端，数字小于10时不是圆形的bug
+- 修复 uni-badge 在父元素不是 flex 布局时，宽度缩小的bug
+- 新增 uni-badge 属性 custom-style， 支持自定义样式
+## 1.0.6（2021-02-04）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-badge/components/uni-badge/uni-badge.vue b/src/uni_modules/uni-badge/components/uni-badge/uni-badge.vue
new file mode 100644
index 00000000..956354b4
--- /dev/null
+++ b/src/uni_modules/uni-badge/components/uni-badge/uni-badge.vue
@@ -0,0 +1,268 @@
+<template>
+	<view class="uni-badge--x">
+		<slot />
+		<text v-if="text" :class="classNames" :style="[positionStyle, customStyle, dotStyle]"
+			class="uni-badge" @click="onClick()">{{displayValue}}</text>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Badge 数字角标
+	 * @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=21
+	 * @property {String} text 角标内容
+	 * @property {String} size = [normal|small] 角标内容
+	 * @property {String} type = [info|primary|success|warning|error] 颜色类型
+	 * 	@value info 灰色
+	 * 	@value primary 蓝色
+	 * 	@value success 绿色
+	 * 	@value warning 黄色
+	 * 	@value error 红色
+	 * @property {String} inverted = [true|false] 是否无需背景颜色
+	 * @property {Number} maxNum 展示封顶的数字值，超过 99 显示 99+
+	 * @property {String} absolute = [rightTop|rightBottom|leftBottom|leftTop] 开启绝对定位, 角标将定位到其包裹的标签的四角上
+	 * 	@value rightTop 右上
+	 * 	@value rightBottom 右下
+	 * 	@value leftTop 左上
+	 * 	@value leftBottom 左下
+	 * @property {Array[number]} offset	距定位角中心点的偏移量，只有存在 absolute 属性时有效，例如：[-10, -10] 表示向外偏移 10px，[10, 10] 表示向 absolute 指定的内偏移 10px
+	 * @property {String} isDot = [true|false] 是否显示为一个小点
+	 * @event {Function} click 点击 Badge 触发事件
+	 * @example <uni-badge text="1"></uni-badge>
+	 */
+
+	export default {
+		name: 'UniBadge',
+		emits: ['click'],
+		props: {
+			type: {
+				type: String,
+				default: 'error'
+			},
+			inverted: {
+				type: Boolean,
+				default: false
+			},
+			isDot: {
+				type: Boolean,
+				default: false
+			},
+			maxNum: {
+				type: Number,
+				default: 99
+			},
+			absolute: {
+				type: String,
+				default: ''
+			},
+			offset: {
+				type: Array,
+				default () {
+					return [0, 0]
+				}
+			},
+			text: {
+				type: [String, Number],
+				default: ''
+			},
+			size: {
+				type: String,
+				default: 'small'
+			},
+			customStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			}
+		},
+		data() {
+			return {};
+		},
+		computed: {
+			width() {
+				return String(this.text).length * 8 + 12
+			},
+			classNames() {
+				const {
+					inverted,
+					type,
+					size,
+					absolute
+				} = this
+				return [
+					inverted ? 'uni-badge--' + type + '-inverted' : '',
+					'uni-badge--' + type,
+					'uni-badge--' + size,
+					absolute ? 'uni-badge--absolute' : ''
+				].join(' ')
+			},
+			positionStyle() {
+				if (!this.absolute) return {}
+				let w = this.width / 2,
+					h = 10
+				if (this.isDot) {
+					w = 5
+					h = 5
+				}
+				const x = `${- w  + this.offset[0]}px`
+				const y = `${- h + this.offset[1]}px`
+
+				const whiteList = {
+					rightTop: {
+						right: x,
+						top: y
+					},
+					rightBottom: {
+						right: x,
+						bottom: y
+					},
+					leftBottom: {
+						left: x,
+						bottom: y
+					},
+					leftTop: {
+						left: x,
+						top: y
+					}
+				}
+				const match = whiteList[this.absolute]
+				return match ? match : whiteList['rightTop']
+			},
+			dotStyle() {
+				if (!this.isDot) return {}
+				return {
+					width: '10px',
+					minWidth: '0',
+					height: '10px',
+					padding: '0',
+					borderRadius: '10px'
+				}
+			},
+			displayValue() {
+				const {
+					isDot,
+					text,
+					maxNum
+				} = this
+				return isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text)
+			}
+		},
+		methods: {
+			onClick() {
+				this.$emit('click');
+			}
+		}
+	};
+</script>
+
+<style lang="scss" >
+	$uni-primary: #2979ff !default;
+	$uni-success: #4cd964 !default;
+	$uni-warning: #f0ad4e !default;
+	$uni-error: #dd524d !default;
+	$uni-info: #909399 !default;
+
+
+	$bage-size: 12px;
+	$bage-small: scale(0.8);
+
+	.uni-badge--x {
+		/* #ifdef APP-NVUE */
+		// align-self: flex-start;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		display: inline-block;
+		/* #endif */
+		position: relative;
+	}
+
+	.uni-badge--absolute {
+		position: absolute;
+	}
+
+	.uni-badge--small {
+		transform: $bage-small;
+		transform-origin: center center;
+	}
+
+	.uni-badge {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		overflow: hidden;
+		box-sizing: border-box;
+		font-feature-settings: "tnum";
+		min-width: 20px;
+		/* #endif */
+		justify-content: center;
+		flex-direction: row;
+		height: 20px;
+		padding: 0 4px;
+		line-height: 18px;
+		color: #fff;
+		border-radius: 100px;
+		background-color: $uni-info;
+		background-color: transparent;
+		border: 1px solid #fff;
+		text-align: center;
+		font-family: 'Helvetica Neue', Helvetica, sans-serif;
+		font-size: $bage-size;
+		/* #ifdef H5 */
+		z-index: 999;
+		cursor: pointer;
+		/* #endif */
+
+		&--info {
+			color: #fff;
+			background-color: $uni-info;
+		}
+
+		&--primary {
+			background-color: $uni-primary;
+		}
+
+		&--success {
+			background-color: $uni-success;
+		}
+
+		&--warning {
+			background-color: $uni-warning;
+		}
+
+		&--error {
+			background-color: $uni-error;
+		}
+
+		&--inverted {
+			padding: 0 5px 0 0;
+			color: $uni-info;
+		}
+
+		&--info-inverted {
+			color: $uni-info;
+			background-color: transparent;
+		}
+
+		&--primary-inverted {
+			color: $uni-primary;
+			background-color: transparent;
+		}
+
+		&--success-inverted {
+			color: $uni-success;
+			background-color: transparent;
+		}
+
+		&--warning-inverted {
+			color: $uni-warning;
+			background-color: transparent;
+		}
+
+		&--error-inverted {
+			color: $uni-error;
+			background-color: transparent;
+		}
+
+	}
+</style>
diff --git a/src/uni_modules/uni-badge/package.json b/src/uni_modules/uni-badge/package.json
new file mode 100644
index 00000000..b0bac937
--- /dev/null
+++ b/src/uni_modules/uni-badge/package.json
@@ -0,0 +1,85 @@
+{
+  "id": "uni-badge",
+  "displayName": "uni-badge 数字角标",
+  "version": "1.2.2",
+  "description": "数字角标（徽章）组件，在元素周围展示消息提醒，一般用于列表、九宫格、按钮等地方。",
+  "keywords": [
+    "",
+    "badge",
+    "uni-ui",
+    "uniui",
+    "数字角标",
+    "徽章"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "y",
+          "联盟": "y"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-badge/readme.md b/src/uni_modules/uni-badge/readme.md
new file mode 100644
index 00000000..bdf175da
--- /dev/null
+++ b/src/uni_modules/uni-badge/readme.md
@@ -0,0 +1,10 @@
+## Badge 数字角标
+> **组件名：uni-badge**
+> 代码块： `uBadge`
+
+数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景，
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-badge)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/src/uni_modules/uni-card/changelog.md b/src/uni_modules/uni-card/changelog.md
new file mode 100644
index 00000000..c3cd8c45
--- /dev/null
+++ b/src/uni_modules/uni-card/changelog.md
@@ -0,0 +1,26 @@
+## 1.3.1（2021-12-20）
+- 修复 在vue页面下略缩图显示不正常的bug
+## 1.3.0（2021-11-19）
+- 重构插槽的用法 ，header 替换为 title 
+- 新增 actions 插槽
+- 新增 cover 封面图属性和插槽
+- 新增 padding 内容默认内边距离
+- 新增 margin 卡片默认外边距离
+- 新增 spacing 卡片默认内边距
+- 新增 shadow 卡片阴影属性
+- 取消 mode 属性，可使用组合插槽代替
+- 取消 note 属性 ，使用actions插槽代替
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-card](https://uniapp.dcloud.io/component/uniui/uni-card)
+## 1.2.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.2.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.8（2021-07-01）
+- 优化 图文卡片无图片加载时，提供占位图标
+- 新增 header 插槽，自定义卡片头部（ 图文卡片 mode="style" 时，不支持）
+- 修复 thumbnail 不存在仍然占位的 bug
+## 1.1.7（2021-05-12）
+- 新增 组件示例地址
+## 1.1.6（2021-02-04）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-card/components/uni-card/uni-card.vue b/src/uni_modules/uni-card/components/uni-card/uni-card.vue
new file mode 100644
index 00000000..38cf594c
--- /dev/null
+++ b/src/uni_modules/uni-card/components/uni-card/uni-card.vue
@@ -0,0 +1,270 @@
+<template>
+	<view class="uni-card" :class="{ 'uni-card--full': isFull, 'uni-card--shadow': isShadow,'uni-card--border':border}"
+		:style="{'margin':isFull?0:margin,'padding':spacing,'box-shadow':isShadow?shadow:''}">
+		<!-- 封面 -->
+		<slot name="cover">
+			<view v-if="cover" class="uni-card__cover">
+				<image class="uni-card__cover-image" mode="widthFix" @click="onClick('cover')" :src="cover"></image>
+			</view>
+		</slot>
+		<slot name="title">
+			<view v-if="title || extra" class="uni-card__header">
+				<!-- 卡片标题 -->
+				<view class="uni-card__header-box" @click="onClick('title')">
+					<view v-if="thumbnail" class="uni-card__header-avatar">
+						<image class="uni-card__header-avatar-image" :src="thumbnail" mode="aspectFit" />
+					</view>
+					<view class="uni-card__header-content">
+						<text class="uni-card__header-content-title uni-ellipsis">{{ title }}</text>
+						<text v-if="title&&subTitle"
+							class="uni-card__header-content-subtitle uni-ellipsis">{{ subTitle }}</text>
+					</view>
+				</view>
+				<view class="uni-card__header-extra" @click="onClick('extra')">
+					<text class="uni-card__header-extra-text">{{ extra }}</text>
+				</view>
+			</view>
+		</slot>
+		<!-- 卡片内容 -->
+		<view class="uni-card__content" :style="{padding:padding}" @click="onClick('content')">
+			<slot></slot>
+		</view>
+		<view class="uni-card__actions" @click="onClick('actions')">
+			<slot name="actions"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Card 卡片
+	 * @description 卡片视图组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=22
+	 * @property {String} title 标题文字
+	 * @property {String} subTitle 副标题
+	 * @property {Number} padding 内容内边距
+	 * @property {Number} margin 卡片外边距
+	 * @property {Number} spacing 卡片内边距
+	 * @property {String} extra 标题额外信息
+	 * @property {String} cover 封面图（本地路径需要引入）
+	 * @property {String} thumbnail 标题左侧缩略图
+	 * @property {Boolean} is-full = [true | false] 卡片内容是否通栏，为 true 时将去除padding值
+	 * @property {Boolean} is-shadow = [true | false] 卡片内容是否开启阴影
+	 * @property {String} shadow 卡片阴影
+	 * @property {Boolean} border 卡片边框
+	 * @event {Function} click 点击 Card 触发事件
+	 */
+	export default {
+		name: 'UniCard',
+		emits: ['click'],
+		props: {
+			title: {
+				type: String,
+				default: ''
+			},
+			subTitle: {
+				type: String,
+				default: ''
+			},
+			padding: {
+				type: String,
+				default: '10px'
+			},
+			margin: {
+				type: String,
+				default: '15px'
+			},
+			spacing: {
+				type: String,
+				default: '0 10px'
+			},
+			extra: {
+				type: String,
+				default: ''
+			},
+			cover: {
+				type: String,
+				default: ''
+			},
+			thumbnail: {
+				type: String,
+				default: ''
+			},
+			isFull: {
+				// 内容区域是否通栏
+				type: Boolean,
+				default: false
+			},
+			isShadow: {
+				// 是否开启阴影
+				type: Boolean,
+				default: true
+			},
+			shadow: {
+				type: String,
+				default: '0px 0px 3px 1px rgba(0, 0, 0, 0.08)'
+			},
+			border: {
+				type: Boolean,
+				default: true
+			}
+		},
+		methods: {
+			onClick(type) {
+				this.$emit('click', type)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-border-3: #EBEEF5 !default;
+	$uni-shadow-base:0 0px 6px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
+	$uni-main-color: #3a3a3a !default;
+	$uni-base-color: #6a6a6a !default;
+	$uni-secondary-color: #909399 !default;
+	$uni-spacing-sm: 8px !default;
+	$uni-border-color:$uni-border-3;
+	$uni-shadow: $uni-shadow-base;
+	$uni-card-title: 15px;
+	$uni-cart-title-color:$uni-main-color;
+	$uni-card-subtitle: 12px;
+	$uni-cart-subtitle-color:$uni-secondary-color;
+	$uni-card-spacing: 10px;
+	$uni-card-content-color: $uni-base-color;
+
+	.uni-card {
+		margin: $uni-card-spacing;
+		padding: 0 $uni-spacing-sm;
+		border-radius: 4px;
+		overflow: hidden;
+		font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+		background-color: #fff;
+		flex: 1;
+
+		.uni-card__cover {
+			position: relative;
+			margin-top: $uni-card-spacing;
+			flex-direction: row;
+			overflow: hidden;
+			border-radius: 4px;
+			.uni-card__cover-image {
+				flex: 1;
+				// width: 100%;
+				/* #ifndef APP-PLUS */
+				vertical-align: middle;
+				/* #endif */
+			}
+		}
+
+		.uni-card__header {
+			display: flex;
+			border-bottom: 1px $uni-border-color solid;
+			flex-direction: row;
+			align-items: center;
+			padding: $uni-card-spacing;
+			overflow: hidden;
+
+			.uni-card__header-box {
+				/* #ifndef APP-NVUE */
+				display: flex;
+				/* #endif */
+				flex: 1;
+				flex-direction: row;
+				align-items: center;
+				overflow: hidden;
+			}
+
+			.uni-card__header-avatar {
+				width: 40px;
+				height: 40px;
+				overflow: hidden;
+				border-radius: 5px;
+				margin-right: $uni-card-spacing;
+				.uni-card__header-avatar-image {
+					flex: 1;
+					width: 40px;
+					height: 40px;
+				}
+			}
+
+			.uni-card__header-content {
+				/* #ifndef APP-NVUE */
+				display: flex;
+				/* #endif */
+				flex-direction: column;
+				justify-content: center;
+				flex: 1;
+				// height: 40px;
+				overflow: hidden;
+
+				.uni-card__header-content-title {
+					font-size: $uni-card-title;
+					color: $uni-cart-title-color;
+					// line-height: 22px;
+				}
+
+				.uni-card__header-content-subtitle {
+					font-size: $uni-card-subtitle;
+					margin-top: 5px;
+					color: $uni-cart-subtitle-color;
+				}
+			}
+
+			.uni-card__header-extra {
+				line-height: 12px;
+
+				.uni-card__header-extra-text {
+					font-size: 12px;
+					color: $uni-cart-subtitle-color;
+				}
+			}
+		}
+
+		.uni-card__content {
+			padding: $uni-card-spacing;
+			font-size: 14px;
+			color: $uni-card-content-color;
+			line-height: 22px;
+		}
+
+		.uni-card__actions {
+			font-size: 12px;
+		}
+	}
+
+	.uni-card--border {
+		border: 1px solid $uni-border-color;
+	}
+
+	.uni-card--shadow {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		box-shadow: $uni-shadow;
+		/* #endif */
+	}
+
+	.uni-card--full {
+		margin: 0;
+		border-left-width: 0;
+		border-left-width: 0;
+		border-radius: 0;
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-card--full:after {
+		border-radius: 0;
+	}
+
+	/* #endif */
+	.uni-ellipsis {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		/* #endif */
+	}
+</style>
diff --git a/src/uni_modules/uni-card/package.json b/src/uni_modules/uni-card/package.json
new file mode 100644
index 00000000..f16224de
--- /dev/null
+++ b/src/uni_modules/uni-card/package.json
@@ -0,0 +1,90 @@
+{
+  "id": "uni-card",
+  "displayName": "uni-card 卡片",
+  "version": "1.3.1",
+  "description": "Card 组件，提供常见的卡片样式。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "card",
+    "",
+    "卡片"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-icons",
+			"uni-scss"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/src/uni_modules/uni-card/readme.md b/src/uni_modules/uni-card/readme.md
new file mode 100644
index 00000000..7434e71d
--- /dev/null
+++ b/src/uni_modules/uni-card/readme.md
@@ -0,0 +1,12 @@
+
+
+## Card 卡片
+> **组件名：uni-card**
+> 代码块： `uCard`
+
+卡片视图组件。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-card)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/src/uni_modules/uni-collapse/changelog.md b/src/uni_modules/uni-collapse/changelog.md
new file mode 100644
index 00000000..292e4c79
--- /dev/null
+++ b/src/uni_modules/uni-collapse/changelog.md
@@ -0,0 +1,36 @@
+## 1.4.3（2022-01-25）
+- 修复 初始化的时候 ，open 属性失效的bug
+## 1.4.2（2022-01-21）
+- 修复 微信小程序resize后组件收起的bug
+## 1.4.1（2021-11-22）
+- 修复 vue3中个别scss变量无法找到的问题
+## 1.4.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-collapse](https://uniapp.dcloud.io/component/uniui/uni-collapse)
+## 1.3.3（2021-08-17）
+- 优化 show-arrow 属性默认为true
+## 1.3.2（2021-08-17）
+- 新增 show-arrow 属性，控制是否显示右侧箭头
+## 1.3.1（2021-07-30）
+- 优化 vue3下小程序事件警告的问题
+## 1.3.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.2.2（2021-07-21）
+- 修复 由1.2.0版本引起的 change 事件返回 undefined 的Bug
+## 1.2.1（2021-07-21）
+- 优化 组件示例
+## 1.2.0（2021-07-21）
+- 新增 组件折叠动画
+- 新增 value\v-model 属性 ，动态修改面板折叠状态
+- 新增 title 插槽 ，可定义面板标题
+- 新增 border 属性 ，显示隐藏面板内容分隔线
+- 新增 title-border 属性 ，显示隐藏面板标题分隔线
+- 修复 resize 方法失效的Bug
+- 修复 change 事件返回参数不正确的Bug
+- 优化 H5、App 平台自动更具内容更新高度，无需调用 reszie() 方法
+## 1.1.7（2021-05-12）
+- 新增 组件示例地址
+## 1.1.6（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+## 1.1.5（2021-02-05）
+- 调整为uni_modules目录规范
\ No newline at end of file
diff --git a/src/uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue b/src/uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue
new file mode 100644
index 00000000..d62a6a71
--- /dev/null
+++ b/src/uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue
@@ -0,0 +1,402 @@
+<template>
+	<view class="uni-collapse-item">
+		<!-- onClick(!isOpen) -->
+		<view @click="onClick(!isOpen)" class="uni-collapse-item__title"
+			:class="{'is-open':isOpen &&titleBorder === 'auto' ,'uni-collapse-item-border':titleBorder !== 'none'}">
+			<view class="uni-collapse-item__title-wrap">
+				<slot name="title">
+					<view class="uni-collapse-item__title-box" :class="{'is-disabled':disabled}">
+						<image v-if="thumb" :src="thumb" class="uni-collapse-item__title-img" />
+						<text class="uni-collapse-item__title-text">{{ title }}</text>
+					</view>
+				</slot>
+			</view>
+			<view v-if="showArrow"
+				:class="{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }"
+				class="uni-collapse-item__title-arrow">
+				<uni-icons :color="disabled?'#ddd':'#bbb'" size="14" type="bottom" />
+			</view>
+		</view>
+		<view class="uni-collapse-item__wrap" :class="{'is--transition':showAnimation}"
+			:style="{height: (isOpen?height:0) +'px'}">
+			<view :id="elId" ref="collapse--hook" class="uni-collapse-item__wrap-content"
+				:class="{open:isheight,'uni-collapse-item--border':border&&isOpen}">
+				<slot></slot>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = weex.requireModule('dom')
+	// #endif
+	/**
+	 * CollapseItem 折叠面板子组件
+	 * @description 折叠面板子组件
+	 * @property {String} title 标题文字
+	 * @property {String} thumb 标题左侧缩略图
+	 * @property {String} name 唯一标志符
+	 * @property {Boolean} open = [true|false] 是否展开组件
+	 * @property {Boolean} titleBorder = [true|false] 是否显示标题分隔线
+	 * @property {Boolean} border = [true|false] 是否显示分隔线
+	 * @property {Boolean} disabled = [true|false] 是否展开面板
+	 * @property {Boolean} showAnimation = [true|false] 开启动画
+	 * @property {Boolean} showArrow = [true|false] 是否显示右侧箭头
+	 */
+	export default {
+		name: 'uniCollapseItem',
+		props: {
+			// 列表标题
+			title: {
+				type: String,
+				default: ''
+			},
+			name: {
+				type: [Number, String],
+				default: ''
+			},
+			// 是否禁用
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// #ifdef APP-PLUS
+			// 是否显示动画,app 端默认不开启动画，卡顿严重
+			showAnimation: {
+				type: Boolean,
+				default: false
+			},
+			// #endif
+			// #ifndef APP-PLUS
+			// 是否显示动画
+			showAnimation: {
+				type: Boolean,
+				default: true
+			},
+			// #endif
+			// 是否展开
+			open: {
+				type: Boolean,
+				default: false
+			},
+			// 缩略图
+			thumb: {
+				type: String,
+				default: ''
+			},
+			// 标题分隔线显示类型
+			titleBorder: {
+				type: String,
+				default: 'auto'
+			},
+			border: {
+				type: Boolean,
+				default: true
+			},
+			showArrow: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			// TODO 随机生生元素ID，解决百度小程序获取同一个元素位置信息的bug
+			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
+			return {
+				isOpen: false,
+				isheight: null,
+				height: 0,
+				elId,
+				nameSync: 0
+			}
+		},
+		watch: {
+			open(val) {
+				this.isOpen = val
+				this.onClick(val, 'init')
+			}
+		},
+		updated(e) {
+			this.$nextTick(() => {
+				this.init(true)
+			})
+		},
+		created() {
+			this.collapse = this.getCollapse()
+			this.oldHeight = 0
+			this.onClick(this.open, 'init')
+		},
+		// #ifndef VUE3
+		// TODO vue2
+		destroyed() {
+			if (this.__isUnmounted) return
+			this.uninstall()
+		},
+		// #endif
+		// #ifdef VUE3
+		// TODO vue3
+		unmounted() {
+			this.__isUnmounted = true
+			this.uninstall()
+		},
+		// #endif
+		mounted() {
+			if (!this.collapse) return
+			if (this.name !== '') {
+				this.nameSync = this.name
+			} else {
+				this.nameSync = this.collapse.childrens.length + ''
+			}
+			if (this.collapse.names.indexOf(this.nameSync) === -1) {
+				this.collapse.names.push(this.nameSync)
+			} else {
+				console.warn(`name 值 ${this.nameSync} 重复`);
+			}
+			if (this.collapse.childrens.indexOf(this) === -1) {
+				this.collapse.childrens.push(this)
+			}
+			this.init()
+		},
+		methods: {
+			init(type) {
+				// #ifndef APP-NVUE
+				this.getCollapseHeight(type)
+				// #endif
+				// #ifdef APP-NVUE
+				this.getNvueHwight(type)
+				// #endif
+			},
+			uninstall() {
+				if (this.collapse) {
+					this.collapse.childrens.forEach((item, index) => {
+						if (item === this) {
+							this.collapse.childrens.splice(index, 1)
+						}
+					})
+					this.collapse.names.forEach((item, index) => {
+						if (item === this.nameSync) {
+							this.collapse.names.splice(index, 1)
+						}
+					})
+				}
+			},
+			onClick(isOpen, type) {
+				if (this.disabled) return
+				this.isOpen = isOpen
+				if (this.isOpen && this.collapse) {
+					this.collapse.setAccordion(this)
+				}
+				if (type !== 'init') {
+					this.collapse.onChange(isOpen, this)
+				}
+			},
+			getCollapseHeight(type, index = 0) {
+				const views = uni.createSelectorQuery().in(this)
+				views
+					.select(`#${this.elId}`)
+					.fields({
+						size: true
+					}, data => {
+						// TODO 百度中可能获取不到节点信息 ，需要循环获取
+						if (index >= 10) return
+						if (!data) {
+							index++
+							this.getCollapseHeight(false, index)
+							return
+						}
+						// #ifdef APP-NVUE
+						this.height = data.height + 1
+						// #endif
+						// #ifndef APP-NVUE
+						this.height = data.height
+						// #endif
+						this.isheight = true
+						if (type) return
+						this.onClick(this.isOpen, 'init')
+					})
+					.exec()
+			},
+			getNvueHwight(type) {
+				const result = dom.getComponentRect(this.$refs['collapse--hook'], option => {
+					if (option && option.result && option.size) {
+						// #ifdef APP-NVUE
+						this.height = option.size.height + 1
+						// #endif
+						// #ifndef APP-NVUE
+						this.height = option.size.height
+						// #endif
+						this.isheight = true
+						if (type) return
+						this.onClick(this.open, 'init')
+					}
+				})
+			},
+			/**
+			 * 获取父元素实例
+			 */
+			getCollapse(name = 'uniCollapse') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false;
+					parentName = parent.$options.name;
+				}
+				return parent;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.uni-collapse-item {
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+
+		/* #endif */
+		&__title {
+			/* #ifndef APP-NVUE */
+			display: flex;
+			width: 100%;
+			box-sizing: border-box;
+			/* #endif */
+			flex-direction: row;
+			align-items: center;
+			transition: border-bottom-color .3s;
+
+			// transition-property: border-bottom-color;
+			// transition-duration: 5s;
+			&-wrap {
+				width: 100%;
+				flex: 1;
+
+			}
+
+			&-box {
+				padding: 0 15px;
+				/* #ifndef APP-NVUE */
+				display: flex;
+				width: 100%;
+				box-sizing: border-box;
+				/* #endif */
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				height: 48px;
+				line-height: 48px;
+				background-color: #fff;
+				color: #303133;
+				font-size: 13px;
+				font-weight: 500;
+				/* #ifdef H5 */
+				cursor: pointer;
+				outline: none;
+
+				/* #endif */
+				&.is-disabled {
+					.uni-collapse-item__title-text {
+						color: #999;
+					}
+				}
+
+			}
+
+			&.uni-collapse-item-border {
+				border-bottom: 1px solid #ebeef5;
+			}
+
+			&.is-open {
+				border-bottom-color: transparent;
+			}
+
+			&-img {
+				height: 22px;
+				width: 22px;
+				margin-right: 10px;
+			}
+
+			&-text {
+				flex: 1;
+				font-size: 14px;
+				/* #ifndef APP-NVUE */
+				white-space: nowrap;
+				color: inherit;
+				/* #endif */
+				/* #ifdef APP-NVUE */
+				lines: 1;
+				/* #endif */
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			&-arrow {
+				/* #ifndef APP-NVUE */
+				display: flex;
+				box-sizing: border-box;
+				/* #endif */
+				align-items: center;
+				justify-content: center;
+				width: 20px;
+				height: 20px;
+				margin-right: 10px;
+				transform: rotate(0deg);
+
+				&-active {
+					transform: rotate(-180deg);
+				}
+			}
+
+
+		}
+
+		&__wrap {
+			/* #ifndef APP-NVUE */
+			will-change: height;
+			box-sizing: border-box;
+			/* #endif */
+			background-color: #fff;
+			overflow: hidden;
+			position: relative;
+			height: 0;
+
+			&.is--transition {
+				// transition: all 0.3s;
+				transition-property: height, border-bottom-width;
+				transition-duration: 0.3s;
+				/* #ifndef APP-NVUE */
+				will-change: height;
+				/* #endif */
+			}
+
+
+
+			&-content {
+				position: absolute;
+				font-size: 13px;
+				color: #303133;
+				// transition: height 0.3s;
+				border-bottom-color: transparent;
+				border-bottom-style: solid;
+				border-bottom-width: 0;
+
+				&.uni-collapse-item--border {
+					border-bottom-width: 1px;
+					border-bottom-color: red;
+					border-bottom-color: #ebeef5;
+				}
+
+				&.open {
+					position: relative;
+				}
+			}
+		}
+
+		&--animation {
+			transition-property: transform;
+			transition-duration: 0.3s;
+			transition-timing-function: ease;
+		}
+
+	}
+</style>
diff --git a/src/uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue b/src/uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue
new file mode 100644
index 00000000..384c39a9
--- /dev/null
+++ b/src/uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue
@@ -0,0 +1,147 @@
+<template>
+	<view class="uni-collapse">
+		<slot />
+	</view>
+</template>
+<script>
+	/**
+	 * Collapse 折叠面板
+	 * @description 展示可以折叠 / 展开的内容区域
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=23
+	 * @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array)
+	 * @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
+	 * @event {Function} change 切换面板时触发，如果是手风琴模式，返回类型为string，否则为array
+	 */
+	export default {
+		name: 'uniCollapse',
+		emits:['change','activeItem','input','update:modelValue'],
+		props: {
+			value: {
+				type: [String, Array],
+				default: ''
+			},
+			modelValue: {
+				type: [String, Array],
+				default: ''
+			},
+			accordion: {
+				// 是否开启手风琴效果
+				type: [Boolean, String],
+				default: false
+			},
+		},
+		data() {
+			return {}
+		},
+		computed: {
+			// TODO 兼容 vue2 和 vue3
+			dataValue() {
+				let value = (typeof this.value === 'string' && this.value === '') ||
+					(Array.isArray(this.value) && this.value.length === 0)
+				let modelValue = (typeof this.modelValue === 'string' && this.modelValue === '') ||
+					(Array.isArray(this.modelValue) && this.modelValue.length === 0)
+				if (value) {
+					return this.modelValue
+				}
+				if (modelValue) {
+					return this.value
+				}
+
+				return this.value
+			}
+		},
+		watch: {
+			dataValue(val) {
+				this.setOpen(val)
+			}
+		},
+		created() {
+			this.childrens = []
+			this.names = []
+		},
+		mounted() {
+			this.$nextTick(()=>{
+				this.setOpen(this.dataValue)
+			})
+		},
+		methods: {
+			setOpen(val) {
+				let str = typeof val === 'string'
+				let arr = Array.isArray(val)
+				this.childrens.forEach((vm, index) => {
+					if (str) {
+						if (val === vm.nameSync) {
+							if (!this.accordion) {
+								console.warn('accordion 属性为 false ,v-model 类型应该为 array')
+								return
+							}
+							vm.isOpen = true
+						}
+					}
+					if (arr) {
+						val.forEach(v => {
+							if (v === vm.nameSync) {
+								if (this.accordion) {
+									console.warn('accordion 属性为 true ,v-model 类型应该为 string')
+									return
+								}
+								vm.isOpen = true
+							}
+						})
+					}
+				})
+				this.emit(val)
+			},
+			setAccordion(self) {
+				if (!this.accordion) return
+				this.childrens.forEach((vm, index) => {
+					if (self !== vm) {
+						vm.isOpen = false
+					}
+				})
+			},
+			resize() {
+				this.childrens.forEach((vm, index) => {
+					// #ifndef APP-NVUE
+					vm.getCollapseHeight()
+					// #endif
+					// #ifdef APP-NVUE
+					vm.getNvueHwight()
+					// #endif
+				})
+			},
+			onChange(isOpen, self) {
+				let activeItem = []
+
+				if (this.accordion) {
+					activeItem = isOpen ? self.nameSync : ''
+				} else {
+					this.childrens.forEach((vm, index) => {
+						if (vm.isOpen) {
+							activeItem.push(vm.nameSync)
+						}
+					})
+				}
+				this.$emit('change', activeItem)
+				this.emit(activeItem)
+			},
+			emit(val){
+				this.$emit('input', val)
+				this.$emit('update:modelValue', val)
+			}
+		}
+	}
+</script>
+<style lang="scss" >
+	.uni-collapse {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		display: flex;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		flex: 1;
+		/* #endif */
+		flex-direction: column;
+		background-color: #fff;
+	}
+</style>
diff --git a/src/uni_modules/uni-collapse/package.json b/src/uni_modules/uni-collapse/package.json
new file mode 100644
index 00000000..65349cf9
--- /dev/null
+++ b/src/uni_modules/uni-collapse/package.json
@@ -0,0 +1,89 @@
+{
+  "id": "uni-collapse",
+  "displayName": "uni-collapse 折叠面板",
+  "version": "1.4.3",
+  "description": "Collapse 组件，可以折叠 / 展开的内容区域。",
+  "keywords": [
+    "uni-ui",
+    "折叠",
+    "折叠面板",
+    "手风琴"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+      "uni-icons"
+    ],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/src/uni_modules/uni-collapse/readme.md b/src/uni_modules/uni-collapse/readme.md
new file mode 100644
index 00000000..bc758ebc
--- /dev/null
+++ b/src/uni_modules/uni-collapse/readme.md
@@ -0,0 +1,12 @@
+
+
+## Collapse 折叠面板
+> **组件名：uni-collapse**
+> 代码块： `uCollapse`
+> 关联组件：`uni-collapse-item`、`uni-icons`。
+
+
+折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-collapse)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-combox/changelog.md b/src/uni_modules/uni-combox/changelog.md
new file mode 100644
index 00000000..23c27485
--- /dev/null
+++ b/src/uni_modules/uni-combox/changelog.md
@@ -0,0 +1,15 @@
+## 1.0.1（2021-11-23）
+- 优化 label、label-width 属性
+## 1.0.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-combox](https://uniapp.dcloud.io/component/uniui/uni-combox)
+## 0.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 0.0.6（2021-05-12）
+- 新增 组件示例地址
+## 0.0.5（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 0.0.4（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+## 0.0.3（2021-02-04）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-combox/components/uni-combox/uni-combox.vue b/src/uni_modules/uni-combox/components/uni-combox/uni-combox.vue
new file mode 100644
index 00000000..d4cb79d5
--- /dev/null
+++ b/src/uni_modules/uni-combox/components/uni-combox/uni-combox.vue
@@ -0,0 +1,275 @@
+<template>
+	<view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'">
+		<view v-if="label" class="uni-combox__label" :style="labelStyle">
+			<text>{{label}}</text>
+		</view>
+		<view class="uni-combox__input-box">
+			<input class="uni-combox__input" type="text" :placeholder="placeholder" 
+			placeholder-class="uni-combox__input-plac" v-model="inputVal" @input="onInput" @focus="onFocus" 
+@blur="onBlur" />
+			<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector">
+			</uni-icons>
+		</view>
+		<view class="uni-combox__selector" v-if="showSelector">
+			<view class="uni-popper__arrow"></view>
+			<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
+				<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
+					<text>{{emptyTips}}</text>
+				</view>
+				<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" 
+				@click="onSelectorClick(index)">
+					<text>{{item}}</text>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Combox 组合输入框
+	 * @description 组合输入框一般用于既可以输入也可以选择的场景
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=1261
+	 * @property {String} label 左侧文字
+	 * @property {String} labelWidth 左侧内容宽度
+	 * @property {String} placeholder 输入框占位符
+	 * @property {Array} candidates 候选项列表
+	 * @property {String} emptyTips 筛选结果为空时显示的文字
+	 * @property {String} value 组合框的值
+	 */
+	export default {
+		name: 'uniCombox',
+		emits: ['input', 'update:modelValue'],
+		props: {
+			border: {
+				type: Boolean,
+				default: true
+			},
+			label: {
+				type: String,
+				default: ''
+			},
+			labelWidth: {
+				type: String,
+				default: 'auto'
+			},
+			placeholder: {
+				type: String,
+				default: ''
+			},
+			candidates: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			emptyTips: {
+				type: String,
+				default: '无匹配项'
+			},
+			// #ifndef VUE3
+			value: {
+				type: [String, Number],
+				default: ''
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				type: [String, Number],
+				default: ''
+			},
+			// #endif
+		},
+		data() {
+			return {
+				showSelector: false,
+				inputVal: ''
+			}
+		},
+		computed: {
+			labelStyle() {
+				if (this.labelWidth === 'auto') {
+					return ""
+				}
+				return `width: ${this.labelWidth}`
+			},
+			filterCandidates() {
+				return this.candidates.filter((item) => {
+					return item.toString().indexOf(this.inputVal) > -1
+				})
+			},
+			filterCandidatesLength() {
+				return this.filterCandidates.length
+			}
+		},
+		watch: {
+			// #ifndef VUE3
+			value: {
+				handler(newVal) {
+					this.inputVal = newVal
+				},
+				immediate: true
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				handler(newVal) {
+					this.inputVal = newVal
+				},
+				immediate: true
+			},
+			// #endif
+		},
+		methods: {
+			toggleSelector() {
+				this.showSelector = !this.showSelector
+			},
+			onFocus() {
+				this.showSelector = true
+			},
+			onBlur() {
+				setTimeout(() => {
+					this.showSelector = false
+				}, 153)
+			},
+			onSelectorClick(index) {
+				this.inputVal = this.filterCandidates[index]
+				this.showSelector = false
+				this.$emit('input', this.inputVal)
+				this.$emit('update:modelValue', this.inputVal)
+			},
+			onInput() {
+				setTimeout(() => {
+					this.$emit('input', this.inputVal)
+					this.$emit('update:modelValue', this.inputVal)
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-combox {
+		font-size: 14px;
+		border: 1px solid #DCDFE6;
+		border-radius: 4px;
+		padding: 6px 10px;
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		// height: 40px;
+		flex-direction: row;
+		align-items: center;
+		// border-bottom: solid 1px #DDDDDD;
+	}
+
+	.uni-combox__label {
+		font-size: 16px;
+		line-height: 22px;
+		padding-right: 10px;
+		color: #999999;
+	}
+
+	.uni-combox__input-box {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.uni-combox__input {
+		flex: 1;
+		font-size: 14px;
+		height: 22px;
+		line-height: 22px;
+	}
+
+	.uni-combox__input-plac {
+		font-size: 14px;
+		color: #999;
+	}
+
+	.uni-combox__selector {
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		/* #endif */
+		position: absolute;
+		top: calc(100% + 12px);
+		left: 0;
+		width: 100%;
+		background-color: #FFFFFF;
+		border: 1px solid #EBEEF5;
+		border-radius: 6px;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		z-index: 2;
+		padding: 4px 0;
+	}
+
+	.uni-combox__selector-scroll {
+		/* #ifndef APP-NVUE */
+		max-height: 200px;
+		box-sizing: border-box;
+		/* #endif */
+	}
+
+	.uni-combox__selector-empty,
+	.uni-combox__selector-item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		cursor: pointer;
+		/* #endif */
+		line-height: 36px;
+		font-size: 14px;
+		text-align: center;
+		// border-bottom: solid 1px #DDDDDD;
+		padding: 0px 10px;
+	}
+
+	.uni-combox__selector-item:hover {
+		background-color: #f9f9f9;
+	}
+
+	.uni-combox__selector-empty:last-child,
+	.uni-combox__selector-item:last-child {
+		/* #ifndef APP-NVUE */
+		border-bottom: none;
+		/* #endif */
+	}
+
+	// picker 弹出层通用的指示小三角
+	.uni-popper__arrow,
+	.uni-popper__arrow::after {
+		position: absolute;
+		display: block;
+		width: 0;
+		height: 0;
+		border-color: transparent;
+		border-style: solid;
+		border-width: 6px;
+	}
+
+	.uni-popper__arrow {
+		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+		top: -6px;
+		left: 10%;
+		margin-right: 3px;
+		border-top-width: 0;
+		border-bottom-color: #EBEEF5;
+	}
+
+	.uni-popper__arrow::after {
+		content: " ";
+		top: 1px;
+		margin-left: -6px;
+		border-top-width: 0;
+		border-bottom-color: #fff;
+	}
+
+	.uni-combox__no-border {
+		border: none;
+	}
+</style>
diff --git a/src/uni_modules/uni-combox/package.json b/src/uni_modules/uni-combox/package.json
new file mode 100644
index 00000000..4a05c3ff
--- /dev/null
+++ b/src/uni_modules/uni-combox/package.json
@@ -0,0 +1,90 @@
+{
+  "id": "uni-combox",
+  "displayName": "uni-combox 组合框",
+  "version": "1.0.1",
+  "description": "可以选择也可以输入的表单项 ",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "combox",
+    "组合框",
+    "select"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-combox/readme.md b/src/uni_modules/uni-combox/readme.md
new file mode 100644
index 00000000..ffa2cc86
--- /dev/null
+++ b/src/uni_modules/uni-combox/readme.md
@@ -0,0 +1,11 @@
+
+
+## Combox 组合框
+> **组件名：uni-combox**
+> 代码块： `uCombox`
+
+
+组合框组件。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-combox)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-countdown/changelog.md b/src/uni_modules/uni-countdown/changelog.md
new file mode 100644
index 00000000..f25beefc
--- /dev/null
+++ b/src/uni_modules/uni-countdown/changelog.md
@@ -0,0 +1,24 @@
+## 1.2.2（2022-01-19）
+- 修复 在微信小程序中样式不生效的bug
+## 1.2.1（2022-01-18）
+- 新增 update 方法 ，在动态更新时间后，刷新组件
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-countdown](https://uniapp.dcloud.io/component/uniui/uni-countdown)
+## 1.1.3（2021-10-18）
+- 重构
+- 新增 font-size 支持自定义字体大小
+## 1.1.2（2021-08-24）
+- 新增 支持国际化
+## 1.1.1（2021-07-30）
+- 优化 vue3下小程序事件警告的问题
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.5（2021-06-18）
+- 修复 uni-countdown 重复赋值跳两秒的 bug
+## 1.0.4（2021-05-12）
+- 新增 组件示例地址
+## 1.0.3（2021-05-08）
+- 修复 uni-countdown 不能控制倒计时的 bug
+## 1.0.2（2021-02-04）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-countdown/components/uni-countdown/i18n/en.json b/src/uni_modules/uni-countdown/components/uni-countdown/i18n/en.json
new file mode 100644
index 00000000..06309cb0
--- /dev/null
+++ b/src/uni_modules/uni-countdown/components/uni-countdown/i18n/en.json
@@ -0,0 +1,6 @@
+{
+	"uni-countdown.day": "day",
+	"uni-countdown.h": "h",
+	"uni-countdown.m": "m",
+	"uni-countdown.s": "s"
+}
diff --git a/src/uni_modules/uni-countdown/components/uni-countdown/i18n/index.js b/src/uni_modules/uni-countdown/components/uni-countdown/i18n/index.js
new file mode 100644
index 00000000..de7509c8
--- /dev/null
+++ b/src/uni_modules/uni-countdown/components/uni-countdown/i18n/index.js
@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/src/uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hans.json b/src/uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hans.json
new file mode 100644
index 00000000..358cdd16
--- /dev/null
+++ b/src/uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hans.json
@@ -0,0 +1,6 @@
+{
+	"uni-countdown.day": "天",
+	"uni-countdown.h": "时",
+	"uni-countdown.m": "分",
+	"uni-countdown.s": "秒"
+}
diff --git a/src/uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hant.json b/src/uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hant.json
new file mode 100644
index 00000000..e5a63dea
--- /dev/null
+++ b/src/uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hant.json
@@ -0,0 +1,6 @@
+{
+	"uni-countdown.day": "天",
+	"uni-countdown.h": "時",
+	"uni-countdown.m": "分",
+	"uni-countdown.s": "秒"
+}
diff --git a/src/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue b/src/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue
new file mode 100644
index 00000000..1f8ef4eb
--- /dev/null
+++ b/src/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue
@@ -0,0 +1,271 @@
+<template>
+	<view class="uni-countdown">
+		<text v-if="showDay" :style="[timeStyle]" class="uni-countdown__number">{{ d }}</text>
+		<text v-if="showDay" :style="[splitorStyle]" class="uni-countdown__splitor">{{dayText}}</text>
+		<text :style="[timeStyle]" class="uni-countdown__number">{{ h }}</text>
+		<text :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text>
+		<text :style="[timeStyle]" class="uni-countdown__number">{{ i }}</text>
+		<text :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : minuteText }}</text>
+		<text :style="[timeStyle]" class="uni-countdown__number">{{ s }}</text>
+		<text v-if="!showColon" :style="[splitorStyle]" class="uni-countdown__splitor">{{secondText}}</text>
+	</view>
+</template>
+<script>
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {
+		t
+	} = initVueI18n(messages)
+	/**
+	 * Countdown 倒计时
+	 * @description 倒计时组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=25
+	 * @property {String} backgroundColor 背景色
+	 * @property {String} color 文字颜色
+	 * @property {Number} day 天数
+	 * @property {Number} hour 小时
+	 * @property {Number} minute 分钟
+	 * @property {Number} second 秒
+	 * @property {Number} timestamp 时间戳
+	 * @property {Boolean} showDay = [true|false] 是否显示天数
+	 * @property {Boolean} show-colon = [true|false] 是否以冒号为分隔符
+	 * @property {String} splitorColor 分割符号颜色
+	 * @event {Function} timeup 倒计时时间到触发事件
+	 * @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
+	 */
+	export default {
+		name: 'UniCountdown',
+		emits: ['timeup'],
+		props: {
+			showDay: {
+				type: Boolean,
+				default: true
+			},
+			showColon: {
+				type: Boolean,
+				default: true
+			},
+			start: {
+				type: Boolean,
+				default: true
+			},
+			backgroundColor: {
+				type: String,
+				default: ''
+			},
+			color: {
+				type: String,
+				default: '#333'
+			},
+			fontSize: {
+				type: Number,
+				default: 14
+			},
+			splitorColor: {
+				type: String,
+				default: '#333'
+			},
+			day: {
+				type: Number,
+				default: 0
+			},
+			hour: {
+				type: Number,
+				default: 0
+			},
+			minute: {
+				type: Number,
+				default: 0
+			},
+			second: {
+				type: Number,
+				default: 0
+			},
+			timestamp: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+				timer: null,
+				syncFlag: false,
+				d: '00',
+				h: '00',
+				i: '00',
+				s: '00',
+				leftTime: 0,
+				seconds: 0
+			}
+		},
+		computed: {
+			dayText() {
+				return t("uni-countdown.day")
+			},
+			hourText(val) {
+				return t("uni-countdown.h")
+			},
+			minuteText(val) {
+				return t("uni-countdown.m")
+			},
+			secondText(val) {
+				return t("uni-countdown.s")
+			},
+			timeStyle() {
+				const {
+					color,
+					backgroundColor,
+					fontSize
+				} = this
+				return {
+					color,
+					backgroundColor,
+					fontSize: `${fontSize}px`,
+					width: `${fontSize * 22 / 14}px`, // 按字体大小为 14px 时的比例缩放
+ 					lineHeight: `${fontSize * 20 / 14}px`,
+					borderRadius: `${fontSize * 3 / 14}px`,
+				}
+			},
+			splitorStyle() {
+				const { splitorColor, fontSize, backgroundColor } = this
+				return {
+					color: splitorColor,
+					fontSize: `${fontSize * 12 / 14}px`,
+					margin: backgroundColor ? `${fontSize * 4 / 14}px` : ''
+				}
+			}
+		},
+		watch: {
+			day(val) {
+				this.changeFlag()
+			},
+			hour(val) {
+				this.changeFlag()
+			},
+			minute(val) {
+				this.changeFlag()
+			},
+			second(val) {
+				this.changeFlag()
+			},
+			start: {
+				immediate: true,
+				handler(newVal, oldVal) {
+					if (newVal) {
+						this.startData();
+					} else {
+						if (!oldVal) return
+						clearInterval(this.timer)
+					}
+				}
+
+			}
+		},
+		created: function(e) {
+			this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
+			this.countDown()
+		},
+		// #ifndef VUE3
+		destroyed() {
+			clearInterval(this.timer)
+		},
+		// #endif
+		// #ifdef VUE3
+		unmounted() {
+			clearInterval(this.timer)
+		},
+		// #endif
+		methods: {
+			toSeconds(timestamp, day, hours, minutes, seconds) {
+				if (timestamp) {
+					return timestamp - parseInt(new Date().getTime() / 1000, 10)
+				}
+				return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
+			},
+			timeUp() {
+				clearInterval(this.timer)
+				this.$emit('timeup')
+			},
+			countDown() {
+				let seconds = this.seconds
+				let [day, hour, minute, second] = [0, 0, 0, 0]
+				if (seconds > 0) {
+					day = Math.floor(seconds / (60 * 60 * 24))
+					hour = Math.floor(seconds / (60 * 60)) - (day * 24)
+					minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
+					second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
+				} else {
+					this.timeUp()
+				}
+				if (day < 10) {
+					day = '0' + day
+				}
+				if (hour < 10) {
+					hour = '0' + hour
+				}
+				if (minute < 10) {
+					minute = '0' + minute
+				}
+				if (second < 10) {
+					second = '0' + second
+				}
+				this.d = day
+				this.h = hour
+				this.i = minute
+				this.s = second
+			},
+			startData() {
+				this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
+				if (this.seconds <= 0) {
+					this.seconds = this.toSeconds(0, 0, 0, 0, 0)
+					this.countDown()
+					return
+				}
+				clearInterval(this.timer)
+				this.countDown()
+				this.timer = setInterval(() => {
+					this.seconds--
+					if (this.seconds < 0) {
+						this.timeUp()
+						return
+					}
+					this.countDown()
+				}, 1000)
+			},
+			update(){
+				this.startData();
+			},
+			changeFlag() {
+				if (!this.syncFlag) {
+					this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
+					this.startData();
+					this.syncFlag = true;
+				}
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	$font-size: 14px;
+
+	.uni-countdown {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+
+		&__splitor {
+			margin: 0 2px;
+			font-size: $font-size;
+			color: #333;
+		}
+
+		&__number {
+			border-radius: 3px;
+			text-align: center;
+			font-size: $font-size;
+		}
+	}
+</style>
diff --git a/src/uni_modules/uni-countdown/package.json b/src/uni_modules/uni-countdown/package.json
new file mode 100644
index 00000000..70e99ee7
--- /dev/null
+++ b/src/uni_modules/uni-countdown/package.json
@@ -0,0 +1,86 @@
+{
+  "id": "uni-countdown",
+  "displayName": "uni-countdown 倒计时",
+  "version": "1.2.2",
+  "description": "CountDown 倒计时组件",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "countdown",
+    "倒计时"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-countdown/readme.md b/src/uni_modules/uni-countdown/readme.md
new file mode 100644
index 00000000..4bcb1aa7
--- /dev/null
+++ b/src/uni_modules/uni-countdown/readme.md
@@ -0,0 +1,10 @@
+
+
+## CountDown 倒计时
+> **组件名：uni-countdown**
+> 代码块： `uCountDown`
+
+倒计时组件。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-countdown)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-data-checkbox/changelog.md b/src/uni_modules/uni-data-checkbox/changelog.md
new file mode 100644
index 00000000..c7a468a2
--- /dev/null
+++ b/src/uni_modules/uni-data-checkbox/changelog.md
@@ -0,0 +1,45 @@
+## 1.0.3（2022-09-16）
+- 可以使用 uni-scss 控制主题色
+## 1.0.2（2022-06-30）
+- 优化 在 uni-forms 中的依赖注入方式
+## 1.0.1（2022-02-07）
+- 修复 multiple 为 true 时，v-model 的值为 null 报错的 bug
+## 1.0.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-data-checkbox](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
+## 0.2.5（2021-08-23）
+- 修复 在uni-forms中 modelValue 中不存在当前字段，当前字段必填写也不参与校验的问题
+## 0.2.4（2021-08-17）
+- 修复 单选 list 模式下 ，icon 为 left 时，选中图标不显示的问题
+## 0.2.3（2021-08-11）
+- 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
+## 0.2.2（2021-07-30）
+- 优化 在uni-forms组件，与label不对齐的问题
+## 0.2.1（2021-07-27）
+- 修复 单选默认值为0不能选中的Bug
+## 0.2.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 0.1.11（2021-07-06）
+- 优化 删除无用日志
+## 0.1.10（2021-07-05）
+- 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题
+## 0.1.9（2021-07-05）
+- 修复 nvue 黑框样式问题
+## 0.1.8（2021-06-28）
+- 修复 selectedTextColor 属性不生效的Bug
+## 0.1.7（2021-06-02）
+- 新增 map 属性，可以方便映射text/value属性
+## 0.1.6（2021-05-26）
+- 修复 不关联服务空间的情况下组件报错的Bug
+## 0.1.5（2021-05-12）
+- 新增 组件示例地址
+## 0.1.4（2021-04-09）
+- 修复 nvue 下无法选中的问题
+## 0.1.3（2021-03-22）
+- 新增 disabled属性
+## 0.1.2（2021-02-24）
+- 优化 默认颜色显示
+## 0.1.1（2021-02-24）
+- 新增 支持nvue
+## 0.1.0（2021-02-18）
+- “暂无数据”显示居中
diff --git a/src/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue b/src/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue
new file mode 100644
index 00000000..ccea7e94
--- /dev/null
+++ b/src/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue
@@ -0,0 +1,817 @@
+<template>
+	<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
+		<template v-if="!isLocal">
+			<view class="uni-data-loading">
+				<uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18" :content-text="contentText"></uni-load-more>
+				<text v-else>{{mixinDatacomErrorMessage}}</text>
+			</view>
+		</template>
+		<template v-else>
+			<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}" @change="chagne">
+				<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
+				 :style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
+					<checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''" :checked="item.selected" />
+					<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="checkbox__inner"  :style="item.styleIcon">
+						<view class="checkbox__inner-icon"></view>
+					</view>
+					<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
+						<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
+						<view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :style="item.styleBackgroud"></view>
+					</view>
+				</label>
+			</checkbox-group>
+			<radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="chagne">
+				<!-- -->
+				<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
+				 :style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
+					<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''" :checked="item.selected" />
+					<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner"
+					 :style="item.styleBackgroud">
+						<view class="radio__inner-icon" :style="item.styleIcon"></view>
+					</view>
+					<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
+						<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
+						<view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon" class="checkobx__list"></view>
+					</view>
+				</label>
+			</radio-group>
+		</template>
+	</view>
+</template>
+
+<script>
+	/**
+	 * DataChecklist 数据选择器
+	 * @description 通过数据渲染 checkbox 和 radio
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
+	 * @property {String} mode = [default| list | button | tag] 显示模式
+	 * @value default  	默认横排模式
+	 * @value list		列表模式
+	 * @value button	按钮模式
+	 * @value tag 		标签模式
+	 * @property {Boolean} multiple = [true|false] 是否多选
+	 * @property {Array|String|Number} value 默认值
+	 * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
+	 * @property {Number|String} min 最小选择个数 ，multiple为true时生效
+	 * @property {Number|String} max 最大选择个数 ，multiple为true时生效
+	 * @property {Boolean} wrap 是否换行显示
+	 * @property {String} icon = [left|right]  list 列表模式下icon显示位置
+	 * @property {Boolean} selectedColor 选中颜色
+	 * @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
+	 * @property {Boolean} selectedTextColor 选中文本颜色，如不填写则自动显示
+	 * @property {Object} map 字段映射， 默认 map={text:'text',value:'value'}
+	 * @value left 左侧显示
+	 * @value right 右侧显示
+	 * @event {Function} change  选中发生变化触发
+	 */
+
+	export default {
+		name: 'uniDataChecklist',
+		mixins: [uniCloud.mixinDatacom || {}],
+		emits:['input','update:modelValue','change'],
+		props: {
+			mode: {
+				type: String,
+				default: 'default'
+			},
+
+			multiple: {
+				type: Boolean,
+				default: false
+			},
+			value: {
+				type: [Array, String, Number],
+				default () {
+					return ''
+				}
+			},
+			// TODO vue3
+			modelValue: {
+				type: [Array, String, Number],
+				default() {
+					return '';
+				}
+			},
+			localdata: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			min: {
+				type: [Number, String],
+				default: ''
+			},
+			max: {
+				type: [Number, String],
+				default: ''
+			},
+			wrap: {
+				type: Boolean,
+				default: false
+			},
+			icon: {
+				type: String,
+				default: 'left'
+			},
+			selectedColor: {
+				type: String,
+				default: ''
+			},
+			selectedTextColor: {
+				type: String,
+				default: ''
+			},
+			emptyText:{
+				type: String,
+				default: '暂无数据'
+			},
+			disabled:{
+				type: Boolean,
+				default: false
+			},
+			map:{
+				type: Object,
+				default(){
+					return {
+						text:'text',
+						value:'value'
+					}
+				}
+			}
+		},
+		watch: {
+			localdata: {
+				handler(newVal) {
+					this.range = newVal
+					this.dataList = this.getDataList(this.getSelectedValue(newVal))
+				},
+				deep: true
+			},
+			mixinDatacomResData(newVal) {
+				this.range = newVal
+				this.dataList = this.getDataList(this.getSelectedValue(newVal))
+			},
+			value(newVal) {
+				this.dataList = this.getDataList(newVal)
+				// fix by mehaotian is_reset 在 uni-forms 中定义
+				if(!this.is_reset){
+					this.is_reset = false
+					this.formItem && this.formItem.setValue(newVal)
+				}
+			},
+			modelValue(newVal) {
+				this.dataList = this.getDataList(newVal);
+				if(!this.is_reset){
+					this.is_reset = false
+					this.formItem && this.formItem.setValue(newVal)
+				}
+			}
+		},
+		data() {
+			return {
+				dataList: [],
+				range: [],
+				contentText: {
+					contentdown: '查看更多',
+					contentrefresh: '加载中',
+					contentnomore: '没有更多'
+				},
+				isLocal:true,
+				styles: {
+					selectedColor: '#2979ff',
+					selectedTextColor: '#666',
+				},
+				isTop:0
+			};
+		},
+		computed:{
+			dataValue(){
+				if(this.value === '')return this.modelValue
+				if(this.modelValue === '') return this.value
+				return this.value
+			}
+		},
+		created() {
+			this.form = this.getForm('uniForms')
+			this.formItem = this.getForm('uniFormsItem')
+			// this.formItem && this.formItem.setValue(this.value)
+
+			if (this.formItem) {
+				this.isTop = 6
+				if (this.formItem.name) {
+					// 如果存在name添加默认值,否则formData 中不存在这个字段不校验
+					if(!this.is_reset){
+						this.is_reset = false
+						this.formItem.setValue(this.dataValue)
+					}
+					this.rename = this.formItem.name
+					this.form.inputChildrens.push(this)
+				}
+			}
+
+			if (this.localdata && this.localdata.length !== 0) {
+				this.isLocal = true
+				this.range = this.localdata
+				this.dataList = this.getDataList(this.getSelectedValue(this.range))
+			} else {
+				if (this.collection) {
+					this.isLocal = false
+					this.loadData()
+				}
+			}
+		},
+		methods: {
+			loadData() {
+				this.mixinDatacomGet().then(res=>{
+					this.mixinDatacomResData = res.result.data
+					if(this.mixinDatacomResData.length === 0){
+						this.isLocal = false
+						this.mixinDatacomErrorMessage = this.emptyText
+					}else{
+						this.isLocal = true
+					}
+				}).catch(err=>{
+					this.mixinDatacomErrorMessage = err.message
+				})
+			},
+			/**
+			 * 获取父元素实例
+			 */
+			getForm(name = 'uniForms') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+			chagne(e) {
+				const values = e.detail.value
+
+				let detail = {
+					value: [],
+					data: []
+				}
+
+				if (this.multiple) {
+					this.range.forEach(item => {
+
+						if (values.includes(item[this.map.value] + '')) {
+							detail.value.push(item[this.map.value])
+							detail.data.push(item)
+						}
+					})
+				} else {
+					const range = this.range.find(item => (item[this.map.value] + '') === values)
+					if (range) {
+						detail = {
+							value: range[this.map.value],
+							data: range
+						}
+					}
+				}
+				this.formItem && this.formItem.setValue(detail.value)
+				// TODO 兼容 vue2
+				this.$emit('input', detail.value);
+				// // TOTO 兼容 vue3
+				this.$emit('update:modelValue', detail.value);
+				this.$emit('change', {
+					detail
+				})
+				if (this.multiple) {
+					// 如果 v-model 没有绑定 ，则走内部逻辑
+					// if (this.value.length === 0) {
+					this.dataList = this.getDataList(detail.value, true)
+					// }
+				} else {
+					this.dataList = this.getDataList(detail.value)
+				}
+			},
+
+			/**
+			 * 获取渲染的新数组
+			 * @param {Object} value 选中内容
+			 */
+			getDataList(value) {
+				// 解除引用关系，破坏原引用关系，避免污染源数据
+				let dataList = JSON.parse(JSON.stringify(this.range))
+				let list = []
+				if (this.multiple) {
+					if (!Array.isArray(value)) {
+						value = []
+					}
+				}
+				dataList.forEach((item, index) => {
+					item.disabled = item.disable || item.disabled || false
+					if (this.multiple) {
+						if (value.length > 0) {
+							let have = value.find(val => val === item[this.map.value])
+							item.selected = have !== undefined
+						} else {
+							item.selected = false
+						}
+					} else {
+						item.selected = value === item[this.map.value]
+					}
+
+					list.push(item)
+				})
+				return this.setRange(list)
+			},
+			/**
+			 * 处理最大最小值
+			 * @param {Object} list
+			 */
+			setRange(list) {
+				let selectList = list.filter(item => item.selected)
+				let min = Number(this.min) || 0
+				let max = Number(this.max) || ''
+				list.forEach((item, index) => {
+					if (this.multiple) {
+						if (selectList.length <= min) {
+							let have = selectList.find(val => val[this.map.value] === item[this.map.value])
+							if (have !== undefined) {
+								item.disabled = true
+							}
+						}
+
+						if (selectList.length >= max && max !== '') {
+							let have = selectList.find(val => val[this.map.value] === item[this.map.value])
+							if (have === undefined) {
+								item.disabled = true
+							}
+						}
+					}
+					this.setStyles(item, index)
+					list[index] = item
+				})
+				return list
+			},
+			/**
+			 * 设置 class
+			 * @param {Object} item
+			 * @param {Object} index
+			 */
+			setStyles(item, index) {
+				//  设置自定义样式
+				item.styleBackgroud = this.setStyleBackgroud(item)
+				item.styleIcon = this.setStyleIcon(item)
+				item.styleIconText = this.setStyleIconText(item)
+				item.styleRightIcon = this.setStyleRightIcon(item)
+			},
+
+			/**
+			 * 获取选中值
+			 * @param {Object} range
+			 */
+			getSelectedValue(range) {
+				if (!this.multiple) return this.dataValue
+				let selectedArr = []
+				range.forEach((item) => {
+					if (item.selected) {
+						selectedArr.push(item[this.map.value])
+					}
+				})
+				return this.dataValue && this.dataValue.length > 0 ? this.dataValue : selectedArr
+			},
+
+			/**
+			 * 设置背景样式
+			 */
+			setStyleBackgroud(item) {
+				let styles = {}
+				let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
+				if (this.mode !== 'list') {
+					styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
+				}
+				if (this.mode === 'tag') {
+					styles['background-color'] = item.selected? selectedColor:'#f5f5f5'
+				}
+				let classles = ''
+				for (let i in styles) {
+					classles += `${i}:${styles[i]};`
+				}
+				return classles
+			},
+			setStyleIcon(item) {
+				let styles = {}
+				let classles = ''
+				let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
+				styles['background-color'] = item.selected?selectedColor:'#fff'
+				styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
+
+				if(!item.selected && item.disabled){
+					styles['background-color'] = '#F2F6FC'
+					styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
+				}
+
+				for (let i in styles) {
+					classles += `${i}:${styles[i]};`
+				}
+				return classles
+			},
+			setStyleIconText(item) {
+				let styles = {}
+				let classles = ''
+				let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
+				if (this.mode === 'tag') {
+					styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:'#fff'):'#666'
+				} else {
+					styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:selectedColor):'#666'
+				}
+				if(!item.selected && item.disabled){
+					styles.color = '#999'
+				}
+
+				for (let i in styles) {
+					classles += `${i}:${styles[i]};`
+				}
+				return classles
+			},
+			setStyleRightIcon(item) {
+				let styles = {}
+				let classles = ''
+				if (this.mode === 'list') {
+					styles['border-color'] = item.selected?this.styles.selectedColor:'#DCDFE6'
+				}
+				for (let i in styles) {
+					classles += `${i}:${styles[i]};`
+				}
+
+				return classles
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$checked-color: #2979ff;
+	$border-color: #DCDFE6;
+	$disable:0.4;
+
+	@mixin flex {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+	}
+
+	.uni-data-loading {
+		@include flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 36px;
+		padding-left: 10px;
+		color: #999;
+	}
+
+	.uni-data-checklist {
+		position: relative;
+		z-index: 0;
+		flex: 1;
+		// 多选样式
+		.checklist-group {
+			@include flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+
+			&.is-list {
+				flex-direction: column;
+			}
+
+			.checklist-box {
+				@include flex;
+				flex-direction: row;
+				align-items: center;
+				position: relative;
+				margin: 5px 0;
+				margin-right: 25px;
+
+				.hidden {
+					position: absolute;
+					opacity: 0;
+				}
+
+				// 文字样式
+				.checklist-content {
+					@include flex;
+					flex: 1;
+					flex-direction: row;
+					align-items: center;
+					justify-content: space-between;
+					.checklist-text {
+						font-size: 14px;
+						color: #666;
+						margin-left: 5px;
+						line-height: 14px;
+					}
+
+					.checkobx__list {
+						border-right-width: 1px;
+						border-right-color: #007aff;
+						border-right-style: solid;
+						border-bottom-width:1px;
+						border-bottom-color: #007aff;
+						border-bottom-style: solid;
+						height: 12px;
+						width: 6px;
+						left: -5px;
+						transform-origin: center;
+						transform: rotate(45deg);
+						opacity: 0;
+					}
+				}
+
+				// 多选样式
+				.checkbox__inner {
+					/* #ifndef APP-NVUE */
+					flex-shrink: 0;
+					box-sizing: border-box;
+					/* #endif */
+					position: relative;
+					width: 16px;
+					height: 16px;
+					border: 1px solid $border-color;
+					border-radius: 4px;
+					background-color: #fff;
+					z-index: 1;
+					.checkbox__inner-icon {
+						position: absolute;
+						/* #ifdef APP-NVUE */
+						top: 2px;
+						/* #endif */
+						/* #ifndef APP-NVUE */
+						top: 1px;
+						/* #endif */
+						left: 5px;
+						height: 8px;
+						width: 4px;
+						border-right-width: 1px;
+						border-right-color: #fff;
+						border-right-style: solid;
+						border-bottom-width:1px ;
+						border-bottom-color: #fff;
+						border-bottom-style: solid;
+						opacity: 0;
+						transform-origin: center;
+						transform: rotate(40deg);
+					}
+				}
+
+				// 单选样式
+				.radio__inner {
+					@include flex;
+					/* #ifndef APP-NVUE */
+					flex-shrink: 0;
+					box-sizing: border-box;
+					/* #endif */
+					justify-content: center;
+					align-items: center;
+					position: relative;
+					width: 16px;
+					height: 16px;
+					border: 1px solid $border-color;
+					border-radius: 16px;
+					background-color: #fff;
+					z-index: 1;
+
+					.radio__inner-icon {
+						width: 8px;
+						height: 8px;
+						border-radius: 10px;
+						opacity: 0;
+					}
+				}
+
+				// 默认样式
+				&.is--default {
+
+					// 禁用
+					&.is-disable {
+						/* #ifdef H5 */
+						cursor: not-allowed;
+						/* #endif */
+						.checkbox__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+							/* #ifdef H5 */
+							cursor: not-allowed;
+							/* #endif */
+						}
+
+						.radio__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+						}
+						.checklist-text {
+							color: #999;
+						}
+					}
+
+					// 选中
+					&.is-checked {
+						.checkbox__inner {
+							border-color: $checked-color;
+							background-color: $checked-color;
+
+							.checkbox__inner-icon {
+								opacity: 1;
+								transform: rotate(45deg);
+							}
+						}
+						.radio__inner {
+							border-color: $checked-color;
+							.radio__inner-icon {
+								opacity: 1;
+								background-color: $checked-color;
+							}
+						}
+						.checklist-text {
+							color: $checked-color;
+						}
+						// 选中禁用
+						&.is-disable {
+							.checkbox__inner {
+								opacity: $disable;
+							}
+
+							.checklist-text {
+								opacity: $disable;
+							}
+							.radio__inner {
+								opacity: $disable;
+							}
+						}
+					}
+				}
+
+				// 按钮样式
+				&.is--button {
+					margin-right: 10px;
+					padding: 5px 10px;
+					border: 1px $border-color solid;
+					border-radius: 3px;
+					transition: border-color 0.2s;
+
+					// 禁用
+					&.is-disable {
+						/* #ifdef H5 */
+						cursor: not-allowed;
+						/* #endif */
+						border: 1px #eee solid;
+						opacity: $disable;
+						.checkbox__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+							/* #ifdef H5 */
+							cursor: not-allowed;
+							/* #endif */
+						}
+						.radio__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+							/* #ifdef H5 */
+							cursor: not-allowed;
+							/* #endif */
+						}
+						.checklist-text {
+							color: #999;
+						}
+					}
+
+					&.is-checked {
+						border-color: $checked-color;
+						.checkbox__inner {
+							border-color: $checked-color;
+							background-color: $checked-color;
+							.checkbox__inner-icon {
+								opacity: 1;
+								transform: rotate(45deg);
+							}
+						}
+
+						.radio__inner {
+							border-color: $checked-color;
+
+							.radio__inner-icon {
+								opacity: 1;
+								background-color: $checked-color;
+							}
+						}
+
+						.checklist-text {
+							color: $checked-color;
+						}
+
+						// 选中禁用
+						&.is-disable {
+							opacity: $disable;
+						}
+					}
+				}
+
+				// 标签样式
+				&.is--tag {
+					margin-right: 10px;
+					padding: 5px 10px;
+					border: 1px $border-color solid;
+					border-radius: 3px;
+					background-color: #f5f5f5;
+
+					.checklist-text {
+						margin: 0;
+						color: #666;
+					}
+
+					// 禁用
+					&.is-disable {
+						/* #ifdef H5 */
+						cursor: not-allowed;
+						/* #endif */
+						opacity: $disable;
+					}
+
+					&.is-checked {
+						background-color: $checked-color;
+						border-color: $checked-color;
+
+						.checklist-text {
+							color: #fff;
+						}
+					}
+				}
+				// 列表样式
+				&.is--list {
+					/* #ifndef APP-NVUE */
+					display: flex;
+					/* #endif */
+					padding: 10px 15px;
+					padding-left: 0;
+					margin: 0;
+
+					&.is-list-border {
+						border-top: 1px #eee solid;
+					}
+
+					// 禁用
+					&.is-disable {
+						/* #ifdef H5 */
+						cursor: not-allowed;
+						/* #endif */
+						.checkbox__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+							/* #ifdef H5 */
+							cursor: not-allowed;
+							/* #endif */
+						}
+						.checklist-text {
+							color: #999;
+						}
+					}
+
+					&.is-checked {
+						.checkbox__inner {
+							border-color: $checked-color;
+							background-color: $checked-color;
+
+							.checkbox__inner-icon {
+								opacity: 1;
+								transform: rotate(45deg);
+							}
+						}
+						.radio__inner {
+							.radio__inner-icon {
+								opacity: 1;
+							}
+						}
+						.checklist-text {
+							color: $checked-color;
+						}
+
+						.checklist-content {
+							.checkobx__list {
+								opacity: 1;
+								border-color: $checked-color;
+							}
+						}
+
+						// 选中禁用
+						&.is-disable {
+							.checkbox__inner {
+								opacity: $disable;
+							}
+
+							.checklist-text {
+								opacity: $disable;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/uni_modules/uni-data-checkbox/package.json b/src/uni_modules/uni-data-checkbox/package.json
new file mode 100644
index 00000000..113c3505
--- /dev/null
+++ b/src/uni_modules/uni-data-checkbox/package.json
@@ -0,0 +1,84 @@
+{
+  "id": "uni-data-checkbox",
+  "displayName": "uni-data-checkbox 数据选择器",
+  "version": "1.0.3",
+  "description": "通过数据驱动的单选框和复选框",
+  "keywords": [
+    "uni-ui",
+    "checkbox",
+    "单选",
+    "多选",
+    "单选多选"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.1"
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-load-more","uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/src/uni_modules/uni-data-checkbox/readme.md b/src/uni_modules/uni-data-checkbox/readme.md
new file mode 100644
index 00000000..6eb253d4
--- /dev/null
+++ b/src/uni_modules/uni-data-checkbox/readme.md
@@ -0,0 +1,18 @@
+
+
+## DataCheckbox 数据驱动的单选复选框
+> **组件名：uni-data-checkbox**
+> 代码块： `uDataCheckbox`
+
+
+本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括：
+
+1. 数据绑定型组件：给本组件绑定一个data，会自动渲染一组候选内容。再以往，开发者需要编写不少代码实现类似功能
+2. 自动的表单校验：组件绑定了data，且符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)组件的表单校验规范，搭配使用会自动实现表单校验
+3. 本组件合并了单选多选
+4. 本组件有若干风格选择，如普通的单选多选框、并列button风格、tag风格。开发者可以快速选择需要的风格。但作为一个封装组件，样式代码虽然不用自己写了，却会牺牲一定的样式自定义性
+
+在uniCloud开发中，`DB Schema`中配置了enum枚举等类型后，在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中，会自动生成``uni-data-checkbox``组件并绑定好data
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-data-picker/changelog.md b/src/uni_modules/uni-data-picker/changelog.md
new file mode 100644
index 00000000..0c45f8f5
--- /dev/null
+++ b/src/uni_modules/uni-data-picker/changelog.md
@@ -0,0 +1,58 @@
+## 1.0.4（2022-04-19）
+- 修复 字节小程序 本地数据无法选择下一级的Bug
+## 1.0.3（2022-02-25）
+- 修复 nvue 不支持的 v-show 的 bug
+## 1.0.2（2022-02-25）
+- 修复 条件编译 nvue 不支持的 css 样式
+## 1.0.1（2021-11-23）
+- 修复 由上个版本引发的map、v-model等属性不生效的bug
+## 1.0.0（2021-11-19）
+- 优化 组件 UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-data-picker](https://uniapp.dcloud.io/component/uniui/uni-data-picker)
+## 0.4.9（2021-10-28）
+- 修复 VUE2 v-model 概率无效的 bug
+## 0.4.8（2021-10-27）
+- 修复 v-model 概率无效的 bug
+## 0.4.7（2021-10-25）
+- 新增 属性 spaceInfo 服务空间配置 HBuilderX 3.2.11+
+- 修复 树型 uniCloud 数据类型为 int 时报错的 bug
+## 0.4.6（2021-10-19）
+- 修复 非 VUE3 v-model 为 0 时无法选中的 bug
+## 0.4.5（2021-09-26）
+- 新增 清除已选项的功能（通过 clearIcon 属性配置是否显示按钮），同时提供 clear 方法以供调用，二者等效
+- 修复 readonly 为 true 时报错的 bug
+## 0.4.4（2021-09-26）
+- 修复 上一版本造成的 map 属性失效的 bug
+- 新增 ellipsis 属性，支持配置 tab 选项长度过长时是否自动省略
+## 0.4.3（2021-09-24）
+- 修复 某些情况下级联未触发的 bug
+## 0.4.2（2021-09-23）
+- 新增 提供 show 和 hide 方法，开发者可以通过 ref 调用
+- 新增 选项内容过长自动添加省略号
+## 0.4.1（2021-09-15）
+- 新增 map 属性 字段映射，将 text/value 映射到数据中的其他字段
+## 0.4.0（2021-07-13）
+- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 0.3.5（2021-06-04）
+- 修复 无法加载云端数据的问题
+## 0.3.4（2021-05-28）
+- 修复 v-model 无效问题
+- 修复 loaddata 为空数据组时加载时间过长问题
+- 修复 上个版本引出的本地数据无法选择带有 children 的 2 级节点
+## 0.3.3（2021-05-12）
+- 新增 组件示例地址
+## 0.3.2（2021-04-22）
+- 修复 非树形数据有 where 属性查询报错的问题
+## 0.3.1（2021-04-15）
+- 修复 本地数据概率无法回显时问题
+## 0.3.0（2021-04-07）
+- 新增 支持云端非树形表结构数据
+- 修复 根节点 parent_field 字段等于 null 时选择界面错乱问题
+## 0.2.0（2021-03-15）
+- 修复 nodeclick、popupopened、popupclosed 事件无法触发的问题
+## 0.1.9（2021-03-09）
+- 修复 微信小程序某些情况下无法选择的问题
+## 0.1.8（2021-02-05）
+- 优化 部分样式在 nvue 上的兼容表现
+## 0.1.7（2021-02-05）
+- 调整为 uni_modules 目录规范
diff --git a/src/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js b/src/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js
new file mode 100644
index 00000000..6ef26a26
--- /dev/null
+++ b/src/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js
@@ -0,0 +1,45 @@
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    this.$once('hook:beforeDestroy', () => {
+      document.removeEventListener('keyup', listener)
+    })
+  },
+	render: () => {}
+}
+// #endif
diff --git a/src/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue b/src/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue
new file mode 100644
index 00000000..a55c2a4e
--- /dev/null
+++ b/src/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue
@@ -0,0 +1,539 @@
+<template>
+	<view class="uni-data-tree">
+		<view class="uni-data-tree-input" @click="handleInput">
+			<slot :options="options" :data="inputSelected" :error="errorMessage">
+				<view class="input-value" :class="{'input-value-border': border}">
+					<text v-if="errorMessage" class="selected-area error-text">{{errorMessage}}</text>
+					<view v-else-if="loading && !isOpened" class="selected-area">
+						<uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
+					</view>
+					<scroll-view v-else-if="inputSelected.length" class="selected-area" scroll-x="true">
+						<view class="selected-list">
+							<view class="selected-item" v-for="(item,index) in inputSelected" :key="index">
+								<text>{{item.text}}</text><text v-if="index<inputSelected.length-1"
+									class="input-split-line">{{split}}</text>
+							</view>
+						</view>
+					</scroll-view>
+					<text v-else class="selected-area placeholder">{{placeholder}}</text>
+					<view v-if="clearIcon && !readonly && inputSelected.length" class="icon-clear"
+						@click.stop="clear">
+						<uni-icons type="clear" color="#e1e1e1" size="14"></uni-icons>
+					</view>
+					<view class="arrow-area" v-if="(!clearIcon || !inputSelected.length) && !readonly ">
+						<view class="input-arrow"></view>
+					</view>
+				</view>
+			</slot>
+		</view>
+		<view class="uni-data-tree-cover" v-if="isOpened" @click="handleClose"></view>
+		<view class="uni-data-tree-dialog" v-if="isOpened">
+			<view class="uni-popper__arrow"></view>
+			<view class="dialog-caption">
+				<view class="title-area">
+					<text class="dialog-title">{{popupTitle}}</text>
+				</view>
+				<view class="dialog-close" @click="handleClose">
+					<view class="dialog-close-plus" data-id="close"></view>
+					<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
+				</view>
+			</view>
+			<data-picker-view class="picker-view" ref="pickerView" v-model="dataValue" :localdata="localdata"
+				:preload="preload" :collection="collection" :field="field" :orderby="orderby" :where="where"
+				:step-searh="stepSearh" :self-field="selfField" :parent-field="parentField" :managed-mode="true"
+				:map="map" :ellipsis="ellipsis" @change="onchange" @datachange="ondatachange" @nodeclick="onnodeclick">
+			</data-picker-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import dataPicker from "../uni-data-pickerview/uni-data-picker.js"
+	import DataPickerView from "../uni-data-pickerview/uni-data-pickerview.vue"
+
+	/**
+	 * DataPicker 级联选择
+	 * @description 支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3796
+	 * @property {String} popup-title 弹出窗口标题
+	 * @property {Array} localdata 本地数据，参考
+	 * @property {Boolean} border = [true|false] 是否有边框
+	 * @property {Boolean} readonly = [true|false] 是否仅读
+	 * @property {Boolean} preload = [true|false] 是否预加载数据
+	 * @value true 开启预加载数据，点击弹出窗口后显示已加载数据
+	 * @value false 关闭预加载数据，点击弹出窗口后开始加载数据
+	 * @property {Boolean} step-searh = [true|false] 是否分布查询
+	 * @value true 启用分布查询，仅查询当前选中节点
+	 * @value false 关闭分布查询，一次查询出所有数据
+	 * @property {String|DBFieldString} self-field 分布查询当前字段名称
+	 * @property {String|DBFieldString} parent-field 分布查询父字段名称
+	 * @property {String|DBCollectionString} collection 表名
+	 * @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
+	 * @property {String} orderby 排序字段及正序倒叙设置
+	 * @property {String|JQLString} where 查询条件
+	 * @event {Function} popupshow 弹出的选择窗口打开时触发此事件
+	 * @event {Function} popuphide 弹出的选择窗口关闭时触发此事件
+	 */
+	export default {
+		name: 'UniDataPicker',
+		emits: ['popupopened', 'popupclosed', 'nodeclick', 'input', 'change', 'update:modelValue'],
+		mixins: [dataPicker],
+		components: {
+			DataPickerView
+		},
+		props: {
+			options: {
+				type: [Object, Array],
+				default () {
+					return {}
+				}
+			},
+			popupTitle: {
+				type: String,
+				default: '请选择'
+			},
+			placeholder: {
+				type: String,
+				default: '请选择'
+			},
+			heightMobile: {
+				type: String,
+				default: ''
+			},
+			readonly: {
+				type: Boolean,
+				default: false
+			},
+			clearIcon: {
+				type: Boolean,
+				default: true
+			},
+			border: {
+				type: Boolean,
+				default: true
+			},
+			split: {
+				type: String,
+				default: '/'
+			},
+			ellipsis: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				isOpened: false,
+				inputSelected: []
+			}
+		},
+		created() {
+			this.form = this.getForm('uniForms')
+			this.formItem = this.getForm('uniFormsItem')
+			if (this.formItem) {
+				if (this.formItem.name) {
+					this.rename = this.formItem.name
+					this.form.inputChildrens.push(this)
+				}
+			}
+
+			this.$nextTick(() => {
+				this.load()
+			})
+		},
+		methods: {
+			clear() {
+				this.inputSelected.splice(0)
+				this._dispatchEvent([])
+			},
+			onPropsChange() {
+				this._treeData = []
+				this.selectedIndex = 0
+				this.load()
+			},
+			load() {
+				if (this.readonly) {
+					this._processReadonly(this.localdata, this.dataValue)
+					return
+				}
+
+				if (this.isLocaldata) {
+					this.loadData()
+					this.inputSelected = this.selected.slice(0)
+				} else if (!this.parentField && !this.selfField && this.hasValue) {
+					this.getNodeData(() => {
+						this.inputSelected = this.selected.slice(0)
+					})
+				} else if (this.hasValue) {
+					this.getTreePath(() => {
+						this.inputSelected = this.selected.slice(0)
+					})
+				}
+			},
+			getForm(name = 'uniForms') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false;
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+			show() {
+				this.isOpened = true
+				setTimeout(() => {
+					this.$refs.pickerView.updateData({
+						treeData: this._treeData,
+						selected: this.selected,
+						selectedIndex: this.selectedIndex
+					})
+				}, 200)
+				this.$emit('popupopened')
+			},
+			hide() {
+				this.isOpened = false
+				this.$emit('popupclosed')
+			},
+			handleInput() {
+				if (this.readonly) {
+					return
+				}
+				this.show()
+			},
+			handleClose(e) {
+				this.hide()
+			},
+			onnodeclick(e) {
+				this.$emit('nodeclick', e)
+			},
+			ondatachange(e) {
+				this._treeData = this.$refs.pickerView._treeData
+			},
+			onchange(e) {
+				this.hide()
+				this.inputSelected = e
+				this._dispatchEvent(e)
+			},
+			_processReadonly(dataList, value) {
+				var isTree = dataList.findIndex((item) => {
+					return item.children
+				})
+				if (isTree > -1) {
+					let inputValue
+					if (Array.isArray(value)) {
+						inputValue = value[value.length - 1]
+						if (typeof inputValue === 'object' && inputValue.value) {
+							inputValue = inputValue.value
+						}
+					} else {
+						inputValue = value
+					}
+					this.inputSelected = this._findNodePath(inputValue, this.localdata)
+					return
+				}
+
+				if (!this.hasValue) {
+					this.inputSelected = []
+					return
+				}
+
+				let result = []
+				for (let i = 0; i < value.length; i++) {
+					var val = value[i]
+					var item = dataList.find((v) => {
+						return v.value == val
+					})
+					if (item) {
+						result.push(item)
+					}
+				}
+				if (result.length) {
+					this.inputSelected = result
+				}
+			},
+			_filterForArray(data, valueArray) {
+				var result = []
+				for (let i = 0; i < valueArray.length; i++) {
+					var value = valueArray[i]
+					var found = data.find((item) => {
+						return item.value == value
+					})
+					if (found) {
+						result.push(found)
+					}
+				}
+				return result
+			},
+			_dispatchEvent(selected) {
+				let item = {}
+				if (selected.length) {
+					var value = new Array(selected.length)
+					for (var i = 0; i < selected.length; i++) {
+						value[i] = selected[i].value
+					}
+					item = selected[selected.length - 1]
+				} else {
+					item.value = ''
+				}
+				if (this.formItem) {
+					this.formItem.setValue(item.value)
+				}
+
+				this.$emit('input', item.value)
+				this.$emit('update:modelValue', item.value)
+				this.$emit('change', {
+					detail: {
+						value: selected
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style >
+	.uni-data-tree {
+		position: relative;
+		font-size: 14px;
+	}
+
+	.error-text {
+		color: #DD524D;
+	}
+
+	.input-value {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		flex-wrap: nowrap;
+		font-size: 14px;
+		line-height: 38px;
+		padding: 0 5px;
+		overflow: hidden;
+		/* #ifdef APP-NVUE */
+		height: 40px;
+		/* #endif */
+	}
+
+	.input-value-border {
+		border: 1px solid #e5e5e5;
+		border-radius: 5px;
+	}
+
+	.selected-area {
+		flex: 1;
+		overflow: hidden;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.load-more {
+		/* #ifndef APP-NVUE */
+		margin-right: auto;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		width: 40px;
+		/* #endif */
+	}
+
+	.selected-list {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex-wrap: nowrap;
+		padding: 0 5px;
+	}
+
+	.selected-item {
+		flex-direction: row;
+		padding: 0 1px;
+		/* #ifndef APP-NVUE */
+		white-space: nowrap;
+		/* #endif */
+	}
+
+	.placeholder {
+		color: grey;
+	}
+
+	.input-split-line {
+		opacity: .5;
+	}
+
+	.arrow-area {
+		position: relative;
+		width: 20px;
+		/* #ifndef APP-NVUE */
+		margin-bottom: 5px;
+		margin-left: auto;
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		transform: rotate(-45deg);
+		transform-origin: center;
+	}
+
+	.input-arrow {
+		width: 7px;
+		height: 7px;
+		border-left: 1px solid #999;
+		border-bottom: 1px solid #999;
+	}
+
+	.uni-data-tree-cover {
+		position: fixed;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, .4);
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		z-index: 100;
+	}
+
+	.uni-data-tree-dialog {
+		position: fixed;
+		left: 0;
+		top: 20%;
+		right: 0;
+		bottom: 0;
+		background-color: #FFFFFF;
+		border-top-left-radius: 10px;
+		border-top-right-radius: 10px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		z-index: 102;
+		overflow: hidden;
+		/* #ifdef APP-NVUE */
+		width: 750rpx;
+		/* #endif */
+	}
+
+	.dialog-caption {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		/* border-bottom: 1px solid #f0f0f0; */
+	}
+
+	.title-area {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		align-items: center;
+		/* #ifndef APP-NVUE */
+		margin: auto;
+		/* #endif */
+		padding: 0 10px;
+	}
+
+	.dialog-title {
+		/* font-weight: bold; */
+		line-height: 44px;
+	}
+
+	.dialog-close {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		padding: 0 15px;
+	}
+
+	.dialog-close-plus {
+		width: 16px;
+		height: 2px;
+		background-color: #666;
+		border-radius: 2px;
+		transform: rotate(45deg);
+	}
+
+	.dialog-close-rotate {
+		position: absolute;
+		transform: rotate(-45deg);
+	}
+
+	.picker-view {
+		flex: 1;
+		overflow: hidden;
+	}
+
+	/* #ifdef H5 */
+	@media all and (min-width: 768px) {
+		.uni-data-tree-cover {
+			background-color: transparent;
+		}
+
+		.uni-data-tree-dialog {
+			position: absolute;
+			top: 55px;
+			height: auto;
+			min-height: 400px;
+			max-height: 50vh;
+			background-color: #fff;
+			border: 1px solid #EBEEF5;
+			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+			border-radius: 4px;
+			overflow: unset;
+		}
+
+		.dialog-caption {
+			display: none;
+		}
+
+		.icon-clear {
+			margin-right: 5px;
+		}
+	}
+
+	/* #endif */
+
+	/* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
+	/* #ifndef APP-NVUE */
+	.uni-popper__arrow,
+	.uni-popper__arrow::after {
+		position: absolute;
+		display: block;
+		width: 0;
+		height: 0;
+		border-color: transparent;
+		border-style: solid;
+		border-width: 6px;
+	}
+
+	.uni-popper__arrow {
+		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+		top: -6px;
+		left: 10%;
+		margin-right: 3px;
+		border-top-width: 0;
+		border-bottom-color: #EBEEF5;
+	}
+
+	.uni-popper__arrow::after {
+		content: " ";
+		top: 1px;
+		margin-left: -6px;
+		border-top-width: 0;
+		border-bottom-color: #fff;
+	}
+	/* #endif */
+	</style>
diff --git a/src/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-picker.js b/src/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-picker.js
new file mode 100644
index 00000000..c12fd54b
--- /dev/null
+++ b/src/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-picker.js
@@ -0,0 +1,563 @@
+export default {
+  props: {
+    localdata: {
+      type: [Array, Object],
+      default () {
+        return []
+      }
+    },
+    spaceInfo: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    collection: {
+      type: String,
+      default: ''
+    },
+    action: {
+      type: String,
+      default: ''
+    },
+    field: {
+      type: String,
+      default: ''
+    },
+    orderby: {
+      type: String,
+      default: ''
+    },
+    where: {
+      type: [String, Object],
+      default: ''
+    },
+    pageData: {
+      type: String,
+      default: 'add'
+    },
+    pageCurrent: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    getcount: {
+      type: [Boolean, String],
+      default: false
+    },
+    getone: {
+      type: [Boolean, String],
+      default: false
+    },
+    gettree: {
+      type: [Boolean, String],
+      default: false
+    },
+    manual: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: [Array, String, Number],
+      default () {
+        return []
+      }
+    },
+    modelValue: {
+      type: [Array, String, Number],
+      default () {
+        return []
+      }
+    },
+    preload: {
+      type: Boolean,
+      default: false
+    },
+    stepSearh: {
+      type: Boolean,
+      default: true
+    },
+    selfField: {
+      type: String,
+      default: ''
+    },
+    parentField: {
+      type: String,
+      default: ''
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    map: {
+      type: Object,
+      default() {
+        return {
+          text: "text",
+          value: "value"
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      errorMessage: '',
+      loadMore: {
+        contentdown: '',
+        contentrefresh: '',
+        contentnomore: ''
+      },
+      dataList: [],
+      selected: [],
+      selectedIndex: 0,
+      page: {
+        current: this.pageCurrent,
+        size: this.pageSize,
+        count: 0
+      }
+    }
+  },
+  computed: {
+    isLocaldata() {
+      return !this.collection.length
+    },
+    postField() {
+      let fields = [this.field];
+      if (this.parentField) {
+        fields.push(`${this.parentField} as parent_value`);
+      }
+      return fields.join(',');
+    },
+    dataValue() {
+      let isModelValue = Array.isArray(this.modelValue) ? (this.modelValue.length > 0) : (this.modelValue !== null || this.modelValue !== undefined)
+      return isModelValue ? this.modelValue : this.value
+    },
+    hasValue() {
+      if (typeof this.dataValue === 'number') {
+        return true
+      }
+      return (this.dataValue != null) && (this.dataValue.length > 0)
+    }
+  },
+  created() {
+    this.$watch(() => {
+      var al = [];
+      ['pageCurrent',
+        'pageSize',
+        'spaceInfo',
+        'value',
+        'modelValue',
+        'localdata',
+        'collection',
+        'action',
+        'field',
+        'orderby',
+        'where',
+        'getont',
+        'getcount',
+        'gettree'
+      ].forEach(key => {
+        al.push(this[key])
+      });
+      return al
+    }, (newValue, oldValue) => {
+      let needReset = false
+      for (let i = 2; i < newValue.length; i++) {
+        if (newValue[i] != oldValue[i]) {
+          needReset = true
+          break
+        }
+      }
+      if (newValue[0] != oldValue[0]) {
+        this.page.current = this.pageCurrent
+      }
+      this.page.size = this.pageSize
+
+      this.onPropsChange()
+    })
+    this._treeData = []
+  },
+  methods: {
+    onPropsChange() {
+      this._treeData = []
+    },
+    getCommand(options = {}) {
+      /* eslint-disable no-undef */
+      let db = uniCloud.database(this.spaceInfo)
+
+      const action = options.action || this.action
+      if (action) {
+        db = db.action(action)
+      }
+
+      const collection = options.collection || this.collection
+      db = db.collection(collection)
+
+      const where = options.where || this.where
+      if (!(!where || !Object.keys(where).length)) {
+        db = db.where(where)
+      }
+
+      const field = options.field || this.field
+      if (field) {
+        db = db.field(field)
+      }
+
+      const orderby = options.orderby || this.orderby
+      if (orderby) {
+        db = db.orderBy(orderby)
+      }
+
+      const current = options.pageCurrent !== undefined ? options.pageCurrent : this.page.current
+      const size = options.pageSize !== undefined ? options.pageSize : this.page.size
+      const getCount = options.getcount !== undefined ? options.getcount : this.getcount
+      const getTree = options.gettree !== undefined ? options.gettree : this.gettree
+
+      const getOptions = {
+        getCount,
+        getTree
+      }
+      if (options.getTreePath) {
+        getOptions.getTreePath = options.getTreePath
+      }
+
+      db = db.skip(size * (current - 1)).limit(size).get(getOptions)
+
+      return db
+    },
+		getNodeData(callback) {
+		  if (this.loading) {
+		    return
+		  }
+		  this.loading = true
+		  this.getCommand({
+		    field: this.postField,
+				where: this._pathWhere()
+		  }).then((res) => {
+		    this.loading = false
+		    this.selected = res.result.data
+		    callback && callback()
+		  }).catch((err) => {
+		    this.loading = false
+		    this.errorMessage = err
+		  })
+		},
+    getTreePath(callback) {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+
+      this.getCommand({
+        field: this.postField,
+        getTreePath: {
+          startWith: `${this.selfField}=='${this.dataValue}'`
+        }
+      }).then((res) => {
+        this.loading = false
+        let treePath = []
+        this._extractTreePath(res.result.data, treePath)
+        this.selected = treePath
+        callback && callback()
+      }).catch((err) => {
+        this.loading = false
+        this.errorMessage = err
+      })
+    },
+    loadData() {
+      if (this.isLocaldata) {
+        this._processLocalData()
+        return
+      }
+
+      if (this.dataValue != null) {
+        this._loadNodeData((data) => {
+          this._treeData = data
+          this._updateBindData()
+          this._updateSelected()
+        })
+        return
+      }
+
+      if (this.stepSearh) {
+        this._loadNodeData((data) => {
+          this._treeData = data
+          this._updateBindData()
+        })
+      } else {
+        this._loadAllData((data) => {
+          this._treeData = []
+          this._extractTree(data, this._treeData, null)
+          this._updateBindData()
+        })
+      }
+    },
+    _loadAllData(callback) {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+
+      this.getCommand({
+        field: this.postField,
+        gettree: true,
+        startwith: `${this.selfField}=='${this.dataValue}'`
+      }).then((res) => {
+        this.loading = false
+        callback(res.result.data)
+        this.onDataChange()
+      }).catch((err) => {
+        this.loading = false
+        this.errorMessage = err
+      })
+    },
+    _loadNodeData(callback, pw) {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+
+      this.getCommand({
+        field: this.postField,
+        where: pw || this._postWhere(),
+        pageSize: 500
+      }).then((res) => {
+        this.loading = false
+        callback(res.result.data)
+        this.onDataChange()
+      }).catch((err) => {
+        this.loading = false
+        this.errorMessage = err
+      })
+    },
+    _pathWhere() {
+      let result = []
+      let where_field = this._getParentNameByField();
+      if (where_field) {
+        result.push(`${where_field} == '${this.dataValue}'`)
+      }
+
+      if (this.where) {
+        return `(${this.where}) && (${result.join(' || ')})`
+      }
+
+      return result.join(' || ')
+    },
+    _postWhere() {
+      let result = []
+      let selected = this.selected
+      let parentField = this.parentField
+      if (parentField) {
+        result.push(`${parentField} == null || ${parentField} == ""`)
+      }
+      if (selected.length) {
+        for (var i = 0; i < selected.length - 1; i++) {
+          result.push(`${parentField} == '${selected[i].value}'`)
+        }
+      }
+
+      let where = []
+      if (this.where) {
+        where.push(`(${this.where})`)
+      }
+      if (result.length) {
+        where.push(`(${result.join(' || ')})`)
+      }
+
+      return where.join(' && ')
+    },
+    _nodeWhere() {
+      let result = []
+      let selected = this.selected
+      if (selected.length) {
+        result.push(`${this.parentField} == '${selected[selected.length - 1].value}'`)
+      }
+
+      if (this.where) {
+        return `(${this.where}) && (${result.join(' || ')})`
+      }
+
+      return result.join(' || ')
+    },
+    _getParentNameByField() {
+      const fields = this.field.split(',');
+      let where_field = null;
+      for (let i = 0; i < fields.length; i++) {
+        const items = fields[i].split('as');
+        if (items.length < 2) {
+          continue;
+        }
+        if (items[1].trim() === 'value') {
+          where_field = items[0].trim();
+          break;
+        }
+      }
+      return where_field
+    },
+    _isTreeView() {
+      return (this.parentField && this.selfField)
+    },
+    _updateSelected() {
+      var dl = this.dataList
+      var sl = this.selected
+      let textField = this.map.text
+      let valueField = this.map.value
+      for (var i = 0; i < sl.length; i++) {
+        var value = sl[i].value
+        var dl2 = dl[i]
+        for (var j = 0; j < dl2.length; j++) {
+          var item2 = dl2[j]
+          if (item2[valueField] === value) {
+            sl[i].text = item2[textField]
+            break
+          }
+        }
+      }
+    },
+    _updateBindData(node) {
+      const {
+        dataList,
+        hasNodes
+      } = this._filterData(this._treeData, this.selected)
+
+      let isleaf = this._stepSearh === false && !hasNodes
+
+      if (node) {
+        node.isleaf = isleaf
+      }
+
+      this.dataList = dataList
+      this.selectedIndex = dataList.length - 1
+
+      if (!isleaf && this.selected.length < dataList.length) {
+        this.selected.push({
+          value: null,
+          text: "请选择"
+        })
+      }
+
+      return {
+        isleaf,
+        hasNodes
+      }
+    },
+    _filterData(data, paths) {
+      let dataList = []
+      let hasNodes = true
+
+      dataList.push(data.filter((item) => {
+        return (item.parent_value === null || item.parent_value === undefined || item.parent_value === '')
+      }))
+      for (let i = 0; i < paths.length; i++) {
+        var value = paths[i].value
+        var nodes = data.filter((item) => {
+          return item.parent_value === value
+        })
+
+        if (nodes.length) {
+          dataList.push(nodes)
+        } else {
+          hasNodes = false
+        }
+      }
+
+      return {
+        dataList,
+        hasNodes
+      }
+    },
+    _extractTree(nodes, result, parent_value) {
+      let list = result || []
+      let valueField = this.map.value
+      for (let i = 0; i < nodes.length; i++) {
+        let node = nodes[i]
+
+        let child = {}
+        for (let key in node) {
+          if (key !== 'children') {
+            child[key] = node[key]
+          }
+        }
+        if (parent_value !== null && parent_value !== undefined && parent_value !== '') {
+          child.parent_value = parent_value
+        }
+        result.push(child)
+
+        let children = node.children
+        if (children) {
+          this._extractTree(children, result, node[valueField])
+        }
+      }
+    },
+    _extractTreePath(nodes, result) {
+      let list = result || []
+      for (let i = 0; i < nodes.length; i++) {
+        let node = nodes[i]
+
+        let child = {}
+        for (let key in node) {
+          if (key !== 'children') {
+            child[key] = node[key]
+          }
+        }
+        result.push(child)
+
+        let children = node.children
+        if (children) {
+          this._extractTreePath(children, result)
+        }
+      }
+    },
+    _findNodePath(key, nodes, path = []) {
+      let textField = this.map.text
+      let valueField = this.map.value
+      for (let i = 0; i < nodes.length; i++) {
+        let node = nodes[i]
+        let children = node.children
+        let text = node[textField]
+        let value = node[valueField]
+
+        path.push({
+          value,
+          text
+        })
+
+        if (value === key) {
+          return path
+        }
+
+        if (children) {
+          const p = this._findNodePath(key, children, path)
+          if (p.length) {
+            return p
+          }
+        }
+
+        path.pop()
+      }
+      return []
+    },
+    _processLocalData() {
+      this._treeData = []
+      this._extractTree(this.localdata, this._treeData)
+
+      var inputValue = this.dataValue
+      if (inputValue === undefined) {
+        return
+      }
+
+      if (Array.isArray(inputValue)) {
+        inputValue = inputValue[inputValue.length - 1]
+        if (typeof inputValue === 'object' && inputValue[this.map.value]) {
+          inputValue = inputValue[this.map.value]
+        }
+      }
+
+      this.selected = this._findNodePath(inputValue, this.localdata)
+    }
+  }
+}
diff --git a/src/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue b/src/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue
new file mode 100644
index 00000000..72f8b33a
--- /dev/null
+++ b/src/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue
@@ -0,0 +1,333 @@
+<template>
+	<view class="uni-data-pickerview">
+		<scroll-view class="selected-area" scroll-x="true" scroll-y="false" :show-scrollbar="false">
+			<view class="selected-list">
+				<template v-for="(item,index) in selected">
+					<view class="selected-item"
+						:class="{'selected-item-active':index==selectedIndex, 'selected-item-text-overflow': ellipsis}"
+						:key="index" v-if="item.text" @click="handleSelect(index)">
+						<text class="">{{item.text}}</text>
+					</view>
+				</template>
+			</view>
+		</scroll-view>
+		<view class="tab-c">
+			<template v-for="(child, i) in dataList">
+				<scroll-view class="list" :key="i" v-if="i==selectedIndex" :scroll-y="true">
+					<view class="item" :class="{'is-disabled': !!item.disable}" v-for="(item, j) in child" :key="j"
+						@click="handleNodeClick(item, i, j)">
+						<text class="item-text item-text-overflow">{{item[map.text]}}</text>
+						<view class="check" v-if="selected.length > i && item[map.value] == selected[i].value"></view>
+					</view>
+				</scroll-view>
+			</template>
+
+			<view class="loading-cover" v-if="loading">
+				<uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
+			</view>
+			<view class="error-message" v-if="errorMessage">
+				<text class="error-text">{{errorMessage}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import dataPicker from "./uni-data-picker.js"
+
+	/**
+	 * DataPickerview
+	 * @description uni-data-pickerview
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3796
+	 * @property {Array} localdata 本地数据，参考
+	 * @property {Boolean} step-searh = [true|false] 是否分布查询
+	 * @value true 启用分布查询，仅查询当前选中节点
+	 * @value false 关闭分布查询，一次查询出所有数据
+	 * @property {String|DBFieldString} self-field 分布查询当前字段名称
+	 * @property {String|DBFieldString} parent-field 分布查询父字段名称
+	 * @property {String|DBCollectionString} collection 表名
+	 * @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
+	 * @property {String} orderby 排序字段及正序倒叙设置
+	 * @property {String|JQLString} where 查询条件
+	 */
+	export default {
+		name: 'UniDataPickerView',
+		emits: ['nodeclick', 'change', 'datachange', 'update:modelValue'],
+		mixins: [dataPicker],
+		props: {
+			managedMode: {
+				type: Boolean,
+				default: false
+			},
+			ellipsis: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {}
+		},
+		created() {
+			if (this.managedMode) {
+				return
+			}
+
+			this.$nextTick(() => {
+				this.load()
+			})
+		},
+		methods: {
+			onPropsChange() {
+				this._treeData = []
+				this.selectedIndex = 0
+				this.load()
+			},
+			load() {
+				if (this.isLocaldata) {
+					this.loadData()
+				} else if (this.dataValue.length) {
+					this.getTreePath((res) => {
+						this.loadData()
+					})
+				}
+			},
+			handleSelect(index) {
+				this.selectedIndex = index
+			},
+			handleNodeClick(item, i, j) {
+				if (item.disable) {
+					return
+				}
+				const node = this.dataList[i][j]
+				const text = node[this.map.text]
+				const value = node[this.map.value]
+				if (i < this.selected.length - 1) {
+					this.selected.splice(i, this.selected.length - i)
+					this.selected.push({
+						text,
+						value
+					})
+				} else if (i === this.selected.length - 1) {
+					this.selected.splice(i, 1, {
+						text,
+						value
+					})
+				}
+
+				if (node.isleaf) {
+					this.onSelectedChange(node, node.isleaf)
+					return
+				}
+
+				const {
+					isleaf,
+					hasNodes
+				} = this._updateBindData()
+
+				if (!this._isTreeView() && !hasNodes) {
+					this.onSelectedChange(node, true)
+					return
+				}
+
+				if (this.isLocaldata && (!hasNodes || isleaf)) {
+					this.onSelectedChange(node, true)
+					return
+				}
+
+				if (!isleaf && !hasNodes) {
+					this._loadNodeData((data) => {
+						if (!data.length) {
+							node.isleaf = true
+						} else {
+							this._treeData.push(...data)
+							this._updateBindData(node)
+						}
+						this.onSelectedChange(node, node.isleaf)
+					}, this._nodeWhere())
+					return
+				}
+
+				this.onSelectedChange(node, false)
+			},
+			updateData(data) {
+				this._treeData = data.treeData
+				this.selected = data.selected
+				if (!this._treeData.length) {
+					this.loadData()
+				} else {
+					//this.selected = data.selected
+					this._updateBindData()
+				}
+			},
+			onDataChange() {
+				this.$emit('datachange')
+			},
+			onSelectedChange(node, isleaf) {
+				if (isleaf) {
+					this._dispatchEvent()
+				}
+
+				if (node) {
+					this.$emit('nodeclick', node)
+				}
+			},
+			_dispatchEvent() {
+				this.$emit('change', this.selected.slice(0))
+			}
+		}
+	}
+</script>
+<style >
+	.uni-data-pickerview {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		overflow: hidden;
+		height: 100%;
+	}
+
+	.error-text {
+		color: #DD524D;
+	}
+
+	.loading-cover {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(255, 255, 255, .5);
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		align-items: center;
+		z-index: 1001;
+	}
+
+	.load-more {
+		/* #ifndef APP-NVUE */
+		margin: auto;
+		/* #endif */
+	}
+
+	.error-message {
+		background-color: #fff;
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		padding: 15px;
+		opacity: .9;
+		z-index: 102;
+	}
+
+	/* #ifdef APP-NVUE */
+	.selected-area {
+		width: 750rpx;
+	}
+
+	/* #endif */
+
+	.selected-list {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex-wrap: nowrap;
+		padding: 0 5px;
+		border-bottom: 1px solid #f8f8f8;
+	}
+
+	.selected-item {
+		margin-left: 10px;
+		margin-right: 10px;
+		padding: 12px 0;
+		text-align: center;
+		/* #ifndef APP-NVUE */
+		white-space: nowrap;
+		/* #endif */
+	}
+
+	.selected-item-text-overflow {
+		width: 168px;
+		/* fix nvue */
+		overflow: hidden;
+		/* #ifndef APP-NVUE */
+		width: 6em;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		-o-text-overflow: ellipsis;
+		/* #endif */
+	}
+
+	.selected-item-active {
+		border-bottom: 2px solid #007aff;
+	}
+
+	.selected-item-text {
+		color: #007aff;
+	}
+
+	.tab-c {
+		position: relative;
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		overflow: hidden;
+	}
+
+	.list {
+		flex: 1;
+	}
+
+	.item {
+		padding: 12px 15px;
+		/* border-bottom: 1px solid #f0f0f0; */
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.is-disabled {
+		opacity: .5;
+	}
+
+	.item-text {
+		/* flex: 1; */
+		color: #333333;
+	}
+
+	.item-text-overflow {
+		width: 280px;
+		/* fix nvue */
+		overflow: hidden;
+		/* #ifndef APP-NVUE */
+		width: 20em;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		-o-text-overflow: ellipsis;
+		/* #endif */
+	}
+
+	.check {
+		margin-right: 5px;
+		border: 2px solid #007aff;
+		border-left: 0;
+		border-top: 0;
+		height: 12px;
+		width: 6px;
+		transform-origin: center;
+		/* #ifndef APP-NVUE */
+		transition: all 0.3s;
+		/* #endif */
+		transform: rotate(45deg);
+	}
+</style>
diff --git a/src/uni_modules/uni-data-picker/package.json b/src/uni_modules/uni-data-picker/package.json
new file mode 100644
index 00000000..ab4029e2
--- /dev/null
+++ b/src/uni_modules/uni-data-picker/package.json
@@ -0,0 +1,92 @@
+{
+  "id": "uni-data-picker",
+  "displayName": "uni-data-picker 数据驱动的picker选择器",
+  "version": "1.0.4",
+  "description": "单列、多列级联选择器，常用于省市区城市选择、公司部门选择、多级分类等场景",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "picker",
+    "级联",
+    "省市区",
+    ""
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+      "uni-load-more",
+			"uni-icons",
+			"uni-scss"
+    ],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-data-picker/readme.md b/src/uni_modules/uni-data-picker/readme.md
new file mode 100644
index 00000000..6cda2240
--- /dev/null
+++ b/src/uni_modules/uni-data-picker/readme.md
@@ -0,0 +1,22 @@
+## DataPicker 级联选择
+> **组件名：uni-data-picker**
+> 代码块： `uDataPicker`
+> 关联组件：`uni-data-pickerview`、`uni-load-more`。
+
+
+`<uni-data-picker>` 是一个选择类[datacom组件](https://uniapp.dcloud.net.cn/component/datacom)。
+
+支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。
+
+候选数据支持一次性加载完毕，也支持懒加载，比如示例图中，选择了“北京”后，动态加载北京的区县数据。
+
+`<uni-data-picker>` 组件尤其适用于地址选择、分类选择等选择类。
+
+`<uni-data-picker>` 支持本地数据、云端静态数据(json)，uniCloud云数据库数据。
+
+`<uni-data-picker>` 可以通过JQL直连uniCloud云数据库，配套[DB Schema](https://uniapp.dcloud.net.cn/uniCloud/schema)，可在schema2code中自动生成前端页面，还支持服务器端校验。
+
+在uniCloud数据表中新建表“uni-id-address”和“opendb-city-china”，这2个表的schema自带foreignKey关联。在“uni-id-address”表的表结构页面使用schema2code生成前端页面，会自动生成地址管理的维护页面，自动从“opendb-city-china”表包含的中国所有省市区信息里选择地址。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-picker)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-dateformat/changelog.md b/src/uni_modules/uni-dateformat/changelog.md
new file mode 100644
index 00000000..d551d7b8
--- /dev/null
+++ b/src/uni_modules/uni-dateformat/changelog.md
@@ -0,0 +1,10 @@
+## 1.0.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-dateformat](https://uniapp.dcloud.io/component/uniui/uni-dateformat)
+## 0.0.5（2021-07-08）
+- 调整 默认时间不再是当前时间，而是显示'-'字符
+## 0.0.4（2021-05-12）
+- 新增 组件示例地址
+## 0.0.3（2021-02-04）
+- 调整为uni_modules目录规范
+- 修复 iOS 平台日期格式化出错的问题
diff --git a/src/uni_modules/uni-dateformat/components/uni-dateformat/date-format.js b/src/uni_modules/uni-dateformat/components/uni-dateformat/date-format.js
new file mode 100644
index 00000000..e00d5597
--- /dev/null
+++ b/src/uni_modules/uni-dateformat/components/uni-dateformat/date-format.js
@@ -0,0 +1,200 @@
+// yyyy-MM-dd hh:mm:ss.SSS 所有支持的类型
+function pad(str, length = 2) {
+	str += ''
+	while (str.length < length) {
+		str = '0' + str
+	}
+	return str.slice(-length)
+}
+
+const parser = {
+	yyyy: (dateObj) => {
+		return pad(dateObj.year, 4)
+	},
+	yy: (dateObj) => {
+		return pad(dateObj.year)
+	},
+	MM: (dateObj) => {
+		return pad(dateObj.month)
+	},
+	M: (dateObj) => {
+		return dateObj.month
+	},
+	dd: (dateObj) => {
+		return pad(dateObj.day)
+	},
+	d: (dateObj) => {
+		return dateObj.day
+	},
+	hh: (dateObj) => {
+		return pad(dateObj.hour)
+	},
+	h: (dateObj) => {
+		return dateObj.hour
+	},
+	mm: (dateObj) => {
+		return pad(dateObj.minute)
+	},
+	m: (dateObj) => {
+		return dateObj.minute
+	},
+	ss: (dateObj) => {
+		return pad(dateObj.second)
+	},
+	s: (dateObj) => {
+		return dateObj.second
+	},
+	SSS: (dateObj) => {
+		return pad(dateObj.millisecond, 3)
+	},
+	S: (dateObj) => {
+		return dateObj.millisecond
+	},
+}
+
+// 这都n年了iOS依然不认识2020-12-12，需要转换为2020/12/12
+function getDate(time) {
+	if (time instanceof Date) {
+		return time
+	}
+	switch (typeof time) {
+		case 'string':
+			{
+				// 2020-12-12T12:12:12.000Z、2020-12-12T12:12:12.000
+				if (time.indexOf('T') > -1) {
+					return new Date(time)
+				}
+				return new Date(time.replace(/-/g, '/'))
+			}
+		default:
+			return new Date(time)
+	}
+}
+
+export function formatDate(date, format = 'yyyy/MM/dd hh:mm:ss') {
+	if (!date && date !== 0) {
+		return ''
+	}
+	date = getDate(date)
+	const dateObj = {
+		year: date.getFullYear(),
+		month: date.getMonth() + 1,
+		day: date.getDate(),
+		hour: date.getHours(),
+		minute: date.getMinutes(),
+		second: date.getSeconds(),
+		millisecond: date.getMilliseconds()
+	}
+	const tokenRegExp = /yyyy|yy|MM|M|dd|d|hh|h|mm|m|ss|s|SSS|SS|S/
+	let flag = true
+	let result = format
+	while (flag) {
+		flag = false
+		result = result.replace(tokenRegExp, function(matched) {
+			flag = true
+			return parser[matched](dateObj)
+		})
+	}
+	return result
+}
+
+export function friendlyDate(time, {
+	locale = 'zh',
+	threshold = [60000, 3600000],
+	format = 'yyyy/MM/dd hh:mm:ss'
+}) {
+	if (time === '-') {
+		return time
+	}
+	if (!time && time !== 0) {
+		return ''
+	}
+	const localeText = {
+		zh: {
+			year: '年',
+			month: '月',
+			day: '天',
+			hour: '小时',
+			minute: '分钟',
+			second: '秒',
+			ago: '前',
+			later: '后',
+			justNow: '刚刚',
+			soon: '马上',
+			template: '{num}{unit}{suffix}'
+		},
+		en: {
+			year: 'year',
+			month: 'month',
+			day: 'day',
+			hour: 'hour',
+			minute: 'minute',
+			second: 'second',
+			ago: 'ago',
+			later: 'later',
+			justNow: 'just now',
+			soon: 'soon',
+			template: '{num} {unit} {suffix}'
+		}
+	}
+	const text = localeText[locale] || localeText.zh
+	let date = getDate(time)
+	let ms = date.getTime() - Date.now()
+	let absMs = Math.abs(ms)
+	if (absMs < threshold[0]) {
+		return ms < 0 ? text.justNow : text.soon
+	}
+	if (absMs >= threshold[1]) {
+		return formatDate(date, format)
+	}
+	let num
+	let unit
+	let suffix = text.later
+	if (ms < 0) {
+		suffix = text.ago
+		ms = -ms
+	}
+	const seconds = Math.floor((ms) / 1000)
+	const minutes = Math.floor(seconds / 60)
+	const hours = Math.floor(minutes / 60)
+	const days = Math.floor(hours / 24)
+	const months = Math.floor(days / 30)
+	const years = Math.floor(months / 12)
+	switch (true) {
+		case years > 0:
+			num = years
+			unit = text.year
+			break
+		case months > 0:
+			num = months
+			unit = text.month
+			break
+		case days > 0:
+			num = days
+			unit = text.day
+			break
+		case hours > 0:
+			num = hours
+			unit = text.hour
+			break
+		case minutes > 0:
+			num = minutes
+			unit = text.minute
+			break
+		default:
+			num = seconds
+			unit = text.second
+			break
+	}
+
+	if (locale === 'en') {
+		if (num === 1) {
+			num = 'a'
+		} else {
+			unit += 's'
+		}
+	}
+
+	return text.template.replace(/{\s*num\s*}/g, num + '').replace(/{\s*unit\s*}/g, unit).replace(/{\s*suffix\s*}/g,
+		suffix)
+}
diff --git a/src/uni_modules/uni-dateformat/components/uni-dateformat/uni-dateformat.vue b/src/uni_modules/uni-dateformat/components/uni-dateformat/uni-dateformat.vue
new file mode 100644
index 00000000..c5ed0307
--- /dev/null
+++ b/src/uni_modules/uni-dateformat/components/uni-dateformat/uni-dateformat.vue
@@ -0,0 +1,88 @@
+<template>
+	<text>{{dateShow}}</text>
+</template>
+
+<script>
+	import {friendlyDate} from './date-format.js'
+	/**
+	 * Dateformat 日期格式化
+	 * @description 日期格式化组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3279
+	 * @property {Object|String|Number} date 日期对象/日期字符串/时间戳
+	 * @property {String} locale 格式化使用的语言
+	 * 	@value zh 中文
+	 * 	@value en 英文
+	 * @property {Array} threshold 应用不同类型格式化的阈值
+	 * @property {String} format 输出日期字符串时的格式
+	 */
+	export default {
+		name: 'uniDateformat',
+		props: {
+			date: {
+				type: [Object, String, Number],
+				default () {
+					return '-'
+				}
+			},
+			locale: {
+				type: String,
+				default: 'zh',
+			},
+			threshold: {
+				type: Array,
+				default () {
+					return [0, 0]
+				}
+			},
+			format: {
+				type: String,
+				default: 'yyyy/MM/dd hh:mm:ss'
+			},
+			// refreshRate使用不当可能导致性能问题，谨慎使用
+			refreshRate: {
+				type: [Number, String],
+				default: 0
+			}
+		},
+		data() {
+			return {
+				refreshMark: 0
+			}
+		},
+		computed: {
+			dateShow() {
+				this.refreshMark
+				return friendlyDate(this.date, {
+					locale: this.locale,
+					threshold: this.threshold,
+					format: this.format
+				})
+			}
+		},
+		watch: {
+			refreshRate: {
+				handler() {
+					this.setAutoRefresh()
+				},
+				immediate: true
+			}
+		},
+		methods: {
+			refresh() {
+				this.refreshMark++
+			},
+			setAutoRefresh() {
+				clearInterval(this.refreshInterval)
+				if (this.refreshRate) {
+					this.refreshInterval = setInterval(() => {
+						this.refresh()
+					}, parseInt(this.refreshRate))
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>
diff --git a/src/uni_modules/uni-dateformat/package.json b/src/uni_modules/uni-dateformat/package.json
new file mode 100644
index 00000000..786a670b
--- /dev/null
+++ b/src/uni_modules/uni-dateformat/package.json
@@ -0,0 +1,88 @@
+{
+  "id": "uni-dateformat",
+  "displayName": "uni-dateformat 日期格式化",
+  "version": "1.0.0",
+  "description": "日期格式化组件，可以将日期格式化为1分钟前、刚刚等形式",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "日期格式化",
+    "时间格式化",
+    "格式化时间",
+    ""
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "y",
+          "联盟": "y"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-dateformat/readme.md b/src/uni_modules/uni-dateformat/readme.md
new file mode 100644
index 00000000..37ddb6ec
--- /dev/null
+++ b/src/uni_modules/uni-dateformat/readme.md
@@ -0,0 +1,11 @@
+
+
+### DateFormat 日期格式化
+> **组件名：uni-dateformat**
+> 代码块： `uDateformat`
+
+
+日期格式化组件。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-dateformat)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-datetime-picker/changelog.md b/src/uni_modules/uni-datetime-picker/changelog.md
new file mode 100644
index 00000000..9611a30e
--- /dev/null
+++ b/src/uni_modules/uni-datetime-picker/changelog.md
@@ -0,0 +1,89 @@
+## 2.2.4（2022-03-31）
+- 修复 Vue3 下动态赋值,单选类型未响应的 bug
+## 2.2.3（2022-03-28）
+- 修复 Vue3 下动态赋值未响应的 bug
+## 2.2.2（2021-12-10）
+- 修复 clear-icon 属性在小程序平台不生效的 bug
+## 2.2.1（2021-12-10）
+- 修复 日期范围选在小程序平台，必须多点击一次才能取消选中状态的 bug
+## 2.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
+## 2.1.5（2021-11-09） 
+- 新增 提供组件设计资源，组件样式调整
+## 2.1.4（2021-09-10）
+- 修复 hide-second 在移动端的 bug
+- 修复 单选赋默认值时，赋值日期未高亮的 bug
+- 修复 赋默认值时，移动端未正确显示时间的 bug
+## 2.1.3（2021-09-09）
+- 新增 hide-second 属性，支持只使用时分，隐藏秒
+## 2.1.2（2021-09-03）
+- 优化 取消选中时（范围选）直接开始下一次选择, 避免多点一次
+- 优化 移动端支持清除按钮，同时支持通过 ref 调用组件的 clear 方法
+- 优化 调整字号大小，美化日历界面
+- 修复 因国际化导致的 placeholder 失效的 bug
+## 2.1.1（2021-08-24）
+- 新增 支持国际化
+- 优化 范围选择器在 pc 端过宽的问题
+## 2.1.0（2021-08-09）
+- 新增 适配 vue3
+## 2.0.19（2021-08-09）
+- 新增 支持作为 uni-forms 子组件相关功能
+- 修复 在 uni-forms 中使用时，选择时间报 NAN 错误的 bug
+## 2.0.18（2021-08-05）
+- 修复 type 属性动态赋值无效的 bug
+- 修复 ‘确认’按钮被 tabbar 遮盖 bug
+- 修复 组件未赋值时范围选左、右日历相同的 bug
+## 2.0.17（2021-08-04）
+- 修复 范围选未正确显示当前值的 bug
+- 修复 h5 平台（移动端）报错 'cale' of undefined 的 bug
+## 2.0.16（2021-07-21）
+- 新增 return-type 属性支持返回 date 日期对象
+## 2.0.15（2021-07-14）
+- 修复 单选日期类型，初始赋值后不在当前日历的 bug
+- 新增 clearIcon 属性，显示框的清空按钮可配置显示隐藏（仅 pc 有效）
+- 优化 移动端移除显示框的清空按钮，无实际用途
+## 2.0.14（2021-07-14）
+- 修复 组件赋值为空，界面未更新的 bug
+- 修复 start 和 end 不能动态赋值的 bug
+- 修复 范围选类型，用户选择后再次选择右侧日历（结束日期）显示不正确的 bug
+## 2.0.13（2021-07-08）
+- 修复 范围选择不能动态赋值的 bug
+## 2.0.12（2021-07-08）
+- 修复 范围选择的初始时间在一个月内时，造成无法选择的bug
+## 2.0.11（2021-07-08）
+- 优化 弹出层在超出视窗边缘定位不准确的问题
+## 2.0.10（2021-07-08）
+- 修复 范围起始点样式的背景色与今日样式的字体前景色融合，导致日期字体看不清的 bug
+- 优化 弹出层在超出视窗边缘被遮盖的问题
+## 2.0.9（2021-07-07）
+- 新增 maskClick 事件
+- 修复 特殊情况日历 rpx 布局错误的 bug，rpx -> px
+- 修复 范围选择时清空返回值不合理的bug，['', ''] -> []
+## 2.0.8（2021-07-07）
+- 新增 日期时间显示框支持插槽
+## 2.0.7（2021-07-01）
+- 优化 添加 uni-icons 依赖
+## 2.0.6（2021-05-22）
+- 修复 图标在小程序上不显示的 bug
+- 优化 重命名引用组件，避免潜在组件命名冲突
+## 2.0.5（2021-05-20）
+- 优化 代码目录扁平化
+## 2.0.4（2021-05-12）
+- 新增 组件示例地址
+## 2.0.3（2021-05-10）
+- 修复 ios 下不识别 '-' 日期格式的 bug
+- 优化 pc 下弹出层添加边框和阴影
+## 2.0.2（2021-05-08）
+- 修复 在 admin 中获取弹出层定位错误的bug
+## 2.0.1（2021-05-08）
+- 修复 type 属性向下兼容，默认值从 date 变更为 datetime
+## 2.0.0（2021-04-30）
+- 支持日历形式的日期+时间的范围选择
+ > 注意：此版本不向后兼容，不再支持单独时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）
+## 1.0.6（2021-03-18）
+- 新增 hide-second 属性，时间支持仅选择时、分
+- 修复 选择跟显示的日期不一样的 bug
+- 修复 chang事件触发2次的 bug
+- 修复 分、秒 end 范围错误的 bug
+- 优化 更好的 nvue 适配
diff --git a/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
new file mode 100644
index 00000000..3d2dbeac
--- /dev/null
+++ b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
@@ -0,0 +1,185 @@
+<template>
+	<view class="uni-calendar-item__weeks-box" :class="{
+		'uni-calendar-item--disable':weeks.disable,
+		'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
+		'uni-calendar-item--multiple': weeks.multiple,
+		'uni-calendar-item--after-checked-x':weeks.afterMultiple,
+		}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
+		<view class="uni-calendar-item__weeks-box-item" :class="{
+				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
+				'uni-calendar-item--checked-range-text': checkHover,
+				'uni-calendar-item--before-checked':weeks.beforeMultiple,
+				'uni-calendar-item--multiple': weeks.multiple,
+				'uni-calendar-item--after-checked':weeks.afterMultiple,
+				'uni-calendar-item--disable':weeks.disable,
+				}">
+			<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
+			<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
+		</view>
+		<view :class="{'uni-calendar-item--isDay': weeks.isDay}"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			weeks: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			calendar: {
+				type: Object,
+				default: () => {
+					return {}
+				}
+			},
+			selected: {
+				type: Array,
+				default: () => {
+					return []
+				}
+			},
+			lunar: {
+				type: Boolean,
+				default: false
+			},
+			checkHover: {
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			choiceDate(weeks) {
+				this.$emit('change', weeks)
+			},
+			handleMousemove(weeks) {
+				this.$emit('handleMouse', weeks)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.uni-calendar-item__weeks-box {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin: 1px 0;
+		position: relative;
+	}
+
+	.uni-calendar-item__weeks-box-text {
+		font-size: 14px;
+		// font-family: Lato-Bold, Lato;
+		font-weight: bold;
+		color: #455997;
+	}
+
+	.uni-calendar-item__weeks-lunar-text {
+		font-size: 12px;
+		color: #333;
+	}
+
+	.uni-calendar-item__weeks-box-item {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 40px;
+		height: 40px;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+
+	.uni-calendar-item__weeks-box-circle {
+		position: absolute;
+		top: 5px;
+		right: 5px;
+		width: 8px;
+		height: 8px;
+		border-radius: 8px;
+		background-color: #dd524d;
+
+	}
+
+	.uni-calendar-item__weeks-box .uni-calendar-item--disable {
+		// background-color: rgba(249, 249, 249, $uni-opacity-disabled);
+		cursor: default;
+	}
+
+	.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
+		color: #D1D1D1;
+	}
+
+	.uni-calendar-item--isDay {
+		position: absolute;
+		top: 10px;
+		right: 17%;
+		background-color: #dd524d;
+		width:6px;
+		height: 6px;
+		border-radius: 50%;
+	}
+
+	.uni-calendar-item--extra {
+		color: #dd524d;
+		opacity: 0.8;
+	}
+
+	.uni-calendar-item__weeks-box .uni-calendar-item--checked {
+		background-color: #007aff;
+		border-radius: 50%;
+		box-sizing: border-box;
+		border: 3px solid #fff;
+	}
+
+	.uni-calendar-item--checked .uni-calendar-item--checked-text {
+		color: #fff;
+	}
+
+	.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
+		color: #333;
+	}
+
+	.uni-calendar-item--multiple {
+		background-color:  #F6F7FC;
+		// color: #fff;
+	}
+
+	.uni-calendar-item--multiple .uni-calendar-item--before-checked,
+	.uni-calendar-item--multiple .uni-calendar-item--after-checked {
+		background-color: #409eff;
+		border-radius: 50%;
+		box-sizing: border-box;
+		border: 3px solid #F6F7FC;
+	}
+
+	.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
+	.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
+		color: #fff;
+	}
+
+	.uni-calendar-item--before-checked-x {
+		border-top-left-radius: 50px;
+		border-bottom-left-radius: 50px;
+		box-sizing: border-box;
+		background-color: #F6F7FC;
+	}
+
+	.uni-calendar-item--after-checked-x {
+		border-top-right-radius: 50px;
+		border-bottom-right-radius: 50px;
+		background-color: #F6F7FC;
+	}
+</style>
diff --git a/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.js b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.js
new file mode 100644
index 00000000..b8d7d6fc
--- /dev/null
+++ b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.js
@@ -0,0 +1,546 @@
+/**
+* @1900-2100区间内的公历、农历互转
+* @charset UTF-8
+* @github  https://github.com/jjonline/calendar.js
+* @Author  Jea杨(JJonline@JJonline.Cn)
+* @Time    2014-7-21
+* @Time    2016-8-13 Fixed 2033hex、Attribution Annals
+* @Time    2016-9-25 Fixed lunar LeapMonth Param Bug
+* @Time    2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
+* @Version 1.0.3
+* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
+* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
+*/
+/* eslint-disable */
+var calendar = {
+
+  /**
+      * 农历1900-2100的润大小信息表
+      * @Array Of Property
+      * @return Hex
+      */
+  lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
+    0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
+    0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
+    0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
+    0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
+    0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
+    0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
+    0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
+    0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
+    0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
+    0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
+    0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
+    0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
+    0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
+    0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
+    /** Add By JJonline@JJonline.Cn**/
+    0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
+    0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
+    0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
+    0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
+    0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
+    0x0d520], // 2100
+
+  /**
+      * 公历每个月份的天数普通表
+      * @Array Of Property
+      * @return Number
+      */
+  solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
+
+  /**
+      * 天干地支之天干速查表
+      * @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
+      * @return Cn string
+      */
+  Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
+
+  /**
+      * 天干地支之地支速查表
+      * @Array Of Property
+      * @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
+      * @return Cn string
+      */
+  Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
+
+  /**
+      * 天干地支之地支速查表<=>生肖
+      * @Array Of Property
+      * @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
+      * @return Cn string
+      */
+  Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
+
+  /**
+      * 24节气速查表
+      * @Array Of Property
+      * @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
+      * @return Cn string
+      */
+  solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
+
+  /**
+      * 1900-2100各年的24节气日期速查表
+      * @Array Of Property
+      * @return 0x string For splice
+      */
+  sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
+    '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+    '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
+    '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
+    'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
+    '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
+    '97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
+    '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
+    '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+    '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
+    '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
+    '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+    '97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
+    '9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
+    '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
+    '97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
+    '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
+    '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+    '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+    '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
+    '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+    '97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+    '9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
+    '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
+    '97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
+    '9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
+    '7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
+    '7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+    '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+    '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
+    '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+    '9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+    '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
+    '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
+    '977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
+    '7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+    '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
+    '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+    '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+    '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+    '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
+    '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+    '977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+    '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
+    '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
+    '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
+    '7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+    '7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
+    '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
+    '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+    '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
+    '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
+    '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
+    '7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+    '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
+    '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
+    '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
+    '665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+    '7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
+    '7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
+    '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
+
+  /**
+      * 数字转中文速查表
+      * @Array Of Property
+      * @trans ['日','一','二','三','四','五','六','七','八','九','十']
+      * @return Cn string
+      */
+  nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
+
+  /**
+      * 日期转农历称呼速查表
+      * @Array Of Property
+      * @trans ['初','十','廿','卅']
+      * @return Cn string
+      */
+  nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
+
+  /**
+      * 月份转农历称呼速查表
+      * @Array Of Property
+      * @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
+      * @return Cn string
+      */
+  nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
+
+  /**
+      * 返回农历y年一整年的总天数
+      * @param lunar Year
+      * @return Number
+      * @eg:var count = calendar.lYearDays(1987) ;//count=387
+      */
+  lYearDays: function (y) {
+    var i; var sum = 348
+    for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
+    return (sum + this.leapDays(y))
+  },
+
+  /**
+      * 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
+      * @param lunar Year
+      * @return Number (0-12)
+      * @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
+      */
+  leapMonth: function (y) { // 闰字编码 \u95f0
+    return (this.lunarInfo[y - 1900] & 0xf)
+  },
+
+  /**
+      * 返回农历y年闰月的天数 若该年没有闰月则返回0
+      * @param lunar Year
+      * @return Number (0、29、30)
+      * @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
+      */
+  leapDays: function (y) {
+    if (this.leapMonth(y)) {
+      return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
+    }
+    return (0)
+  },
+
+  /**
+      * 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
+      * @param lunar Year
+      * @return Number (-1、29、30)
+      * @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
+      */
+  monthDays: function (y, m) {
+    if (m > 12 || m < 1) { return -1 }// 月份参数从1至12，参数错误返回-1
+    return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
+  },
+
+  /**
+      * 返回公历(!)y年m月的天数
+      * @param solar Year
+      * @return Number (-1、28、29、30、31)
+      * @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
+      */
+  solarDays: function (y, m) {
+    if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
+    var ms = m - 1
+    if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
+      return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
+    } else {
+      return (this.solarMonth[ms])
+    }
+  },
+
+  /**
+     * 农历年份转换为干支纪年
+     * @param  lYear 农历年的年份数
+     * @return Cn string
+     */
+  toGanZhiYear: function (lYear) {
+    var ganKey = (lYear - 3) % 10
+    var zhiKey = (lYear - 3) % 12
+    if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
+    if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
+    return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
+  },
+
+  /**
+     * 公历月、日判断所属星座
+     * @param  cMonth [description]
+     * @param  cDay [description]
+     * @return Cn string
+     */
+  toAstro: function (cMonth, cDay) {
+    var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
+    var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
+    return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
+  },
+
+  /**
+      * 传入offset偏移量返回干支
+      * @param offset 相对甲子的偏移量
+      * @return Cn string
+      */
+  toGanZhi: function (offset) {
+    return this.Gan[offset % 10] + this.Zhi[offset % 12]
+  },
+
+  /**
+      * 传入公历(!)y年获得该年第n个节气的公历日期
+      * @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
+      * @return day Number
+      * @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
+      */
+  getTerm: function (y, n) {
+    if (y < 1900 || y > 2100) { return -1 }
+    if (n < 1 || n > 24) { return -1 }
+    var _table = this.sTermInfo[y - 1900]
+    var _info = [
+      parseInt('0x' + _table.substr(0, 5)).toString(),
+      parseInt('0x' + _table.substr(5, 5)).toString(),
+      parseInt('0x' + _table.substr(10, 5)).toString(),
+      parseInt('0x' + _table.substr(15, 5)).toString(),
+      parseInt('0x' + _table.substr(20, 5)).toString(),
+      parseInt('0x' + _table.substr(25, 5)).toString()
+    ]
+    var _calday = [
+      _info[0].substr(0, 1),
+      _info[0].substr(1, 2),
+      _info[0].substr(3, 1),
+      _info[0].substr(4, 2),
+
+      _info[1].substr(0, 1),
+      _info[1].substr(1, 2),
+      _info[1].substr(3, 1),
+      _info[1].substr(4, 2),
+
+      _info[2].substr(0, 1),
+      _info[2].substr(1, 2),
+      _info[2].substr(3, 1),
+      _info[2].substr(4, 2),
+
+      _info[3].substr(0, 1),
+      _info[3].substr(1, 2),
+      _info[3].substr(3, 1),
+      _info[3].substr(4, 2),
+
+      _info[4].substr(0, 1),
+      _info[4].substr(1, 2),
+      _info[4].substr(3, 1),
+      _info[4].substr(4, 2),
+
+      _info[5].substr(0, 1),
+      _info[5].substr(1, 2),
+      _info[5].substr(3, 1),
+      _info[5].substr(4, 2)
+    ]
+    return parseInt(_calday[n - 1])
+  },
+
+  /**
+      * 传入农历数字月份返回汉语通俗表示法
+      * @param lunar month
+      * @return Cn string
+      * @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
+      */
+  toChinaMonth: function (m) { // 月 => \u6708
+    if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
+    var s = this.nStr3[m - 1]
+    s += '\u6708'// 加上月字
+    return s
+  },
+
+  /**
+      * 传入农历日期数字返回汉字表示法
+      * @param lunar day
+      * @return Cn string
+      * @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
+      */
+  toChinaDay: function (d) { // 日 => \u65e5
+    var s
+    switch (d) {
+      case 10:
+        s = '\u521d\u5341'; break
+      case 20:
+        s = '\u4e8c\u5341'; break
+        break
+      case 30:
+        s = '\u4e09\u5341'; break
+        break
+      default :
+        s = this.nStr2[Math.floor(d / 10)]
+        s += this.nStr1[d % 10]
+    }
+    return (s)
+  },
+
+  /**
+      * 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
+      * @param y year
+      * @return Cn string
+      * @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
+      */
+  getAnimal: function (y) {
+    return this.Animals[(y - 4) % 12]
+  },
+
+  /**
+      * 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
+      * @param y  solar year
+      * @param m  solar month
+      * @param d  solar day
+      * @return JSON object
+      * @eg:console.log(calendar.solar2lunar(1987,11,01));
+      */
+  solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
+    // 年份限定、上限
+    if (y < 1900 || y > 2100) {
+      return -1// undefined转换为数字变为NaN
+    }
+    // 公历传参最下限
+    if (y == 1900 && m == 1 && d < 31) {
+      return -1
+    }
+    // 未传参  获得当天
+    if (!y) {
+      var objDate = new Date()
+    } else {
+      var objDate = new Date(y, parseInt(m) - 1, d)
+    }
+    var i; var leap = 0; var temp = 0
+    // 修正ymd参数
+    var y = objDate.getFullYear()
+    var m = objDate.getMonth() + 1
+    var d = objDate.getDate()
+    var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
+    for (i = 1900; i < 2101 && offset > 0; i++) {
+      temp = this.lYearDays(i)
+      offset -= temp
+    }
+    if (offset < 0) {
+      offset += temp; i--
+    }
+
+    // 是否今天
+    var isTodayObj = new Date()
+    var isToday = false
+    if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
+      isToday = true
+    }
+    // 星期几
+    var nWeek = objDate.getDay()
+    var cWeek = this.nStr1[nWeek]
+    // 数字表示周几顺应天朝周一开始的惯例
+    if (nWeek == 0) {
+      nWeek = 7
+    }
+    // 农历年
+    var year = i
+    var leap = this.leapMonth(i) // 闰哪个月
+    var isLeap = false
+
+    // 效验闰月
+    for (i = 1; i < 13 && offset > 0; i++) {
+      // 闰月
+      if (leap > 0 && i == (leap + 1) && isLeap == false) {
+        --i
+        isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
+      } else {
+        temp = this.monthDays(year, i)// 计算农历普通月天数
+      }
+      // 解除闰月
+      if (isLeap == true && i == (leap + 1)) { isLeap = false }
+      offset -= temp
+    }
+    // 闰月导致数组下标重叠取反
+    if (offset == 0 && leap > 0 && i == leap + 1) {
+      if (isLeap) {
+        isLeap = false
+      } else {
+        isLeap = true; --i
+      }
+    }
+    if (offset < 0) {
+      offset += temp; --i
+    }
+    // 农历月
+    var month = i
+    // 农历日
+    var day = offset + 1
+    // 天干地支处理
+    var sm = m - 1
+    var gzY = this.toGanZhiYear(year)
+
+    // 当月的两个节气
+    // bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
+    var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
+    var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
+
+    // 依据12节气修正干支月
+    var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
+    if (d >= firstNode) {
+      gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
+    }
+
+    // 传入的日期的节气与否
+    var isTerm = false
+    var Term = null
+    if (firstNode == d) {
+      isTerm = true
+      Term = this.solarTerm[m * 2 - 2]
+    }
+    if (secondNode == d) {
+      isTerm = true
+      Term = this.solarTerm[m * 2 - 1]
+    }
+    // 日柱 当月一日与 1900/1/1 相差天数
+    var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
+    var gzD = this.toGanZhi(dayCyclical + d - 1)
+    // 该日期所属的星座
+    var astro = this.toAstro(m, d)
+
+    return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
+  },
+
+  /**
+      * 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
+      * @param y  lunar year
+      * @param m  lunar month
+      * @param d  lunar day
+      * @param isLeapMonth  lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
+      * @return JSON object
+      * @eg:console.log(calendar.lunar2solar(1987,9,10));
+      */
+  lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
+    var isLeapMonth = !!isLeapMonth
+    var leapOffset = 0
+    var leapMonth = this.leapMonth(y)
+    var leapDay = this.leapDays(y)
+    if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
+    if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
+    var day = this.monthDays(y, m)
+    var _day = day
+    // bugFix 2016-9-25
+    // if month is leap, _day use leapDays method
+    if (isLeapMonth) {
+      _day = this.leapDays(y, m)
+    }
+    if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
+
+    // 计算农历的时间差
+    var offset = 0
+    for (var i = 1900; i < y; i++) {
+      offset += this.lYearDays(i)
+    }
+    var leap = 0; var isAdd = false
+    for (var i = 1; i < m; i++) {
+      leap = this.leapMonth(y)
+      if (!isAdd) { // 处理闰月
+        if (leap <= i && leap > 0) {
+          offset += this.leapDays(y); isAdd = true
+        }
+      }
+      offset += this.monthDays(y, i)
+    }
+    // 转换闰月农历 需补充该年闰月的前一个月的时差
+    if (isLeapMonth) { offset += day }
+    // 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
+    var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
+    var calObj = new Date((offset + d - 31) * 86400000 + stmap)
+    var cY = calObj.getUTCFullYear()
+    var cM = calObj.getUTCMonth() + 1
+    var cD = calObj.getUTCDate()
+
+    return this.solar2lunar(cY, cM, cD)
+  }
+}
+
+export default calendar
diff --git a/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
new file mode 100644
index 00000000..e0a1f09f
--- /dev/null
+++ b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
@@ -0,0 +1,897 @@
+<template>
+	<view class="uni-calendar" @mouseleave="leaveCale">
+		<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
+			@click="clean"></view>
+		<view v-if="insert || show" class="uni-calendar__content"
+			:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
+			<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
+				<view v-if="left" class="uni-calendar__header-btn-box" @click.stop="pre">
+					<view class="uni-calendar__header-btn uni-calendar--left"></view>
+				</view>
+				<picker mode="date" :value="date" fields="month" @change="bindDateChange">
+					<text
+						class="uni-calendar__header-text">{{ (nowDate.year||'') + ' 年 ' + ( nowDate.month||'') +' 月'}}</text>
+				</picker>
+				<view v-if="right" class="uni-calendar__header-btn-box" @click.stop="next">
+					<view class="uni-calendar__header-btn uni-calendar--right"></view>
+				</view>
+				<view v-if="!insert" class="dialog-close" @click="clean">
+					<view class="dialog-close-plus" data-id="close"></view>
+					<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
+				</view>
+
+				<!-- <text class="uni-calendar__backtoday" @click="backtoday">回到今天</text> -->
+			</view>
+			<view class="uni-calendar__box">
+				<view v-if="showMonth" class="uni-calendar__box-bg">
+					<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
+				</view>
+				<view class="uni-calendar__weeks" style="padding-bottom: 7px;">
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{monText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
+					</view>
+				</view>
+				<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
+					<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
+						<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar"
+							:selected="selected" :lunar="lunar" :checkHover="range" @change="choiceDate"
+							@handleMouse="handleMouse">
+						</calendar-item>
+					</view>
+				</view>
+			</view>
+			<view v-if="!insert && !range && typeHasTime" class="uni-date-changed uni-calendar--fixed-top"
+				style="padding: 0 80px;">
+				<view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view>
+				<time-picker type="time" :start="reactStartTime" :end="reactEndTime" v-model="time"
+					:disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style">
+				</time-picker>
+			</view>
+
+			<view v-if="!insert && range && typeHasTime" class="uni-date-changed uni-calendar--fixed-top">
+				<view class="uni-date-changed--time-start">
+					<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
+					</view>
+					<time-picker type="time" :start="reactStartTime" v-model="timeRange.startTime" :border="false"
+						:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
+					</time-picker>
+				</view>
+				<uni-icons type="arrowthinright" color="#999" style="line-height: 50px;"></uni-icons>
+				<view class="uni-date-changed--time-end">
+					<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
+					<time-picker type="time" :end="reactEndTime" v-model="timeRange.endTime" :border="false"
+						:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
+					</time-picker>
+				</view>
+			</view>
+			<view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
+				<!-- <view class="uni-calendar__header-btn-box">
+					<text class="uni-calendar__button-text uni-calendar--fixed-width">{{okText}}</text>
+				</view> -->
+				<view class="uni-datetime-picker--btn" @click="confirm">确认</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import Calendar from './util.js';
+	import calendarItem from './calendar-item.vue'
+	import timePicker from './time-picker.vue'
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {
+		t
+	} = initVueI18n(messages)
+	/**
+	 * Calendar 日历
+	 * @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=56
+	 * @property {String} date 自定义当前时间，默认为今天
+	 * @property {Boolean} lunar 显示农历
+	 * @property {String} startDate 日期选择范围-开始日期
+	 * @property {String} endDate 日期选择范围-结束日期
+	 * @property {Boolean} range 范围选择
+	 * @property {Boolean} insert = [true|false] 插入模式,默认为false
+	 * 	@value true 弹窗模式
+	 * 	@value false 插入模式
+	 * @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
+	 * @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
+	 * @property {Boolean} showMonth 是否选择月份为背景
+	 * @event {Function} change 日期改变，`insert :ture` 时生效
+	 * @event {Function} confirm 确认选择`insert :false` 时生效
+	 * @event {Function} monthSwitch 切换月份时触发
+	 * @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
+	 */
+	export default {
+		components: {
+			calendarItem,
+			timePicker
+		},
+		props: {
+			date: {
+				type: String,
+				default: ''
+			},
+			defTime: {
+				type: [String, Object],
+				default: ''
+			},
+			selectableTimes: {
+				type: [Object],
+				default () {
+					return {}
+				}
+			},
+			selected: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			lunar: {
+				type: Boolean,
+				default: false
+			},
+			startDate: {
+				type: String,
+				default: ''
+			},
+			endDate: {
+				type: String,
+				default: ''
+			},
+			range: {
+				type: Boolean,
+				default: false
+			},
+			typeHasTime: {
+				type: Boolean,
+				default: false
+			},
+			insert: {
+				type: Boolean,
+				default: true
+			},
+			showMonth: {
+				type: Boolean,
+				default: true
+			},
+			clearDate: {
+				type: Boolean,
+				default: true
+			},
+			left: {
+				type: Boolean,
+				default: true
+			},
+			right: {
+				type: Boolean,
+				default: true
+			},
+			checkHover: {
+				type: Boolean,
+				default: true
+			},
+			hideSecond: {
+				type: [Boolean],
+				default: false
+			},
+			pleStatus: {
+				type: Object,
+				default () {
+					return {
+						before: '',
+						after: '',
+						data: [],
+						fulldate: ''
+					}
+				}
+			}
+		},
+		data() {
+			return {
+				show: false,
+				weeks: [],
+				calendar: {},
+				nowDate: '',
+				aniMaskShow: false,
+				firstEnter: true,
+				time: '',
+				timeRange: {
+					startTime: '',
+					endTime: ''
+				},
+				tempSingleDate: '',
+				tempRange: {
+					before: '',
+					after: ''
+				}
+			}
+		},
+		watch: {
+			date: {
+				immediate: true,
+				handler(newVal, oldVal) {
+					if (!this.range) {
+						this.tempSingleDate = newVal
+						setTimeout(() => {
+							this.init(newVal)
+						}, 100)
+					}
+				}
+			},
+			defTime: {
+				immediate: true,
+				handler(newVal, oldVal) {
+					if (!this.range) {
+						this.time = newVal
+					} else {
+						this.timeRange.startTime = newVal.start
+						this.timeRange.endTime = newVal.end
+					}
+				}
+			},
+			startDate(val) {
+				this.cale.resetSatrtDate(val)
+				this.cale.setDate(this.nowDate.fullDate)
+				this.weeks = this.cale.weeks
+			},
+			endDate(val) {
+				this.cale.resetEndDate(val)
+				this.cale.setDate(this.nowDate.fullDate)
+				this.weeks = this.cale.weeks
+			},
+			selected(newVal) {
+				this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
+				this.weeks = this.cale.weeks
+			},
+			pleStatus: {
+				immediate: true,
+				handler(newVal, oldVal) {
+					const {
+						before,
+						after,
+						fulldate,
+						which
+					} = newVal
+					this.tempRange.before = before
+					this.tempRange.after = after
+					setTimeout(() => {
+						if (fulldate) {
+							this.cale.setHoverMultiple(fulldate)
+							if (before && after) {
+								this.cale.lastHover = true
+								if (this.rangeWithinMonth(after, before)) return
+								this.setDate(before)
+							} else {
+								this.cale.setMultiple(fulldate)
+								this.setDate(this.nowDate.fullDate)
+								this.calendar.fullDate = ''
+								this.cale.lastHover = false
+							}
+						} else {
+							this.cale.setDefaultMultiple(before, after)
+							if (which === 'left') {
+								this.setDate(before)
+								this.weeks = this.cale.weeks
+							} else {
+								this.setDate(after)
+								this.weeks = this.cale.weeks
+							}
+							this.cale.lastHover = true
+						}
+					}, 16)
+				}
+			}
+		},
+		computed: {
+			reactStartTime() {
+				const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate
+				const res = activeDate === this.startDate ? this.selectableTimes.start : ''
+				return res
+			},
+			reactEndTime() {
+				const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate
+				const res = activeDate === this.endDate ? this.selectableTimes.end : ''
+				return res
+			},
+			/**
+			 * for i18n
+			 */
+			selectDateText() {
+				return t("uni-datetime-picker.selectDate")
+			},
+			startDateText() {
+				return this.startPlaceholder || t("uni-datetime-picker.startDate")
+			},
+			endDateText() {
+				return this.endPlaceholder || t("uni-datetime-picker.endDate")
+			},
+			okText() {
+				return t("uni-datetime-picker.ok")
+			},
+			monText() {
+				return t("uni-calender.MON")
+			},
+			TUEText() {
+				return t("uni-calender.TUE")
+			},
+			WEDText() {
+				return t("uni-calender.WED")
+			},
+			THUText() {
+				return t("uni-calender.THU")
+			},
+			FRIText() {
+				return t("uni-calender.FRI")
+			},
+			SATText() {
+				return t("uni-calender.SAT")
+			},
+			SUNText() {
+				return t("uni-calender.SUN")
+			},
+		},
+		created() {
+			// 获取日历方法实例
+			this.cale = new Calendar({
+				// date: new Date(),
+				selected: this.selected,
+				startDate: this.startDate,
+				endDate: this.endDate,
+				range: this.range,
+				// multipleStatus: this.pleStatus
+			})
+			// 选中某一天
+			// this.cale.setDate(this.date)
+			this.init(this.date)
+			// this.setDay
+		},
+		methods: {
+			leaveCale() {
+				this.firstEnter = true
+			},
+			handleMouse(weeks) {
+				if (weeks.disable) return
+				if (this.cale.lastHover) return
+				let {
+					before,
+					after
+				} = this.cale.multipleStatus
+				if (!before) return
+				this.calendar = weeks
+				// 设置范围选
+				this.cale.setHoverMultiple(this.calendar.fullDate)
+				this.weeks = this.cale.weeks
+				// hover时，进入一个日历，更新另一个
+				if (this.firstEnter) {
+					this.$emit('firstEnterCale', this.cale.multipleStatus)
+					this.firstEnter = false
+				}
+			},
+			rangeWithinMonth(A, B) {
+				const [yearA, monthA] = A.split('-')
+				const [yearB, monthB] = B.split('-')
+				return yearA === yearB && monthA === monthB
+			},
+
+			// 取消穿透
+			clean() {
+				this.close()
+			},
+
+			clearCalender() {
+				if (this.range) {
+					this.timeRange.startTime = ''
+					this.timeRange.endTime = ''
+					this.tempRange.before = ''
+					this.tempRange.after = ''
+					this.cale.multipleStatus.before = ''
+					this.cale.multipleStatus.after = ''
+					this.cale.multipleStatus.data = []
+					this.cale.lastHover = false
+				} else {
+					this.time = ''
+					this.tempSingleDate = ''
+				}
+				this.calendar.fullDate = ''
+				this.setDate()
+			},
+
+			bindDateChange(e) {
+				const value = e.detail.value + '-1'
+				this.init(value)
+			},
+			/**
+			 * 初始化日期显示
+			 * @param {Object} date
+			 */
+			init(date) {
+				this.cale.setDate(date)
+				this.weeks = this.cale.weeks
+				this.nowDate = this.calendar = this.cale.getInfo(date)
+			},
+			// choiceDate(weeks) {
+			// 	if (weeks.disable) return
+			// 	this.calendar = weeks
+			// 	// 设置多选
+			// 	this.cale.setMultiple(this.calendar.fullDate, true)
+			// 	this.weeks = this.cale.weeks
+			// 	this.tempSingleDate = this.calendar.fullDate
+			// 	this.tempRange.before = this.cale.multipleStatus.before
+			// 	this.tempRange.after = this.cale.multipleStatus.after
+			// 	this.change()
+			// },
+			/**
+			 * 打开日历弹窗
+			 */
+			open() {
+				// 弹窗模式并且清理数据
+				if (this.clearDate && !this.insert) {
+					this.cale.cleanMultipleStatus()
+					// this.cale.setDate(this.date)
+					this.init(this.date)
+				}
+				this.show = true
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.aniMaskShow = true
+					}, 50)
+				})
+			},
+			/**
+			 * 关闭日历弹窗
+			 */
+			close() {
+				this.aniMaskShow = false
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.show = false
+						this.$emit('close')
+					}, 300)
+				})
+			},
+			/**
+			 * 确认按钮
+			 */
+			confirm() {
+				this.setEmit('confirm')
+				this.close()
+			},
+			/**
+			 * 变化触发
+			 */
+			change() {
+				if (!this.insert) return
+				this.setEmit('change')
+			},
+			/**
+			 * 选择月份触发
+			 */
+			monthSwitch() {
+				let {
+					year,
+					month
+				} = this.nowDate
+				this.$emit('monthSwitch', {
+					year,
+					month: Number(month)
+				})
+			},
+			/**
+			 * 派发事件
+			 * @param {Object} name
+			 */
+			setEmit(name) {
+				let {
+					year,
+					month,
+					date,
+					fullDate,
+					lunar,
+					extraInfo
+				} = this.calendar
+				this.$emit(name, {
+					range: this.cale.multipleStatus,
+					year,
+					month,
+					date,
+					time: this.time,
+					timeRange: this.timeRange,
+					fulldate: fullDate,
+					lunar,
+					extraInfo: extraInfo || {}
+				})
+			},
+			/**
+			 * 选择天触发
+			 * @param {Object} weeks
+			 */
+			choiceDate(weeks) {
+				if (weeks.disable) return
+				this.calendar = weeks
+				this.calendar.userChecked = true
+				// 设置多选
+				this.cale.setMultiple(this.calendar.fullDate, true)
+				this.weeks = this.cale.weeks
+				this.tempSingleDate = this.calendar.fullDate
+				this.tempRange.before = this.cale.multipleStatus.before
+				this.tempRange.after = this.cale.multipleStatus.after
+				this.change()
+			},
+			/**
+			 * 回到今天
+			 */
+			backtoday() {
+				let date = this.cale.getDate(new Date()).fullDate
+				// this.cale.setDate(date)
+				this.init(date)
+				this.change()
+			},
+			/**
+			 * 比较时间大小
+			 */
+			dateCompare(startDate, endDate) {
+				// 计算截止时间
+				startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
+				// 计算详细项的截止时间
+				endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
+				if (startDate <= endDate) {
+					return true
+				} else {
+					return false
+				}
+			},
+			/**
+			 * 上个月
+			 */
+			pre() {
+				const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
+				this.setDate(preDate)
+				this.monthSwitch()
+
+			},
+			/**
+			 * 下个月
+			 */
+			next() {
+				const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
+				this.setDate(nextDate)
+				this.monthSwitch()
+			},
+			/**
+			 * 设置日期
+			 * @param {Object} date
+			 */
+			setDate(date) {
+				this.cale.setDate(date)
+				this.weeks = this.cale.weeks
+				this.nowDate = this.cale.getInfo(date)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.uni-calendar {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-calendar__mask {
+		position: fixed;
+		bottom: 0;
+		top: 0;
+		left: 0;
+		right: 0;
+		background-color: rgba(0, 0, 0, 0.4);
+		transition-property: opacity;
+		transition-duration: 0.3s;
+		opacity: 0;
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+		/* #endif */
+	}
+
+	.uni-calendar--mask-show {
+		opacity: 1
+	}
+
+	.uni-calendar--fixed {
+		position: fixed;
+		bottom: calc(var(--window-bottom));
+		left: 0;
+		right: 0;
+		transition-property: transform;
+		transition-duration: 0.3s;
+		transform: translateY(460px);
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+		/* #endif */
+	}
+
+	.uni-calendar--ani-show {
+		transform: translateY(0);
+	}
+
+	.uni-calendar__content {
+		background-color: #fff;
+	}
+
+	.uni-calendar__content-mobile {
+		border-top-left-radius: 10px;
+		border-top-right-radius: 10px;
+		box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
+	}
+
+	.uni-calendar__header {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 50px;
+	}
+
+	.uni-calendar__header-mobile {
+		padding: 10px;
+		padding-bottom: 0;
+	}
+
+	.uni-calendar--fixed-top {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+		border-top-color: rgba(0, 0, 0, 0.4);
+		border-top-style: solid;
+		border-top-width: 1px;
+	}
+
+	.uni-calendar--fixed-width {
+		width: 50px;
+	}
+
+	.uni-calendar__backtoday {
+		position: absolute;
+		right: 0;
+		top: 25rpx;
+		padding: 0 5px;
+		padding-left: 10px;
+		height: 25px;
+		line-height: 25px;
+		font-size: 12px;
+		border-top-left-radius: 25px;
+		border-bottom-left-radius: 25px;
+		color: #fff;
+		background-color: #f1f1f1;
+	}
+
+	.uni-calendar__header-text {
+		text-align: center;
+		width: 100px;
+		font-size: 15px;
+		color: #666;
+	}
+
+	.uni-calendar__button-text {
+		text-align: center;
+		width: 100px;
+		font-size: 14px;
+		color: #007aff;
+		/* #ifndef APP-NVUE */
+		letter-spacing: 3px;
+		/* #endif */
+	}
+
+	.uni-calendar__header-btn-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		width: 50px;
+		height: 50px;
+	}
+
+	.uni-calendar__header-btn {
+		width: 9px;
+		height: 9px;
+		border-left-color: #808080;
+		border-left-style: solid;
+		border-left-width: 1px;
+		border-top-color: #555555;
+		border-top-style: solid;
+		border-top-width: 1px;
+	}
+
+	.uni-calendar--left {
+		transform: rotate(-45deg);
+	}
+
+	.uni-calendar--right {
+		transform: rotate(135deg);
+	}
+
+
+	.uni-calendar__weeks {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-calendar__weeks-item {
+		flex: 1;
+	}
+
+	.uni-calendar__weeks-day {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 40px;
+		border-bottom-color: #F5F5F5;
+		border-bottom-style: solid;
+		border-bottom-width: 1px;
+	}
+
+	.uni-calendar__weeks-day-text {
+		font-size: 12px;
+		color: #B2B2B2;
+	}
+
+	.uni-calendar__box {
+		position: relative;
+		// padding: 0 10px;
+		padding-bottom: 7px;
+	}
+
+	.uni-calendar__box-bg {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+
+	.uni-calendar__box-bg-text {
+		font-size: 200px;
+		font-weight: bold;
+		color: #999;
+		opacity: 0.1;
+		text-align: center;
+		/* #ifndef APP-NVUE */
+		line-height: 1;
+		/* #endif */
+	}
+
+	.uni-date-changed {
+		padding: 0 10px;
+		// line-height: 50px;
+		text-align: center;
+		color: #333;
+		border-top-color: #DCDCDC;
+		;
+		border-top-style: solid;
+		border-top-width: 1px;
+		flex: 1;
+	}
+
+	.uni-date-btn--ok {
+		padding: 20px 15px;
+	}
+
+	.uni-date-changed--time-start {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		align-items: center;
+	}
+
+	.uni-date-changed--time-end {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		align-items: center;
+	}
+
+	.uni-date-changed--time-date {
+		color: #999;
+		line-height: 50px;
+		margin-right: 5px;
+		// opacity: 0.6;
+	}
+
+	.time-picker-style {
+		// width: 62px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center
+	}
+
+	.mr-10 {
+		margin-right: 10px;
+	}
+
+	.dialog-close {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		padding: 0 25px;
+		margin-top: 10px;
+	}
+
+	.dialog-close-plus {
+		width: 16px;
+		height: 2px;
+		background-color: #737987;
+		border-radius: 2px;
+		transform: rotate(45deg);
+	}
+
+	.dialog-close-rotate {
+		position: absolute;
+		transform: rotate(-45deg);
+	}
+
+	.uni-datetime-picker--btn {
+		border-radius: 100px;
+		height: 40px;
+		line-height: 40px;
+		background-color: #007aff;
+		color: #fff;
+		font-size: 16px;
+		letter-spacing: 5px;
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-datetime-picker--btn:active {
+		opacity: 0.7;
+	}
+	/* #endif */
+</style>
diff --git a/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json
new file mode 100644
index 00000000..cc76311b
--- /dev/null
+++ b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json
@@ -0,0 +1,19 @@
+{
+	"uni-datetime-picker.selectDate": "select date",
+	"uni-datetime-picker.selectTime": "select time",
+	"uni-datetime-picker.selectDateTime": "select datetime",
+	"uni-datetime-picker.startDate": "start date",
+	"uni-datetime-picker.endDate": "end date",
+	"uni-datetime-picker.startTime": "start time",
+	"uni-datetime-picker.endTime": "end time",
+	"uni-datetime-picker.ok": "ok",
+	"uni-datetime-picker.clear": "clear",
+	"uni-datetime-picker.cancel": "cancel",
+	"uni-calender.MON": "MON",
+	"uni-calender.TUE": "TUE",
+	"uni-calender.WED": "WED",
+	"uni-calender.THU": "THU",
+	"uni-calender.FRI": "FRI",
+	"uni-calender.SAT": "SAT",
+	"uni-calender.SUN": "SUN"
+}
diff --git a/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js
new file mode 100644
index 00000000..de7509c8
--- /dev/null
+++ b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js
@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hans.json b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hans.json
new file mode 100644
index 00000000..7bc7405f
--- /dev/null
+++ b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hans.json
@@ -0,0 +1,19 @@
+{
+	"uni-datetime-picker.selectDate": "选择日期",
+	"uni-datetime-picker.selectTime": "选择时间",
+	"uni-datetime-picker.selectDateTime": "选择日期时间",
+	"uni-datetime-picker.startDate": "开始日期",
+	"uni-datetime-picker.endDate": "结束日期",
+	"uni-datetime-picker.startTime": "开始时间",
+	"uni-datetime-picker.endTime": "结束时间",
+	"uni-datetime-picker.ok": "确定",
+	"uni-datetime-picker.clear": "清除",
+	"uni-datetime-picker.cancel": "取消",
+	"uni-calender.SUN": "日",
+	"uni-calender.MON": "一",
+	"uni-calender.TUE": "二",
+	"uni-calender.WED": "三",
+	"uni-calender.THU": "四",
+	"uni-calender.FRI": "五",
+	"uni-calender.SAT": "六"
+}
diff --git a/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hant.json b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hant.json
new file mode 100644
index 00000000..7d370432
--- /dev/null
+++ b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hant.json
@@ -0,0 +1,19 @@
+{
+	"uni-datetime-picker.selectDate": "選擇日期",
+	"uni-datetime-picker.selectTime": "選擇時間",
+	"uni-datetime-picker.selectDateTime": "選擇日期時間",
+	"uni-datetime-picker.startDate": "開始日期",
+	"uni-datetime-picker.endDate": "結束日期",
+	"uni-datetime-picker.startTime": "開始时间",
+	"uni-datetime-picker.endTime": "結束时间",
+	"uni-datetime-picker.ok": "確定",
+	"uni-datetime-picker.clear": "清除",
+	"uni-datetime-picker.cancel": "取消",
+	"uni-calender.SUN": "日",
+	"uni-calender.MON": "一",
+	"uni-calender.TUE": "二",
+	"uni-calender.WED": "三",
+	"uni-calender.THU": "四",
+	"uni-calender.FRI": "五",
+	"uni-calender.SAT": "六"
+}
diff --git a/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/keypress.js b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/keypress.js
new file mode 100644
index 00000000..9601abae
--- /dev/null
+++ b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/keypress.js
@@ -0,0 +1,45 @@
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    this.$once('hook:beforeDestroy', () => {
+      document.removeEventListener('keyup', listener)
+    })
+  },
+	render: () => {}
+}
+// #endif
\ No newline at end of file
diff --git a/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
new file mode 100644
index 00000000..e6ad4b83
--- /dev/null
+++ b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
@@ -0,0 +1,927 @@
+<template>
+	<view class="uni-datetime-picker">
+		<view @click="initTimePicker">
+			<slot>
+				<view class="uni-datetime-picker-timebox-pointer"
+					:class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}">
+					<text class="uni-datetime-picker-text">{{time}}</text>
+					<view v-if="!time" class="uni-datetime-picker-time">
+						<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
+					</view>
+				</view>
+			</slot>
+		</view>
+		<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
+		<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
+			:style="fixNvueBug">
+			<view class="uni-title">
+				<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
+			</view>
+			<view v-if="dateShow" class="uni-datetime-picker__container-box">
+				<picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
+					@change="bindDateChange">
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+				</picker-view>
+				<!-- 兼容 nvue 不支持伪类 -->
+				<text class="uni-datetime-picker-sign sign-left">-</text>
+				<text class="uni-datetime-picker-sign sign-right">-</text>
+			</view>
+			<view v-if="timeShow" class="uni-datetime-picker__container-box">
+				<picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']"
+					:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="!hideSecond">
+						<view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+				</picker-view>
+				<!-- 兼容 nvue 不支持伪类 -->
+				<text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text>
+				<text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text>
+			</view>
+			<view class="uni-datetime-picker-btn">
+				<view @click="clearTime">
+					<text class="uni-datetime-picker-btn-text">{{clearText}}</text>
+				</view>
+				<view class="uni-datetime-picker-btn-group">
+					<view class="uni-datetime-picker-cancel" @click="tiggerTimePicker">
+						<text class="uni-datetime-picker-btn-text">{{cancelText}}</text>
+					</view>
+					<view @click="setTime">
+						<text class="uni-datetime-picker-btn-text">{{okText}}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- #ifdef H5 -->
+		<!-- <keypress v-if="visible" @esc="tiggerTimePicker" @enter="setTime" /> -->
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	// #ifdef H5
+	import keypress from './keypress'
+	// #endif
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {	t	} = initVueI18n(messages)
+
+	/**
+	 * DatetimePicker 时间选择器
+	 * @description 可以同时选择日期和时间的选择器
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
+	 * @property {String} type = [datetime | date | time] 显示模式
+	 * @property {Boolean} multiple = [true|false] 是否多选
+	 * @property {String|Number} value 默认值
+	 * @property {String|Number} start 起始日期或时间
+	 * @property {String|Number} end 起始日期或时间
+	 * @property {String} return-type = [timestamp | string]
+	 * @event {Function} change  选中发生变化触发
+	 */
+
+	export default {
+		name: 'UniDatetimePicker',
+		components: {
+			// #ifdef H5
+			keypress
+			// #endif
+		},
+		data() {
+			return {
+				indicatorStyle: `height: 50px;`,
+				visible: false,
+				fixNvueBug: {},
+				dateShow: true,
+				timeShow: true,
+				title: '日期和时间',
+				// 输入框当前时间
+				time: '',
+				// 当前的年月日时分秒
+				year: 1920,
+				month: 0,
+				day: 0,
+				hour: 0,
+				minute: 0,
+				second: 0,
+				// 起始时间
+				startYear: 1920,
+				startMonth: 1,
+				startDay: 1,
+				startHour: 0,
+				startMinute: 0,
+				startSecond: 0,
+				// 结束时间
+				endYear: 2120,
+				endMonth: 12,
+				endDay: 31,
+				endHour: 23,
+				endMinute: 59,
+				endSecond: 59,
+			}
+		},
+		props: {
+			type: {
+				type: String,
+				default: 'datetime'
+			},
+			value: {
+				type: [String, Number],
+				default: ''
+			},
+			modelValue: {
+				type: [String, Number],
+				default: ''
+			},
+			start: {
+				type: [Number, String],
+				default: ''
+			},
+			end: {
+				type: [Number, String],
+				default: ''
+			},
+			returnType: {
+				type: String,
+				default: 'string'
+			},
+			disabled: {
+				type: [Boolean, String],
+				default: false
+			},
+			border: {
+				type: [Boolean, String],
+				default: true
+			},
+			hideSecond: {
+				type: [Boolean, String],
+				default: false
+			}
+		},
+		watch: {
+			value: {
+				handler(newVal, oldVal) {
+					if (newVal) {
+						this.parseValue(this.fixIosDateFormat(newVal)) //兼容 iOS、safari 日期格式
+						this.initTime(false)
+					} else {
+						this.time = ''
+						this.parseValue(Date.now())
+					}
+				},
+				immediate: true
+			},
+			type: {
+				handler(newValue) {
+					if (newValue === 'date') {
+						this.dateShow = true
+						this.timeShow = false
+						this.title = '日期'
+					} else if (newValue === 'time') {
+						this.dateShow = false
+						this.timeShow = true
+						this.title = '时间'
+					} else {
+						this.dateShow = true
+						this.timeShow = true
+						this.title = '日期和时间'
+					}
+				},
+				immediate: true
+			},
+			start: {
+				handler(newVal) {
+					this.parseDatetimeRange(this.fixIosDateFormat(newVal), 'start') //兼容 iOS、safari 日期格式
+				},
+				immediate: true
+			},
+			end: {
+				handler(newVal) {
+					this.parseDatetimeRange(this.fixIosDateFormat(newVal), 'end') //兼容 iOS、safari 日期格式
+				},
+				immediate: true
+			},
+
+			// 月、日、时、分、秒可选范围变化后，检查当前值是否在范围内，不在则当前值重置为可选范围第一项
+			months(newVal) {
+				this.checkValue('month', this.month, newVal)
+			},
+			days(newVal) {
+				this.checkValue('day', this.day, newVal)
+			},
+			hours(newVal) {
+				this.checkValue('hour', this.hour, newVal)
+			},
+			minutes(newVal) {
+				this.checkValue('minute', this.minute, newVal)
+			},
+			seconds(newVal) {
+				this.checkValue('second', this.second, newVal)
+			}
+		},
+		computed: {
+			// 当前年、月、日、时、分、秒选择范围
+			years() {
+				return this.getCurrentRange('year')
+			},
+
+			months() {
+				return this.getCurrentRange('month')
+			},
+
+			days() {
+				return this.getCurrentRange('day')
+			},
+
+			hours() {
+				return this.getCurrentRange('hour')
+			},
+
+			minutes() {
+				return this.getCurrentRange('minute')
+			},
+
+			seconds() {
+				return this.getCurrentRange('second')
+			},
+
+			// picker 当前值数组
+			ymd() {
+				return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay]
+			},
+			hms() {
+				return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond]
+			},
+
+			// 当前 date 是 start
+			currentDateIsStart() {
+				return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay
+			},
+
+			// 当前 date 是 end
+			currentDateIsEnd() {
+				return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay
+			},
+
+			// 当前年、月、日、时、分、秒的最小值和最大值
+			minYear() {
+				return this.startYear
+			},
+			maxYear() {
+				return this.endYear
+			},
+			minMonth() {
+				if (this.year === this.startYear) {
+					return this.startMonth
+				} else {
+					return 1
+				}
+			},
+			maxMonth() {
+				if (this.year === this.endYear) {
+					return this.endMonth
+				} else {
+					return 12
+				}
+			},
+			minDay() {
+				if (this.year === this.startYear && this.month === this.startMonth) {
+					return this.startDay
+				} else {
+					return 1
+				}
+			},
+			maxDay() {
+				if (this.year === this.endYear && this.month === this.endMonth) {
+					return this.endDay
+				} else {
+					return this.daysInMonth(this.year, this.month)
+				}
+			},
+			minHour() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsStart) {
+						return this.startHour
+					} else {
+						return 0
+					}
+				}
+				if (this.type === 'time') {
+					return this.startHour
+				}
+			},
+			maxHour() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsEnd) {
+						return this.endHour
+					} else {
+						return 23
+					}
+				}
+				if (this.type === 'time') {
+					return this.endHour
+				}
+			},
+			minMinute() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsStart && this.hour === this.startHour) {
+						return this.startMinute
+					} else {
+						return 0
+					}
+				}
+				if (this.type === 'time') {
+					if (this.hour === this.startHour) {
+						return this.startMinute
+					} else {
+						return 0
+					}
+				}
+			},
+			maxMinute() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsEnd && this.hour === this.endHour) {
+						return this.endMinute
+					} else {
+						return 59
+					}
+				}
+				if (this.type === 'time') {
+					if (this.hour === this.endHour) {
+						return this.endMinute
+					} else {
+						return 59
+					}
+				}
+			},
+			minSecond() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) {
+						return this.startSecond
+					} else {
+						return 0
+					}
+				}
+				if (this.type === 'time') {
+					if (this.hour === this.startHour && this.minute === this.startMinute) {
+						return this.startSecond
+					} else {
+						return 0
+					}
+				}
+			},
+			maxSecond() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) {
+						return this.endSecond
+					} else {
+						return 59
+					}
+				}
+				if (this.type === 'time') {
+					if (this.hour === this.endHour && this.minute === this.endMinute) {
+						return this.endSecond
+					} else {
+						return 59
+					}
+				}
+			},
+
+			/**
+			 * for i18n
+			 */
+			selectTimeText() {
+				return t("uni-datetime-picker.selectTime")
+			},
+			okText() {
+				return t("uni-datetime-picker.ok")
+			},
+			clearText() {
+				return t("uni-datetime-picker.clear")
+			},
+			cancelText() {
+				return t("uni-datetime-picker.cancel")
+			}
+		},
+
+		mounted() {
+			// #ifdef APP-NVUE
+			const res = uni.getWindowInfo();
+			this.fixNvueBug = {
+				top: res.windowHeight / 2,
+				left: res.windowWidth / 2
+			}
+			// #endif
+		},
+
+		methods: {
+			/**
+			 * @param {Object} item
+			 * 小于 10 在前面加个 0
+			 */
+
+			lessThanTen(item) {
+				return item < 10 ? '0' + item : item
+			},
+
+			/**
+			 * 解析时分秒字符串，例如：00:00:00
+			 * @param {String} timeString
+			 */
+			parseTimeType(timeString) {
+				if (timeString) {
+					let timeArr = timeString.split(':')
+					this.hour = Number(timeArr[0])
+					this.minute = Number(timeArr[1])
+					this.second = Number(timeArr[2])
+				}
+			},
+
+			/**
+			 * 解析选择器初始值，类型可以是字符串、时间戳，例如：2000-10-02、'08:30:00'、 1610695109000
+			 * @param {String | Number} datetime
+			 */
+			initPickerValue(datetime) {
+				let defaultValue = null
+				if (datetime) {
+					defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end)
+				} else {
+					defaultValue = Date.now()
+					defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end)
+				}
+				this.parseValue(defaultValue)
+			},
+
+			/**
+			 * 初始值规则：
+			 * - 用户设置初始值 value
+			 * 	- 设置了起始时间 start、终止时间 end，并 start < value < end，初始值为 value， 否则初始值为 start
+			 * 	- 只设置了起始时间 start，并 start < value，初始值为 value，否则初始值为 start
+			 * 	- 只设置了终止时间 end，并 value < end，初始值为 value，否则初始值为 end
+			 * 	- 无起始终止时间，则初始值为 value
+			 * - 无初始值 value，则初始值为当前本地时间 Date.now()
+			 * @param {Object} value
+			 * @param {Object} dateBase
+			 */
+			compareValueWithStartAndEnd(value, start, end) {
+				let winner = null
+				value = this.superTimeStamp(value)
+				start = this.superTimeStamp(start)
+				end = this.superTimeStamp(end)
+
+				if (start && end) {
+					if (value < start) {
+						winner = new Date(start)
+					} else if (value > end) {
+						winner = new Date(end)
+					} else {
+						winner = new Date(value)
+					}
+				} else if (start && !end) {
+					winner = start <= value ? new Date(value) : new Date(start)
+				} else if (!start && end) {
+					winner = value <= end ? new Date(value) : new Date(end)
+				} else {
+					winner = new Date(value)
+				}
+
+				return winner
+			},
+
+			/**
+			 * 转换为可比较的时间戳，接受日期、时分秒、时间戳
+			 * @param {Object} value
+			 */
+			superTimeStamp(value) {
+				let dateBase = ''
+				if (this.type === 'time' && value && typeof value === 'string') {
+					const now = new Date()
+					const year = now.getFullYear()
+					const month = now.getMonth() + 1
+					const day = now.getDate()
+					dateBase = year + '/' + month + '/' + day + ' '
+				}
+				if (Number(value) && typeof value !== NaN) {
+					value = parseInt(value)
+					dateBase = 0
+				}
+				return this.createTimeStamp(dateBase + value)
+			},
+
+			/**
+			 * 解析默认值 value，字符串、时间戳
+			 * @param {Object} defaultTime
+			 */
+			parseValue(value) {
+				if (!value) {
+					return
+				}
+				if (this.type === 'time' && typeof value === "string") {
+					this.parseTimeType(value)
+				} else {
+					let defaultDate = null
+					defaultDate = new Date(value)
+					if (this.type !== 'time') {
+						this.year = defaultDate.getFullYear()
+						this.month = defaultDate.getMonth() + 1
+						this.day = defaultDate.getDate()
+					}
+					if (this.type !== 'date') {
+						this.hour = defaultDate.getHours()
+						this.minute = defaultDate.getMinutes()
+						this.second = defaultDate.getSeconds()
+					}
+				}
+				if (this.hideSecond) {
+					this.second = 0
+				}
+			},
+
+			/**
+			 * 解析可选择时间范围 start、end，年月日字符串、时间戳
+			 * @param {Object} defaultTime
+			 */
+			parseDatetimeRange(point, pointType) {
+				// 时间为空，则重置为初始值
+				if (!point) {
+					if (pointType === 'start') {
+						this.startYear = 1920
+						this.startMonth = 1
+						this.startDay = 1
+						this.startHour = 0
+						this.startMinute = 0
+						this.startSecond = 0
+					}
+					if (pointType === 'end') {
+						this.endYear = 2120
+						this.endMonth = 12
+						this.endDay = 31
+						this.endHour = 23
+						this.endMinute = 59
+						this.endSecond = 59
+					}
+					return
+				}
+				if (this.type === 'time') {
+					const pointArr = point.split(':')
+					this[pointType + 'Hour'] = Number(pointArr[0])
+					this[pointType + 'Minute'] = Number(pointArr[1])
+					this[pointType + 'Second'] = Number(pointArr[2])
+				} else {
+					if (!point) {
+						pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60
+						return
+					}
+					if (Number(point) && Number(point) !== NaN) {
+						point = parseInt(point)
+					}
+					// datetime 的 end 没有时分秒, 则不限制
+					const hasTime = /[0-9]:[0-9]/
+					if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test(
+							point)) {
+						point = point + ' 23:59:59'
+					}
+					const pointDate = new Date(point)
+					this[pointType + 'Year'] = pointDate.getFullYear()
+					this[pointType + 'Month'] = pointDate.getMonth() + 1
+					this[pointType + 'Day'] = pointDate.getDate()
+					if (this.type === 'datetime') {
+						this[pointType + 'Hour'] = pointDate.getHours()
+						this[pointType + 'Minute'] = pointDate.getMinutes()
+						this[pointType + 'Second'] = pointDate.getSeconds()
+					}
+				}
+			},
+
+			// 获取 年、月、日、时、分、秒 当前可选范围
+			getCurrentRange(value) {
+				const range = []
+				for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) {
+					range.push(i)
+				}
+				return range
+			},
+
+			// 字符串首字母大写
+			capitalize(str) {
+				return str.charAt(0).toUpperCase() + str.slice(1)
+			},
+
+			// 检查当前值是否在范围内，不在则当前值重置为可选范围第一项
+			checkValue(name, value, values) {
+				if (values.indexOf(value) === -1) {
+					this[name] = values[0]
+				}
+			},
+
+			// 每个月的实际天数
+			daysInMonth(year, month) { // Use 1 for January, 2 for February, etc.
+				return new Date(year, month, 0).getDate();
+			},
+
+			//兼容 iOS、safari 日期格式
+			fixIosDateFormat(value) {
+				if (typeof value === 'string') {
+					value = value.replace(/-/g, '/')
+				}
+				return value
+			},
+
+			/**
+			 * 生成时间戳
+			 * @param {Object} time
+			 */
+			createTimeStamp(time) {
+				if (!time) return
+				if (typeof time === "number") {
+					return time
+				} else {
+					time = time.replace(/-/g, '/')
+					if (this.type === 'date') {
+						time = time + ' ' + '00:00:00'
+					}
+					return Date.parse(time)
+				}
+			},
+
+			/**
+			 * 生成日期或时间的字符串
+			 */
+			createDomSting() {
+				const yymmdd = this.year +
+					'-' +
+					this.lessThanTen(this.month) +
+					'-' +
+					this.lessThanTen(this.day)
+
+				let hhmmss = this.lessThanTen(this.hour) +
+					':' +
+					this.lessThanTen(this.minute)
+
+				if (!this.hideSecond) {
+					hhmmss = hhmmss + ':' + this.lessThanTen(this.second)
+				}
+
+				if (this.type === 'date') {
+					return yymmdd
+				} else if (this.type === 'time') {
+					return hhmmss
+				} else {
+					return yymmdd + ' ' + hhmmss
+				}
+			},
+
+			/**
+			 * 初始化返回值，并抛出 change 事件
+			 */
+			initTime(emit = true) {
+				this.time = this.createDomSting()
+				if (!emit) return
+				if (this.returnType === 'timestamp' && this.type !== 'time') {
+					this.$emit('change', this.createTimeStamp(this.time))
+					this.$emit('input', this.createTimeStamp(this.time))
+					this.$emit('update:modelValue', this.createTimeStamp(this.time))
+				} else {
+					this.$emit('change', this.time)
+					this.$emit('input', this.time)
+					this.$emit('update:modelValue', this.time)
+				}
+			},
+
+			/**
+			 * 用户选择日期或时间更新 data
+			 * @param {Object} e
+			 */
+			bindDateChange(e) {
+				const val = e.detail.value
+				this.year = this.years[val[0]]
+				this.month = this.months[val[1]]
+				this.day = this.days[val[2]]
+			},
+			bindTimeChange(e) {
+				const val = e.detail.value
+				this.hour = this.hours[val[0]]
+				this.minute = this.minutes[val[1]]
+				this.second = this.seconds[val[2]]
+			},
+
+			/**
+			 * 初始化弹出层
+			 */
+			initTimePicker() {
+				if (this.disabled) return
+				const value = this.fixIosDateFormat(this.value)
+				this.initPickerValue(value)
+				this.visible = !this.visible
+			},
+
+			/**
+			 * 触发或关闭弹框
+			 */
+			tiggerTimePicker(e) {
+				this.visible = !this.visible
+			},
+
+			/**
+			 * 用户点击“清空”按钮，清空当前值
+			 */
+			clearTime() {
+				this.time = ''
+				this.$emit('change', this.time)
+				this.$emit('input', this.time)
+				this.$emit('update:modelValue', this.time)
+				this.tiggerTimePicker()
+			},
+
+			/**
+			 * 用户点击“确定”按钮
+			 */
+			setTime() {
+				this.initTime()
+				this.tiggerTimePicker()
+			}
+		}
+	}
+</script>
+
+<style>
+	.uni-datetime-picker {
+		/* #ifndef APP-NVUE */
+		/* width: 100%; */
+		/* #endif */
+	}
+
+	.uni-datetime-picker-view {
+		height: 130px;
+		width: 270px;
+		/* #ifndef APP-NVUE */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-datetime-picker-item {
+		height: 50px;
+		line-height: 50px;
+		text-align: center;
+		font-size: 14px;
+	}
+
+	.uni-datetime-picker-btn {
+		margin-top: 60px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		cursor: pointer;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.uni-datetime-picker-btn-text {
+		font-size: 14px;
+		color: #007AFF;
+	}
+
+	.uni-datetime-picker-btn-group {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-datetime-picker-cancel {
+		margin-right: 30px;
+	}
+
+	.uni-datetime-picker-mask {
+		position: fixed;
+		bottom: 0px;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		background-color: rgba(0, 0, 0, 0.4);
+		transition-duration: 0.3s;
+		z-index: 998;
+	}
+
+	.uni-datetime-picker-popup {
+		border-radius: 8px;
+		padding: 30px;
+		width: 270px;
+		/* #ifdef APP-NVUE */
+		height: 500px;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		width: 330px;
+		/* #endif */
+		background-color: #fff;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		transition-duration: 0.3s;
+		z-index: 999;
+	}
+
+	.fix-nvue-height {
+		/* #ifdef APP-NVUE */
+		height: 330px;
+		/* #endif */
+	}
+
+	.uni-datetime-picker-time {
+		color: grey;
+	}
+
+	.uni-datetime-picker-column {
+		height: 50px;
+	}
+
+	.uni-datetime-picker-timebox {
+
+		border: 1px solid #E5E5E5;
+		border-radius: 5px;
+		padding: 7px 10px;
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-datetime-picker-timebox-pointer {
+		/* #ifndef APP-NVUE */
+		cursor: pointer;
+		/* #endif */
+	}
+
+
+	.uni-datetime-picker-disabled {
+		opacity: 0.4;
+		/* #ifdef H5 */
+		cursor: not-allowed !important;
+		/* #endif */
+	}
+
+	.uni-datetime-picker-text {
+		font-size: 14px;
+	}
+
+	.uni-datetime-picker-sign {
+		position: absolute;
+		top: 53px;
+		/* 减掉 10px 的元素高度，兼容nvue */
+		color: #999;
+		/* #ifdef APP-NVUE */
+		font-size: 16px;
+		/* #endif */
+	}
+
+	.sign-left {
+		left: 86px;
+	}
+
+	.sign-right {
+		right: 86px;
+	}
+
+	.sign-center {
+		left: 135px;
+	}
+
+	.uni-datetime-picker__container-box {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-top: 40px;
+	}
+
+	.time-hide-second {
+		width: 180px;
+	}
+</style>
diff --git a/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
new file mode 100644
index 00000000..054c25c0
--- /dev/null
+++ b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
@@ -0,0 +1,995 @@
+<template>
+	<view class="uni-date">
+		<view class="uni-date-editor" @click="show">
+			<slot>
+				<view class="uni-date-editor--x" :class="{'uni-date-editor--x__disabled': disabled,
+		'uni-date-x--border': border}">
+					<view v-if="!isRange" class="uni-date-x uni-date-single">
+						<uni-icons type="calendar" color="#e1e1e1" size="22"></uni-icons>
+						<input class="uni-date__x-input" type="text" v-model="singleVal"
+							:placeholder="singlePlaceholderText" :disabled="true" />
+					</view>
+					<view v-else class="uni-date-x uni-date-range">
+						<uni-icons type="calendar" color="#e1e1e1" size="22"></uni-icons>
+						<input class="uni-date__x-input t-c" type="text" v-model="range.startDate"
+							:placeholder="startPlaceholderText" :disabled="true" />
+						<slot>
+							<view class="">{{rangeSeparator}}</view>
+						</slot>
+						<input class="uni-date__x-input t-c" type="text" v-model="range.endDate"
+							:placeholder="endPlaceholderText" :disabled="true" />
+					</view>
+					<view v-if="showClearIcon" class="uni-date__icon-clear" @click.stop="clear">
+						<uni-icons type="clear" color="#e1e1e1" size="18"></uni-icons>
+					</view>
+				</view>
+			</slot>
+		</view>
+
+		<view v-show="popup" class="uni-date-mask" @click="close"></view>
+		<view v-if="!isPhone" ref="datePicker" v-show="popup" class="uni-date-picker__container">
+			<view v-if="!isRange" class="uni-date-single--x" :style="popover">
+				<view class="uni-popper__arrow"></view>
+				<view v-if="hasTime" class="uni-date-changed popup-x-header">
+					<input class="uni-date__input t-c" type="text" v-model="tempSingleDate"
+						:placeholder="selectDateText" />
+					<time-picker type="time" v-model="time" :border="false" :disabled="!tempSingleDate"
+						:start="reactStartTime" :end="reactEndTime" :hideSecond="hideSecond" style="width: 100%;">
+						<input class="uni-date__input t-c" type="text" v-model="time" :placeholder="selectTimeText"
+							:disabled="!tempSingleDate" />
+					</time-picker>
+				</view>
+				<calendar ref="pcSingle" :showMonth="false" :start-date="caleRange.startDate"
+					:end-date="caleRange.endDate" :date="defSingleDate" @change="singleChange"
+					style="padding: 0 8px;" />
+				<view v-if="hasTime" class="popup-x-footer">
+					<!-- <text class="">此刻</text> -->
+					<text class="confirm" @click="confirmSingleChange">{{okText}}</text>
+				</view>
+				<view class="uni-date-popper__arrow"></view>
+			</view>
+
+			<view v-else class="uni-date-range--x" :style="popover">
+				<view class="uni-popper__arrow"></view>
+				<view v-if="hasTime" class="popup-x-header uni-date-changed">
+					<view class="popup-x-header--datetime">
+						<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startDate"
+							:placeholder="startDateText" />
+						<time-picker type="time" v-model="tempRange.startTime" :start="reactStartTime" :border="false"
+							:disabled="!tempRange.startDate" :hideSecond="hideSecond">
+							<input class="uni-date__input uni-date-range__input" type="text"
+								v-model="tempRange.startTime" :placeholder="startTimeText"
+								:disabled="!tempRange.startDate" />
+						</time-picker>
+					</view>
+					<uni-icons type="arrowthinright" color="#999" style="line-height: 40px;"></uni-icons>
+					<view class="popup-x-header--datetime">
+						<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endDate"
+							:placeholder="endDateText" />
+						<time-picker type="time" v-model="tempRange.endTime" :end="reactEndTime" :border="false"
+							:disabled="!tempRange.endDate" :hideSecond="hideSecond">
+							<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endTime"
+								:placeholder="endTimeText" :disabled="!tempRange.endDate" />
+						</time-picker>
+					</view>
+				</view>
+				<view class="popup-x-body">
+					<calendar ref="left" :showMonth="false" :start-date="caleRange.startDate"
+						:end-date="caleRange.endDate" :range="true" @change="leftChange" :pleStatus="endMultipleStatus"
+						@firstEnterCale="updateRightCale" @monthSwitch="leftMonthSwitch" style="padding: 0 8px;" />
+					<calendar ref="right" :showMonth="false" :start-date="caleRange.startDate"
+						:end-date="caleRange.endDate" :range="true" @change="rightChange"
+						:pleStatus="startMultipleStatus" @firstEnterCale="updateLeftCale"
+						@monthSwitch="rightMonthSwitch" style="padding: 0 8px;border-left: 1px solid #F1F1F1;" />
+				</view>
+				<view v-if="hasTime" class="popup-x-footer">
+					<text class="" @click="clear">{{clearText}}</text>
+					<text class="confirm" @click="confirmRangeChange">{{okText}}</text>
+				</view>
+			</view>
+		</view>
+		<calendar v-show="isPhone" ref="mobile" :clearDate="false" :date="defSingleDate" :defTime="reactMobDefTime"
+			:start-date="caleRange.startDate" :end-date="caleRange.endDate" :selectableTimes="mobSelectableTime"
+			:pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :typeHasTime="hasTime" :insert="false"
+			:hideSecond="hideSecond" @confirm="mobileChange" />
+	</view>
+</template>
+<script>
+	/**
+	 * DatetimePicker 时间选择器
+	 * @description 同时支持 PC 和移动端使用日历选择日期和日期范围
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3962
+	 * @property {String} type 选择器类型
+	 * @property {String|Number|Array|Date} value 绑定值
+	 * @property {String} placeholder 单选择时的占位内容
+	 * @property {String} start 起始时间
+	 * @property {String} end 终止时间
+	 * @property {String} start-placeholder 范围选择时开始日期的占位内容
+	 * @property {String} end-placeholder 范围选择时结束日期的占位内容
+	 * @property {String} range-separator 选择范围时的分隔符
+	 * @property {Boolean} border = [true|false] 是否有边框
+	 * @property {Boolean} disabled = [true|false] 是否禁用
+	 * @property {Boolean} clearIcon = [true|false] 是否显示清除按钮（仅PC端适用）
+	 * @event {Function} change 确定日期时触发的事件
+	 * @event {Function} show 打开弹出层
+	 * @event {Function} close 关闭弹出层
+	 * @event {Function} clear 清除上次选中的状态和值
+	 **/
+	import calendar from './calendar.vue'
+	import timePicker from './time-picker.vue'
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {
+		t
+	} = initVueI18n(messages)
+
+	export default {
+		name: 'UniDatetimePicker',
+		components: {
+			calendar,
+			timePicker
+		},
+		data() {
+			return {
+				isRange: false,
+				hasTime: false,
+				mobileRange: false,
+				// 单选
+				singleVal: '',
+				tempSingleDate: '',
+				defSingleDate: '',
+				time: '',
+				// 范围选
+				caleRange: {
+					startDate: '',
+					startTime: '',
+					endDate: '',
+					endTime: ''
+				},
+				range: {
+					startDate: '',
+					// startTime: '',
+					endDate: '',
+					// endTime: ''
+				},
+				tempRange: {
+					startDate: '',
+					startTime: '',
+					endDate: '',
+					endTime: ''
+				},
+				// 左右日历同步数据
+				startMultipleStatus: {
+					before: '',
+					after: '',
+					data: [],
+					fulldate: ''
+				},
+				endMultipleStatus: {
+					before: '',
+					after: '',
+					data: [],
+					fulldate: ''
+				},
+				visible: false,
+				popup: false,
+				popover: null,
+				isEmitValue: false,
+				isPhone: false,
+				isFirstShow: true,
+			}
+		},
+		props: {
+			type: {
+				type: String,
+				default: 'datetime'
+			},
+			value: {
+				type: [String, Number, Array, Date],
+				default: ''
+			},
+			modelValue: {
+				type: [String, Number, Array, Date],
+				default: ''
+			},
+			start: {
+				type: [Number, String],
+				default: ''
+			},
+			end: {
+				type: [Number, String],
+				default: ''
+			},
+			returnType: {
+				type: String,
+				default: 'string'
+			},
+			placeholder: {
+				type: String,
+				default: ''
+			},
+			startPlaceholder: {
+				type: String,
+				default: ''
+			},
+			endPlaceholder: {
+				type: String,
+				default: ''
+			},
+			rangeSeparator: {
+				type: String,
+				default: '-'
+			},
+			border: {
+				type: [Boolean],
+				default: true
+			},
+			disabled: {
+				type: [Boolean],
+				default: false
+			},
+			clearIcon: {
+				type: [Boolean],
+				default: true
+			},
+			hideSecond: {
+				type: [Boolean],
+				default: false
+			}
+		},
+		watch: {
+			type: {
+				immediate: true,
+				handler(newVal, oldVal) {
+					if (newVal.indexOf('time') !== -1) {
+						this.hasTime = true
+					} else {
+						this.hasTime = false
+					}
+					if (newVal.indexOf('range') !== -1) {
+						this.isRange = true
+					} else {
+						this.isRange = false
+					}
+				}
+			},
+			// #ifndef VUE3
+			value: {
+				immediate: true,
+				handler(newVal, oldVal) {
+					if (this.isEmitValue) {
+						this.isEmitValue = false
+						return
+					}
+					this.initPicker(newVal)
+				}
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				immediate: true,
+				handler(newVal, oldVal) {
+					if (this.isEmitValue) {
+						this.isEmitValue = false
+						return
+					}
+					this.initPicker(newVal)
+				}
+			},
+			// #endif
+			start: {
+				immediate: true,
+				handler(newVal, oldVal) {
+					if (!newVal) return
+					const {
+						defDate,
+						defTime
+					} = this.parseDate(newVal)
+					this.caleRange.startDate = defDate
+					if (this.hasTime) {
+						this.caleRange.startTime = defTime
+					}
+				}
+			},
+			end: {
+				immediate: true,
+				handler(newVal, oldVal) {
+					if (!newVal) return
+					const {
+						defDate,
+						defTime
+					} = this.parseDate(newVal)
+					this.caleRange.endDate = defDate
+					if (this.hasTime) {
+						this.caleRange.endTime = defTime
+					}
+				}
+			},
+		},
+		computed: {
+			reactStartTime() {
+				const activeDate = this.isRange ? this.tempRange.startDate : this.tempSingleDate
+				const res = activeDate === this.caleRange.startDate ? this.caleRange.startTime : ''
+				return res
+			},
+			reactEndTime() {
+				const activeDate = this.isRange ? this.tempRange.endDate : this.tempSingleDate
+				const res = activeDate === this.caleRange.endDate ? this.caleRange.endTime : ''
+				return res
+			},
+			reactMobDefTime() {
+				const times = {
+					start: this.tempRange.startTime,
+					end: this.tempRange.endTime
+				}
+				return this.isRange ? times : this.time
+			},
+			mobSelectableTime() {
+				return {
+					start: this.caleRange.startTime,
+					end: this.caleRange.endTime
+				}
+			},
+			datePopupWidth() {
+				// todo
+				return this.isRange ? 653 : 301
+			},
+
+			/**
+			 * for i18n
+			 */
+			singlePlaceholderText() {
+				return this.placeholder || (this.type === 'date' ? this.selectDateText : t(
+					"uni-datetime-picker.selectDateTime"))
+			},
+			startPlaceholderText() {
+				return this.startPlaceholder || this.startDateText
+			},
+			endPlaceholderText() {
+				return this.endPlaceholder || this.endDateText
+			},
+			selectDateText() {
+				return t("uni-datetime-picker.selectDate")
+			},
+			selectTimeText() {
+				return t("uni-datetime-picker.selectTime")
+			},
+			startDateText() {
+				return this.startPlaceholder || t("uni-datetime-picker.startDate")
+			},
+			startTimeText() {
+				return t("uni-datetime-picker.startTime")
+			},
+			endDateText() {
+				return this.endPlaceholder || t("uni-datetime-picker.endDate")
+			},
+			endTimeText() {
+				return t("uni-datetime-picker.endTime")
+			},
+			okText() {
+				return t("uni-datetime-picker.ok")
+			},
+			clearText() {
+				return t("uni-datetime-picker.clear")
+			},
+			showClearIcon() {
+				const {
+					clearIcon,
+					disabled,
+					singleVal,
+					range
+				} = this
+				const bool = clearIcon && !disabled && (singleVal || (range.startDate && range.endDate))
+				return bool
+			}
+		},
+		created() {
+			this.form = this.getForm('uniForms')
+			this.formItem = this.getForm('uniFormsItem')
+
+			// if (this.formItem) {
+			// 	if (this.formItem.name) {
+			// 		this.rename = this.formItem.name
+			// 		this.form.inputChildrens.push(this)
+			// 	}
+			// }
+		},
+		mounted() {
+			this.platform()
+		},
+		methods: {
+			/**
+			 * 获取父元素实例
+			 */
+			getForm(name = 'uniForms') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+			initPicker(newVal) {
+				if (!newVal || Array.isArray(newVal) && !newVal.length) {
+					this.$nextTick(() => {
+						this.clear(false)
+					})
+					return
+				}
+				if (!Array.isArray(newVal) && !this.isRange) {
+					const {
+						defDate,
+						defTime
+					} = this.parseDate(newVal)
+					this.singleVal = defDate
+					this.tempSingleDate = defDate
+					this.defSingleDate = defDate
+					if (this.hasTime) {
+						this.singleVal = defDate + ' ' + defTime
+						this.time = defTime
+					}
+				} else {
+					const [before, after] = newVal
+					if (!before && !after) return
+					const defBefore = this.parseDate(before)
+					const defAfter = this.parseDate(after)
+					const startDate = defBefore.defDate
+					const endDate = defAfter.defDate
+					this.range.startDate = this.tempRange.startDate = startDate
+					this.range.endDate = this.tempRange.endDate = endDate
+
+					if (this.hasTime) {
+						this.range.startDate = defBefore.defDate + ' ' + defBefore.defTime
+						this.range.endDate = defAfter.defDate + ' ' + defAfter.defTime
+						this.tempRange.startTime = defBefore.defTime
+						this.tempRange.endTime = defAfter.defTime
+					}
+					const defaultRange = {
+						before: defBefore.defDate,
+						after: defAfter.defDate
+					}
+					this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, defaultRange, {
+						which: 'right'
+					})
+					this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, defaultRange, {
+						which: 'left'
+					})
+				}
+			},
+			updateLeftCale(e) {
+				const left = this.$refs.left
+				// 设置范围选
+				left.cale.setHoverMultiple(e.after)
+				left.setDate(this.$refs.left.nowDate.fullDate)
+			},
+			updateRightCale(e) {
+				const right = this.$refs.right
+				// 设置范围选
+				right.cale.setHoverMultiple(e.after)
+				right.setDate(this.$refs.right.nowDate.fullDate)
+			},
+			platform() {
+				const systemInfo = uni.getWindowInfo()
+				this.isPhone = systemInfo.windowWidth <= 500
+				this.windowWidth = systemInfo.windowWidth
+			},
+			show(event) {
+				if (this.disabled) {
+					return
+				}
+				this.platform()
+				if (this.isPhone) {
+					this.$refs.mobile.open()
+					return
+				}
+				this.popover = {
+					top: '10px'
+				}
+				const dateEditor = uni.createSelectorQuery().in(this).select(".uni-date-editor")
+				dateEditor.boundingClientRect(rect => {
+					if (this.windowWidth - rect.left < this.datePopupWidth) {
+						this.popover.right = 0
+					}
+				}).exec()
+				setTimeout(() => {
+					this.popup = !this.popup
+					if (!this.isPhone && this.isRange && this.isFirstShow) {
+						this.isFirstShow = false
+						const {
+							startDate,
+							endDate
+						} = this.range
+						if (startDate && endDate) {
+							if (this.diffDate(startDate, endDate) < 30) {
+								this.$refs.right.next()
+							}
+						} else {
+							this.$refs.right.next()
+							this.$refs.right.cale.lastHover = false
+						}
+					}
+
+				}, 50)
+			},
+
+			close() {
+				setTimeout(() => {
+					this.popup = false
+					this.$emit('maskClick', this.value)
+				}, 20)
+			},
+			setEmit(value) {
+				if (this.returnType === "timestamp" || this.returnType === "date") {
+					if (!Array.isArray(value)) {
+						if (!this.hasTime) {
+							value = value + ' ' + '00:00:00'
+						}
+						value = this.createTimestamp(value)
+						if (this.returnType === "date") {
+							value = new Date(value)
+						}
+					} else {
+						if (!this.hasTime) {
+							value[0] = value[0] + ' ' + '00:00:00'
+							value[1] = value[1] + ' ' + '00:00:00'
+						}
+						value[0] = this.createTimestamp(value[0])
+						value[1] = this.createTimestamp(value[1])
+						if (this.returnType === "date") {
+							value[0] = new Date(value[0])
+							value[1] = new Date(value[1])
+						}
+					}
+				}
+				this.formItem && this.formItem.setValue(value)
+				this.$emit('change', value)
+				this.$emit('input', value)
+				this.$emit('update:modelValue', value)
+				this.isEmitValue = true
+			},
+			createTimestamp(date) {
+				date = this.fixIosDateFormat(date)
+				return Date.parse(new Date(date))
+			},
+			singleChange(e) {
+				this.tempSingleDate = e.fulldate
+				if (this.hasTime) return
+				this.confirmSingleChange()
+			},
+
+			confirmSingleChange() {
+				if (!this.tempSingleDate) {
+					this.popup = false
+					return
+				}
+				if (this.hasTime) {
+					this.singleVal = this.tempSingleDate + ' ' + (this.time ? this.time : '00:00:00')
+				} else {
+					this.singleVal = this.tempSingleDate
+				}
+				this.setEmit(this.singleVal)
+				this.popup = false
+			},
+
+			leftChange(e) {
+				const {
+					before,
+					after
+				} = e.range
+				this.rangeChange(before, after)
+				const obj = {
+					before: e.range.before,
+					after: e.range.after,
+					data: e.range.data,
+					fulldate: e.fulldate
+				}
+				this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, obj)
+			},
+
+			rightChange(e) {
+				const {
+					before,
+					after
+				} = e.range
+				this.rangeChange(before, after)
+				const obj = {
+					before: e.range.before,
+					after: e.range.after,
+					data: e.range.data,
+					fulldate: e.fulldate
+				}
+				this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, obj)
+			},
+
+			mobileChange(e) {
+				if (this.isRange) {
+					const {
+						before,
+						after
+					} = e.range
+					this.handleStartAndEnd(before, after, true)
+					if (this.hasTime) {
+						const {
+							startTime,
+							endTime
+						} = e.timeRange
+						this.tempRange.startTime = startTime
+						this.tempRange.endTime = endTime
+					}
+					this.confirmRangeChange()
+
+				} else {
+					if (this.hasTime) {
+						this.singleVal = e.fulldate + ' ' + e.time
+					} else {
+						this.singleVal = e.fulldate
+					}
+					this.setEmit(this.singleVal)
+				}
+				this.$refs.mobile.close()
+			},
+
+			rangeChange(before, after) {
+				if (!(before && after)) return
+				this.handleStartAndEnd(before, after, true)
+				if (this.hasTime) return
+				this.confirmRangeChange()
+			},
+
+			confirmRangeChange() {
+				if (!this.tempRange.startDate && !this.tempRange.endDate) {
+					this.popup = false
+					return
+				}
+				let start, end
+				if (!this.hasTime) {
+					start = this.range.startDate = this.tempRange.startDate
+					end = this.range.endDate = this.tempRange.endDate
+				} else {
+					start = this.range.startDate = this.tempRange.startDate + ' ' +
+						(this.tempRange.startTime ? this.tempRange.startTime : '00:00:00')
+					end = this.range.endDate = this.tempRange.endDate + ' ' +
+						(this.tempRange.endTime ? this.tempRange.endTime : '00:00:00')
+				}
+				const displayRange = [start, end]
+				this.setEmit(displayRange)
+				this.popup = false
+			},
+
+			handleStartAndEnd(before, after, temp = false) {
+				if (!(before && after)) return
+				const type = temp ? 'tempRange' : 'range'
+				if (this.dateCompare(before, after)) {
+					this[type].startDate = before
+					this[type].endDate = after
+				} else {
+					this[type].startDate = after
+					this[type].endDate = before
+				}
+			},
+
+			/**
+			 * 比较时间大小
+			 */
+			dateCompare(startDate, endDate) {
+				// 计算截止时间
+				startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
+				// 计算详细项的截止时间
+				endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
+				if (startDate <= endDate) {
+					return true
+				} else {
+					return false
+				}
+			},
+
+			/**
+			 * 比较时间差
+			 */
+			diffDate(startDate, endDate) {
+				// 计算截止时间
+				startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
+				// 计算详细项的截止时间
+				endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
+				const diff = (endDate - startDate) / (24 * 60 * 60 * 1000)
+				return Math.abs(diff)
+			},
+
+			clear(needEmit = true) {
+				if (!this.isRange) {
+					this.singleVal = ''
+					this.tempSingleDate = ''
+					this.time = ''
+					if (this.isPhone) {
+						this.$refs.mobile && this.$refs.mobile.clearCalender()
+					} else {
+						this.$refs.pcSingle && this.$refs.pcSingle.clearCalender()
+					}
+					if (needEmit) {
+						this.formItem && this.formItem.setValue('')
+						this.$emit('change', '')
+						this.$emit('input', '')
+						this.$emit('update:modelValue', '')
+					}
+				} else {
+					this.range.startDate = ''
+					this.range.endDate = ''
+					this.tempRange.startDate = ''
+					this.tempRange.startTime = ''
+					this.tempRange.endDate = ''
+					this.tempRange.endTime = ''
+					if (this.isPhone) {
+						this.$refs.mobile && this.$refs.mobile.clearCalender()
+					} else {
+						this.$refs.left && this.$refs.left.clearCalender()
+						this.$refs.right && this.$refs.right.clearCalender()
+						this.$refs.right && this.$refs.right.next()
+					}
+					if (needEmit) {
+						this.formItem && this.formItem.setValue([])
+						this.$emit('change', [])
+						this.$emit('input', [])
+						this.$emit('update:modelValue', [])
+					}
+				}
+			},
+
+			parseDate(date) {
+				date = this.fixIosDateFormat(date)
+				const defVal = new Date(date)
+				const year = defVal.getFullYear()
+				const month = defVal.getMonth() + 1
+				const day = defVal.getDate()
+				const hour = defVal.getHours()
+				const minute = defVal.getMinutes()
+				const second = defVal.getSeconds()
+				const defDate = year + '-' + this.lessTen(month) + '-' + this.lessTen(day)
+				const defTime = this.lessTen(hour) + ':' + this.lessTen(minute) + (this.hideSecond ? '' : (':' + this
+					.lessTen(second)))
+				return {
+					defDate,
+					defTime
+				}
+			},
+
+			lessTen(item) {
+				return item < 10 ? '0' + item : item
+			},
+
+			//兼容 iOS、safari 日期格式
+			fixIosDateFormat(value) {
+				if (typeof value === 'string') {
+					value = value.replace(/-/g, '/')
+				}
+				return value
+			},
+
+			leftMonthSwitch(e) {
+			},
+			rightMonthSwitch(e) {
+			}
+		}
+	}
+</script>
+
+<style>
+	.uni-date-x {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		padding: 0 10px;
+		border-radius: 4px;
+		background-color: #fff;
+		color: #666;
+		font-size: 14px;
+	}
+
+	.uni-date-x--border {
+		box-sizing: border-box;
+		border-radius: 4px;
+		border: 1px solid #dcdfe6;
+	}
+
+	.uni-date-editor--x {
+		position: relative;
+	}
+
+	.uni-date-editor--x .uni-date__icon-clear {
+		position: absolute;
+		top: 0;
+		right: 0;
+		display: inline-block;
+		box-sizing: border-box;
+		border: 9px solid transparent;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-date__x-input {
+		padding: 0 8px;
+		height: 40px;
+		width: 100%;
+		line-height: 40px;
+		font-size: 14px;
+	}
+
+	.t-c {
+		text-align: center;
+	}
+
+	.uni-date__input {
+		height: 40px;
+		width: 100%;
+		line-height: 40px;
+		font-size: 14px;
+	}
+
+	.uni-date-range__input {
+		text-align: center;
+		max-width: 142px;
+	}
+
+	.uni-date-picker__container {
+		position: relative;
+		/* 		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		box-sizing: border-box;
+		z-index: 996;
+		font-size: 14px; */
+	}
+
+	.uni-date-mask {
+		position: fixed;
+		bottom: 0px;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		background-color: rgba(0, 0, 0, 0);
+		transition-duration: 0.3s;
+		z-index: 996;
+	}
+
+	.uni-date-single--x {
+		/* padding: 0 8px; */
+		background-color: #fff;
+		position: absolute;
+		top: 0;
+		z-index: 999;
+		border: 1px solid #EBEEF5;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		border-radius: 4px;
+	}
+
+	.uni-date-range--x {
+		/* padding: 0 8px; */
+		background-color: #fff;
+		position: absolute;
+		top: 0;
+		z-index: 999;
+		border: 1px solid #EBEEF5;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		border-radius: 4px;
+	}
+
+	.uni-date-editor--x__disabled {
+		opacity: 0.4;
+		cursor: default;
+	}
+
+	.uni-date-editor--logo {
+		width: 16px;
+		height: 16px;
+		vertical-align: middle;
+	}
+
+	/* 添加时间 */
+	.popup-x-header {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		/* justify-content: space-between; */
+	}
+
+	.popup-x-header--datetime {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex: 1;
+	}
+
+	.popup-x-body {
+		display: flex;
+	}
+
+	.popup-x-footer {
+		padding: 0 15px;
+		border-top-color: #F1F1F1;
+		border-top-style: solid;
+		border-top-width: 1px;
+		/* background-color: #fff; */
+		line-height: 40px;
+		text-align: right;
+		color: #666;
+	}
+
+	.popup-x-footer text:hover {
+		color: #007aff;
+		cursor: pointer;
+		opacity: 0.8;
+	}
+
+	.popup-x-footer .confirm {
+		margin-left: 20px;
+		color: #007aff;
+	}
+
+	.uni-date-changed {
+		/* background-color: #fff; */
+		text-align: center;
+		color: #333;
+		border-bottom-color: #F1F1F1;
+		border-bottom-style: solid;
+		border-bottom-width: 1px;
+		/* padding: 0 50px; */
+	}
+
+	.uni-date-changed--time text {
+		/* padding: 0 20px; */
+		height: 50px;
+		line-height: 50px;
+	}
+
+	.uni-date-changed .uni-date-changed--time {
+		/* display: flex; */
+		flex: 1;
+	}
+
+	.uni-date-changed--time-date {
+		color: #333;
+		opacity: 0.6;
+	}
+
+	.mr-50 {
+		margin-right: 50px;
+	}
+
+	/* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
+	.uni-popper__arrow,
+	.uni-popper__arrow::after {
+		position: absolute;
+		display: block;
+		width: 0;
+		height: 0;
+		border-color: transparent;
+		border-style: solid;
+		border-width: 6px;
+	}
+
+	.uni-popper__arrow {
+		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+		top: -6px;
+		left: 10%;
+		margin-right: 3px;
+		border-top-width: 0;
+		border-bottom-color: #EBEEF5;
+	}
+
+	.uni-popper__arrow::after {
+		content: " ";
+		top: 1px;
+		margin-left: -6px;
+		border-top-width: 0;
+		border-bottom-color: #fff;
+	}
+</style>
diff --git a/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js
new file mode 100644
index 00000000..efa5773a
--- /dev/null
+++ b/src/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js
@@ -0,0 +1,410 @@
+class Calendar {
+	constructor({
+		date,
+		selected,
+		startDate,
+		endDate,
+		range,
+		// multipleStatus
+	} = {}) {
+		// 当前日期
+		this.date = this.getDate(new Date()) // 当前初入日期
+		// 打点信息
+		this.selected = selected || [];
+		// 范围开始
+		this.startDate = startDate
+		// 范围结束
+		this.endDate = endDate
+		this.range = range
+		// 多选状态
+		this.cleanMultipleStatus()
+		// 每周日期
+		this.weeks = {}
+		// this._getWeek(this.date.fullDate)
+		// this.multipleStatus = multipleStatus
+		this.lastHover = false
+	}
+	/**
+	 * 设置日期
+	 * @param {Object} date
+	 */
+	setDate(date) {
+		this.selectDate = this.getDate(date)
+		this._getWeek(this.selectDate.fullDate)
+	}
+
+	/**
+	 * 清理多选状态
+	 */
+	cleanMultipleStatus() {
+		this.multipleStatus = {
+			before: '',
+			after: '',
+			data: []
+		}
+	}
+
+	/**
+	 * 重置开始日期
+	 */
+	resetSatrtDate(startDate) {
+		// 范围开始
+		this.startDate = startDate
+
+	}
+
+	/**
+	 * 重置结束日期
+	 */
+	resetEndDate(endDate) {
+		// 范围结束
+		this.endDate = endDate
+	}
+
+	/**
+	 * 获取任意时间
+	 */
+	getDate(date, AddDayCount = 0, str = 'day') {
+		if (!date) {
+			date = new Date()
+		}
+		if (typeof date !== 'object') {
+			date = date.replace(/-/g, '/')
+		}
+		const dd = new Date(date)
+		switch (str) {
+			case 'day':
+				dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
+				break
+			case 'month':
+				if (dd.getDate() === 31) {
+					dd.setDate(dd.getDate() + AddDayCount)
+				} else {
+					dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
+				}
+				break
+			case 'year':
+				dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
+				break
+		}
+		const y = dd.getFullYear()
+		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
+		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
+		return {
+			fullDate: y + '-' + m + '-' + d,
+			year: y,
+			month: m,
+			date: d,
+			day: dd.getDay()
+		}
+	}
+
+
+	/**
+	 * 获取上月剩余天数
+	 */
+	_getLastMonthDays(firstDay, full) {
+		let dateArr = []
+		for (let i = firstDay; i > 0; i--) {
+			const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
+			dateArr.push({
+				date: beforeDate,
+				month: full.month - 1,
+				disable: true
+			})
+		}
+		return dateArr
+	}
+	/**
+	 * 获取本月天数
+	 */
+	_currentMonthDys(dateData, full) {
+		let dateArr = []
+		let fullDate = this.date.fullDate
+		for (let i = 1; i <= dateData; i++) {
+			let isinfo = false
+			let nowDate = full.year + '-' + (full.month < 10 ?
+				full.month : full.month) + '-' + (i < 10 ?
+				'0' + i : i)
+			// 是否今天
+			let isDay = fullDate === nowDate
+			// 获取打点信息
+			let info = this.selected && this.selected.find((item) => {
+				if (this.dateEqual(nowDate, item.date)) {
+					return item
+				}
+			})
+
+			// 日期禁用
+			let disableBefore = true
+			let disableAfter = true
+			if (this.startDate) {
+				// let dateCompBefore = this.dateCompare(this.startDate, fullDate)
+				// disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
+				disableBefore = this.dateCompare(this.startDate, nowDate)
+			}
+
+			if (this.endDate) {
+				// let dateCompAfter = this.dateCompare(fullDate, this.endDate)
+				// disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
+				disableAfter = this.dateCompare(nowDate, this.endDate)
+			}
+			let multiples = this.multipleStatus.data
+			let checked = false
+			let multiplesStatus = -1
+			if (this.range) {
+				if (multiples) {
+					multiplesStatus = multiples.findIndex((item) => {
+						return this.dateEqual(item, nowDate)
+					})
+				}
+				if (multiplesStatus !== -1) {
+					checked = true
+				}
+			}
+			let data = {
+				fullDate: nowDate,
+				year: full.year,
+				date: i,
+				multiple: this.range ? checked : false,
+				beforeMultiple: this.isLogicBefore(nowDate, this.multipleStatus.before, this.multipleStatus.after),
+				afterMultiple: this.isLogicAfter(nowDate, this.multipleStatus.before, this.multipleStatus.after),
+				month: full.month,
+				disable: !(disableBefore && disableAfter),
+				isDay,
+				userChecked: false
+			}
+			if (info) {
+				data.extraInfo = info
+			}
+
+			dateArr.push(data)
+		}
+		return dateArr
+	}
+	/**
+	 * 获取下月天数
+	 */
+	_getNextMonthDays(surplus, full) {
+		let dateArr = []
+		for (let i = 1; i < surplus + 1; i++) {
+			dateArr.push({
+				date: i,
+				month: Number(full.month) + 1,
+				disable: true
+			})
+		}
+		return dateArr
+	}
+
+	/**
+	 * 获取当前日期详情
+	 * @param {Object} date
+	 */
+	getInfo(date) {
+		if (!date) {
+			date = new Date()
+		}
+		const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
+		return dateInfo
+	}
+
+	/**
+	 * 比较时间大小
+	 */
+	dateCompare(startDate, endDate) {
+		// 计算截止时间
+		startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
+		// 计算详细项的截止时间
+		endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
+		if (startDate <= endDate) {
+			return true
+		} else {
+			return false
+		}
+	}
+
+	/**
+	 * 比较时间是否相等
+	 */
+	dateEqual(before, after) {
+		// 计算截止时间
+		before = new Date(before.replace('-', '/').replace('-', '/'))
+		// 计算详细项的截止时间
+		after = new Date(after.replace('-', '/').replace('-', '/'))
+		if (before.getTime() - after.getTime() === 0) {
+			return true
+		} else {
+			return false
+		}
+	}
+
+	/**
+	 *  比较真实起始日期
+	 */
+
+	isLogicBefore(currentDay, before, after) {
+		let logicBefore = before
+		if (before && after) {
+			logicBefore = this.dateCompare(before, after) ? before : after
+		}
+		return this.dateEqual(logicBefore, currentDay)
+	}
+
+	isLogicAfter(currentDay, before, after) {
+		let logicAfter = after
+		if (before && after) {
+			logicAfter = this.dateCompare(before, after) ? after : before
+		}
+		return this.dateEqual(logicAfter, currentDay)
+	}
+
+	/**
+	 * 获取日期范围内所有日期
+	 * @param {Object} begin
+	 * @param {Object} end
+	 */
+	geDateAll(begin, end) {
+		var arr = []
+		var ab = begin.split('-')
+		var ae = end.split('-')
+		var db = new Date()
+		db.setFullYear(ab[0], ab[1] - 1, ab[2])
+		var de = new Date()
+		de.setFullYear(ae[0], ae[1] - 1, ae[2])
+		var unixDb = db.getTime() - 24 * 60 * 60 * 1000
+		var unixDe = de.getTime() - 24 * 60 * 60 * 1000
+		for (var k = unixDb; k <= unixDe;) {
+			k = k + 24 * 60 * 60 * 1000
+			arr.push(this.getDate(new Date(parseInt(k))).fullDate)
+		}
+		return arr
+	}
+
+	/**
+	 *  获取多选状态
+	 */
+	setMultiple(fullDate) {
+		let {
+			before,
+			after
+		} = this.multipleStatus
+		if (!this.range) return
+		if (before && after) {
+			if (!this.lastHover) {
+				this.lastHover = true
+				return
+			}
+			this.multipleStatus.before = fullDate
+			this.multipleStatus.after = ''
+			this.multipleStatus.data = []
+			this.multipleStatus.fulldate = ''
+			this.lastHover = false
+		} else {
+			if (!before) {
+				this.multipleStatus.before = fullDate
+				this.lastHover = false
+			} else {
+				this.multipleStatus.after = fullDate
+				if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
+					this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
+						.after);
+				} else {
+					this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
+						.before);
+				}
+				this.lastHover = true
+			}
+		}
+		this._getWeek(fullDate)
+	}
+
+	/**
+	 *  鼠标 hover 更新多选状态
+	 */
+	setHoverMultiple(fullDate) {
+		let {
+			before,
+			after
+		} = this.multipleStatus
+
+		if (!this.range) return
+		if (this.lastHover) return
+
+		if (!before) {
+			this.multipleStatus.before = fullDate
+		} else {
+			this.multipleStatus.after = fullDate
+			if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
+				this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
+			} else {
+				this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
+			}
+		}
+		this._getWeek(fullDate)
+	}
+
+	/**
+	 * 更新默认值多选状态
+	 */
+	setDefaultMultiple(before, after) {
+		this.multipleStatus.before = before
+		this.multipleStatus.after = after
+		if (before && after) {
+			if (this.dateCompare(before, after)) {
+				this.multipleStatus.data = this.geDateAll(before, after);
+				this._getWeek(after)
+			} else {
+				this.multipleStatus.data = this.geDateAll(after, before);
+				this._getWeek(before)
+			}
+		}
+	}
+
+	/**
+	 * 获取每周数据
+	 * @param {Object} dateData
+	 */
+	_getWeek(dateData) {
+		const {
+			fullDate,
+			year,
+			month,
+			date,
+			day
+		} = this.getDate(dateData)
+		let firstDay = new Date(year, month - 1, 1).getDay()
+		let currentDay = new Date(year, month, 0).getDate()
+		let dates = {
+			lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
+			currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
+			nextMonthDays: [], // 下个月开始几天
+			weeks: []
+		}
+		let canlender = []
+		const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
+		dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
+		canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
+		let weeks = {}
+		// 拼接数组  上个月开始几天 + 本月天数+ 下个月开始几天
+		for (let i = 0; i < canlender.length; i++) {
+			if (i % 7 === 0) {
+				weeks[parseInt(i / 7)] = new Array(7)
+			}
+			weeks[parseInt(i / 7)][i % 7] = canlender[i]
+		}
+		this.canlender = canlender
+		this.weeks = weeks
+	}
+
+	//静态方法
+	// static init(date) {
+	// 	if (!this.instance) {
+	// 		this.instance = new Calendar(date);
+	// 	}
+	// 	return this.instance;
+	// }
+}
+
+
+export default Calendar
diff --git a/src/uni_modules/uni-datetime-picker/package.json b/src/uni_modules/uni-datetime-picker/package.json
new file mode 100644
index 00000000..0e441033
--- /dev/null
+++ b/src/uni_modules/uni-datetime-picker/package.json
@@ -0,0 +1,90 @@
+{
+  "id": "uni-datetime-picker",
+  "displayName": "uni-datetime-picker 日期选择器",
+  "version": "2.2.4",
+  "description": "uni-datetime-picker 日期时间选择器，支持日历，支持范围选择",
+  "keywords": [
+    "uni-datetime-picker",
+    "uni-ui",
+    "uniui",
+    "日期时间选择器",
+    "日期时间"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/src/uni_modules/uni-datetime-picker/readme.md b/src/uni_modules/uni-datetime-picker/readme.md
new file mode 100644
index 00000000..162fbefa
--- /dev/null
+++ b/src/uni_modules/uni-datetime-picker/readme.md
@@ -0,0 +1,21 @@
+
+
+> `重要通知：组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护`
+
+## DatetimePicker 时间选择器
+
+> **组件名：uni-datetime-picker**
+> 代码块： `uDatetimePicker`
+
+
+该组件的优势是，支持**时间戳**输入和输出（起始时间、终止时间也支持时间戳），可**同时选择**日期和时间。
+
+若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。
+
+**_点击 picker 默认值规则：_**
+
+- 若设置初始值 value, 会显示在 picker 显示框中
+- 若无初始值 value，则初始值 value 为当前本地时间 Date.now()， 但不会显示在 picker 显示框中
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-drawer/changelog.md b/src/uni_modules/uni-drawer/changelog.md
new file mode 100644
index 00000000..6d2488c3
--- /dev/null
+++ b/src/uni_modules/uni-drawer/changelog.md
@@ -0,0 +1,13 @@
+## 1.2.1（2021-11-22）
+- 修复 vue3中个别scss变量无法找到的问题
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-drawer](https://uniapp.dcloud.io/component/uniui/uni-drawer)
+## 1.1.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-05-12）
+- 新增 组件示例地址
+## 1.0.6（2021-02-04）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-drawer/components/uni-drawer/keypress.js b/src/uni_modules/uni-drawer/components/uni-drawer/keypress.js
new file mode 100644
index 00000000..62dda461
--- /dev/null
+++ b/src/uni_modules/uni-drawer/components/uni-drawer/keypress.js
@@ -0,0 +1,45 @@
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    // this.$once('hook:beforeDestroy', () => {
+    //   document.removeEventListener('keyup', listener)
+    // })
+  },
+	render: () => {}
+}
+// #endif
diff --git a/src/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue b/src/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue
new file mode 100644
index 00000000..24715210
--- /dev/null
+++ b/src/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue
@@ -0,0 +1,183 @@
+<template>
+	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
+		<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
+		<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
+			<slot />
+		</view>
+		<!-- #ifdef H5 -->
+		<keypress @esc="close('mask')" />
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	// #ifdef H5
+	import keypress from './keypress.js'
+	// #endif
+	/**
+	 * Drawer 抽屉
+	 * @description 抽屉侧滑菜单
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=26
+	 * @property {Boolean} mask = [true | false] 是否显示遮罩
+	 * @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
+	 * @property {Boolean} mode = [left | right] Drawer 滑出位置
+	 * 	@value left 从左侧滑出
+	 * 	@value right 从右侧侧滑出
+	 * @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
+	 * @event {Function} close 组件关闭时触发事件
+	 */
+	export default {
+		name: 'UniDrawer',
+		components: {
+			// #ifdef H5
+			keypress
+			// #endif
+		},
+		emits:['change'],
+		props: {
+			/**
+			 * 显示模式（左、右），只在初始化生效
+			 */
+			mode: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * 蒙层显示状态
+			 */
+			mask: {
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 遮罩是否可点击关闭
+			 */
+			maskClick:{
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 抽屉宽度
+			 */
+			width: {
+				type: Number,
+				default: 220
+			}
+		},
+		data() {
+			return {
+				visibleSync: false,
+				showDrawer: false,
+				rightMode: false,
+				watchTimer: null,
+				drawerWidth: 220
+			}
+		},
+		created() {
+			// #ifndef APP-NVUE
+			this.drawerWidth = this.width
+			// #endif
+			this.rightMode = this.mode === 'right'
+		},
+		methods: {
+			clear(){},
+			close(type) {
+				// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
+				if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
+				this._change('showDrawer', 'visibleSync', false)
+			},
+			open() {
+				// fixed by mehaotian 处理重复点击打开的事件
+				if(this.visibleSync) return
+				this._change('visibleSync', 'showDrawer', true)
+			},
+			_change(param1, param2, status) {
+				this[param1] = status
+				if (this.watchTimer) {
+					clearTimeout(this.watchTimer)
+				}
+				this.watchTimer = setTimeout(() => {
+					this[param2] = status
+					this.$emit('change',status)
+				}, status ? 50 : 300)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$uni-mask: rgba($color: #000000, $alpha: 0.4) ;
+	// 抽屉宽度
+	$drawer-width: 220px;
+
+	.uni-drawer {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		overflow: hidden;
+		z-index: 999;
+	}
+
+	.uni-drawer__content {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: absolute;
+		top: 0;
+		width: $drawer-width;
+		bottom: 0;
+		background-color: $uni-bg-color;
+		transition: transform 0.3s ease;
+	}
+
+	.uni-drawer--left {
+		left: 0;
+		/* #ifdef APP-NVUE */
+		transform: translateX(-$drawer-width);
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		transform: translateX(-100%);
+		/* #endif */
+	}
+
+	.uni-drawer--right {
+		right: 0;
+		/* #ifdef APP-NVUE */
+		transform: translateX($drawer-width);
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		transform: translateX(100%);
+		/* #endif */
+	}
+
+	.uni-drawer__content--visible {
+		transform: translateX(0px);
+	}
+
+
+	.uni-drawer__mask {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		opacity: 0;
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background-color: $uni-mask;
+		transition: opacity 0.3s;
+	}
+
+	.uni-drawer__mask--visible {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		opacity: 1;
+	}
+</style>
diff --git a/src/uni_modules/uni-drawer/package.json b/src/uni_modules/uni-drawer/package.json
new file mode 100644
index 00000000..dd056e4c
--- /dev/null
+++ b/src/uni_modules/uni-drawer/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-drawer",
+  "displayName": "uni-drawer 抽屉",
+  "version": "1.2.1",
+  "description": "抽屉式导航，用于展示侧滑菜单，侧滑导航。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "drawer",
+    "抽屉",
+    "侧滑导航"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-drawer/readme.md b/src/uni_modules/uni-drawer/readme.md
new file mode 100644
index 00000000..dcf6e6b2
--- /dev/null
+++ b/src/uni_modules/uni-drawer/readme.md
@@ -0,0 +1,10 @@
+
+
+## Drawer 抽屉
+> **组件名：uni-drawer**
+> 代码块： `uDrawer`
+
+抽屉侧滑菜单。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-drawer)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-easyinput/changelog.md b/src/uni_modules/uni-easyinput/changelog.md
new file mode 100644
index 00000000..6c6b0835
--- /dev/null
+++ b/src/uni_modules/uni-easyinput/changelog.md
@@ -0,0 +1,41 @@
+## 1.0.5（2022-06-07）
+- 优化 clearable 显示策略
+## 1.0.4（2022-06-07）
+- 优化 clearable 显示策略
+## 1.0.3（2022-05-20）
+- 修复 关闭图标某些情况下无法取消的bug
+## 1.0.2（2022-04-12）
+- 修复 默认值不生效的bug
+## 1.0.1（2022-04-02）
+- 修复 value不能为0的bug
+## 1.0.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-easyinput](https://uniapp.dcloud.io/component/uniui/uni-easyinput)
+## 0.1.4（2021-08-20）
+- 修复 在 uni-forms 的动态表单中默认值校验不通过的 bug
+## 0.1.3（2021-08-11）
+- 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
+## 0.1.2（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 0.1.1
+- 优化 errorMessage 属性支持 Boolean 类型
+## 0.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 0.0.16（2021-06-29）
+- 修复 confirmType 属性（仅 type="text" 生效）导致多行文本框无法换行的 bug
+## 0.0.15（2021-06-21）
+- 修复 passwordIcon 属性拼写错误的 bug
+## 0.0.14（2021-06-18）
+- 新增 passwordIcon 属性，当type=password时是否显示小眼睛图标
+- 修复 confirmType 属性不生效的问题
+## 0.0.13（2021-06-04）
+- 修复 disabled 状态可清出内容的 bug
+## 0.0.12（2021-05-12）
+- 新增 组件示例地址
+## 0.0.11（2021-05-07）
+- 修复 input-border 属性不生效的问题
+## 0.0.10（2021-04-30）
+- 修复 ios 遮挡文字、显示一半的问题
+## 0.0.9（2021-02-05）
+- 调整为uni_modules目录规范
+- 优化 兼容 nvue 页面
diff --git a/src/uni_modules/uni-easyinput/components/uni-easyinput/common.js b/src/uni_modules/uni-easyinput/components/uni-easyinput/common.js
new file mode 100644
index 00000000..46a41eed
--- /dev/null
+++ b/src/uni_modules/uni-easyinput/components/uni-easyinput/common.js
@@ -0,0 +1,54 @@
+/**
+ * @desc 函数防抖
+ * @param func 目标函数
+ * @param wait 延迟执行毫秒数
+ * @param immediate true - 立即执行， false - 延迟执行
+ */
+export const debounce = function(func, wait = 1000, immediate = true) {
+        let timer;
+        return function() {
+            let context = this,
+                args = arguments;
+            if (timer) clearTimeout(timer);
+            if (immediate) {
+                let callNow = !timer;
+                timer = setTimeout(() => {
+                    timer = null;
+                }, wait);
+                if (callNow) func.apply(context, args);
+            } else {
+                timer = setTimeout(() => {
+                    func.apply(context, args);
+                }, wait)
+            }
+        }
+    }
+    /**
+     * @desc 函数节流
+     * @param func 函数
+     * @param wait 延迟执行毫秒数
+     * @param type 1 使用表时间戳，在时间段开始的时候触发 2 使用表定时器，在时间段结束的时候触发
+     */
+export const throttle = (func, wait = 1000, type = 1) => {
+    let previous = 0;
+    let timeout;
+    return function() {
+        let context = this;
+        let args = arguments;
+        if (type === 1) {
+            let now = Date.now();
+
+            if (now - previous > wait) {
+                func.apply(context, args);
+                previous = now;
+            }
+        } else if (type === 2) {
+            if (!timeout) {
+                timeout = setTimeout(() => {
+                    timeout = null;
+                    func.apply(context, args)
+                }, wait)
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue b/src/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue
new file mode 100644
index 00000000..c8bf584a
--- /dev/null
+++ b/src/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue
@@ -0,0 +1,538 @@
+<template>
+	<view
+		class="uni-easyinput"
+		:class="{ 'uni-easyinput-error': msg }"
+		:style="{ color: inputBorder && msg ? '#e43d33' : styles.color }"
+	>
+		<view
+			class="uni-easyinput__content"
+			:class="{
+				'is-input-border': inputBorder,
+				'is-input-error-border': inputBorder && msg,
+				'is-textarea': type === 'textarea',
+				'is-disabled': disabled
+			}"
+			:style="{
+				'border-color': inputBorder && msg ? '#dd524d' : styles.borderColor,
+				'background-color': disabled ? styles.disableColor : ''
+			}"
+		>
+			<uni-icons
+				v-if="prefixIcon"
+				class="content-clear-icon"
+				:type="prefixIcon"
+				color="#c0c4cc"
+				@click="onClickIcon('prefix')"
+			></uni-icons>
+			<textarea
+				v-if="type === 'textarea'"
+				class="uni-easyinput__content-textarea"
+				:class="{ 'input-padding': inputBorder }"
+				:name="name"
+				:value="val"
+				:placeholder="placeholder"
+				:placeholderStyle="placeholderStyle"
+				:disabled="disabled"
+				placeholder-class="uni-easyinput__placeholder-class"
+				:maxlength="inputMaxlength"
+				:focus="focused"
+				:autoHeight="autoHeight"
+				@input="onInput"
+				@blur="onBlur"
+				@focus="onFocus"
+				@confirm="onConfirm"
+			></textarea>
+			<input
+				v-else
+				:type="type === 'password' ? 'text' : type"
+				class="uni-easyinput__content-input"
+				:style="{
+					'padding-right': type === 'password' || clearable || prefixIcon ? '' : '10px',
+					'padding-left': paddingLeft + 'px'
+
+				}"
+				:name="name"
+				:value="val"
+				:password="!showPassword && type === 'password'"
+				:placeholder="placeholder"
+				:placeholderStyle="placeholderStyle"
+				placeholder-class="uni-easyinput__placeholder-class"
+				:disabled="disabled"
+				:maxlength="inputMaxlength"
+				:focus="focused"
+				:confirmType="confirmType"
+				@focus="onFocus"
+				@blur="onBlur"
+				@input="onInput"
+				@change="onInput"
+				@confirm="onConfirm"
+				:cursor-spacing="30"
+				always-embed
+			/>
+			<template v-if="type === 'password' && passwordIcon">
+				<uni-icons
+					v-if="val"
+					class="content-clear-icon"
+					:class="{ 'is-textarea-icon': type === 'textarea' }"
+					:type="showPassword ? 'eye-slash-filled' : 'eye-filled'"
+					:size="18"
+					color="#c0c4cc"
+					@click="onEyes"
+				></uni-icons>
+			</template>
+			<template v-else-if="suffixIcon">
+				<uni-icons
+					v-if="suffixIcon"
+					class="content-clear-icon"
+					:type="suffixIcon"
+					color="#c0c4cc"
+					@click="onClickIcon('suffix')"
+				></uni-icons>
+			</template>
+			<template v-else>
+				<uni-icons
+					class="content-clear-icon"
+					:class="{ 'is-textarea-icon': type === 'textarea' }"
+					type="clear"
+					:size="clearSize"
+					v-if="clearable && val && !disabled"
+					color="#c0c4cc"
+					@click="onClear"
+				></uni-icons>
+			</template>
+			<slot name="right"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+// import {
+// 	debounce,
+// 	throttle
+// } from './common.js'
+/**
+ * Easyinput 输入框
+ * @description 此组件可以实现表单的输入与校验，包括 "text" 和 "textarea" 类型。
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=3455
+ * @property {String}	value	输入内容
+ * @property {String }	type	输入框的类型（默认text） password/text/textarea/..
+ * 	@value text			文本输入键盘
+ * 	@value textarea	多行文本输入键盘
+ * 	@value password	密码输入键盘
+ * 	@value number		数字输入键盘，注意iOS上app-vue弹出的数字键盘并非9宫格方式
+ * 	@value idcard		身份证输入键盘，信、支付宝、百度、QQ小程序
+ * 	@value digit		带小数点的数字键盘	，App的nvue页面、微信、支付宝、百度、头条、QQ小程序支持
+ * @property {Boolean}	clearable	是否显示右侧清空内容的图标控件，点击可清空输入框内容（默认true）
+ * @property {Boolean}	autoHeight	是否自动增高输入区域，type为textarea时有效（默认false）
+ * @property {String }	placeholder	输入框的提示文字
+ * @property {String }	placeholderStyle	placeholder的样式(内联样式，字符串)，如"color: #ddd"
+ * @property {Boolean}	focus	是否自动获得焦点（默认false）
+ * @property {Boolean}	disabled	是否禁用（默认false）
+ * @property {Number }	maxlength	最大输入长度，设置为 -1 的时候不限制最大长度（默认140）
+ * @property {String }	confirmType	设置键盘右下角按钮的文字，仅在type="text"时生效（默认done）
+ * @property {Number }	clearSize	清除图标的大小，单位px（默认15）
+ * @property {String}	prefixIcon	输入框头部图标
+ * @property {String}	suffixIcon	输入框尾部图标
+ * @property {Boolean}	trim	是否自动去除两端的空格
+ * @value both	去除两端空格
+ * @value left	去除左侧空格
+ * @value right	去除右侧空格
+ * @value start	去除左侧空格
+ * @value end		去除右侧空格
+ * @value all		去除全部空格
+ * @value none	不去除空格
+ * @property {Boolean}	inputBorder	是否显示input输入框的边框（默认true）
+ * @property {Boolean}	passwordIcon	type=password时是否显示小眼睛图标
+ * @property {Object}	styles	自定义颜色
+ * @event {Function}	input	输入框内容发生变化时触发
+ * @event {Function}	focus	输入框获得焦点时触发
+ * @event {Function}	blur	输入框失去焦点时触发
+ * @event {Function}	confirm	点击完成按钮时触发
+ * @event {Function}	iconClick	点击图标时触发
+ * @example <uni-easyinput v-model="mobile"></uni-easyinput>
+ */
+
+export default {
+	name: 'uni-easyinput',
+	emits: ['click', 'iconClick', 'update:modelValue', 'input', 'focus', 'blur', 'confirm'],
+	model: {
+		prop: 'modelValue',
+		event: 'update:modelValue'
+	},
+	props: {
+		name: String,
+		value: [Number, String],
+		modelValue: [Number, String],
+		type: {
+			type: String,
+			default: 'text'
+		},
+		clearable: {
+			type: Boolean,
+			default: true
+		},
+		autoHeight: {
+			type: Boolean,
+			default: false
+		},
+		placeholder: String,
+		placeholderStyle: String,
+		focus: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		maxlength: {
+			type: [Number, String],
+			default: 140
+		},
+		confirmType: {
+			type: String,
+			default: 'done'
+		},
+		clearSize: {
+			type: [Number, String],
+			default: 15
+		},
+		inputBorder: {
+			type: Boolean,
+			default: true
+		},
+		prefixIcon: {
+			type: String,
+			default: ''
+		},
+		suffixIcon: {
+			type: String,
+			default: ''
+		},
+		trim: {
+			type: [Boolean, String],
+			default: true
+		},
+		passwordIcon: {
+			type: Boolean,
+			default: true
+		},
+		styles: {
+			type: Object,
+			default() {
+				return {
+					color: '#333',
+					disableColor: '#F7F6F6',
+					borderColor: '#e5e5e5'
+				};
+			}
+		},
+		errorMessage: {
+			type: [String, Boolean],
+			default: ''
+		},
+		paddingLeft:{
+			type: [Number, String],
+			default: 0
+		}
+	},
+	data() {
+		return {
+			focused: false,
+			errMsg: '',
+			val: '',
+			showMsg: '',
+			border: false,
+			isFirstBorder: false,
+			showClearIcon: false,
+			showPassword: false
+		};
+	},
+	computed: {
+		msg() {
+			return this.errorMessage || this.errMsg;
+		},
+		// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，用户可以传入字符串数值
+		inputMaxlength() {
+			return Number(this.maxlength);
+		}
+	},
+	watch: {
+		value(newVal) {
+			if (this.errMsg) this.errMsg = '';
+			this.val = newVal;
+			// fix by mehaotian is_reset 在 uni-forms 中定义
+			if (this.form && this.formItem && !this.is_reset) {
+				this.is_reset = false;
+				this.formItem.setValue(newVal);
+			}
+		},
+		modelValue(newVal) {
+			if (this.errMsg) this.errMsg = '';
+			this.val = newVal;
+			if (this.form && this.formItem && !this.is_reset) {
+				this.is_reset = false;
+				this.formItem.setValue(newVal);
+			}
+		},
+		focus(newVal) {
+			this.$nextTick(() => {
+				this.focused = this.focus;
+			});
+		}
+	},
+	created() {
+		if (!this.value && this.value !== 0) {
+			this.val = this.modelValue;
+		}
+		if (!this.modelValue && this.modelValue !== 0) {
+			this.val = this.value;
+		}
+		this.form = this.getForm('uniForms');
+		this.formItem = this.getForm('uniFormsItem');
+		if (this.form && this.formItem) {
+			if (this.formItem.name) {
+				if (!this.is_reset) {
+					this.is_reset = false;
+					this.formItem.setValue(this.val);
+				}
+				this.rename = this.formItem.name;
+				this.form.inputChildrens.push(this);
+			}
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.focused = this.focus;
+		});
+	},
+	methods: {
+		/**
+		 * 初始化变量值
+		 */
+		init() {},
+		onClickIcon(type) {
+			this.$emit('iconClick', type);
+		},
+		/**
+		 * 获取父元素实例
+		 */
+		getForm(name = 'uniForms') {
+			let parent = this.$parent;
+			let parentName = parent.$options.name;
+			while (parentName !== name) {
+				parent = parent.$parent;
+				if (!parent) return false;
+				parentName = parent.$options.name;
+			}
+			return parent;
+		},
+
+		onEyes() {
+			this.showPassword = !this.showPassword;
+		},
+		onInput(event) {
+			let value = event.detail.value;
+			// 判断是否去除空格
+			if (this.trim) {
+				if (typeof this.trim === 'boolean' && this.trim) {
+					value = this.trimStr(value);
+				}
+				if (typeof this.trim === 'string') {
+					value = this.trimStr(value, this.trim);
+				}
+			}
+			if (this.errMsg) this.errMsg = '';
+			this.val = value;
+			// TODO 兼容 vue2
+			this.$emit('input', value);
+			// TODO　兼容　vue3
+			this.$emit('update:modelValue', value);
+		},
+		onFocus(event) {
+			this.$emit('focus', event);
+		},
+		onBlur(event) {
+			let value = event.detail.value;
+			this.$emit('blur', event);
+		},
+		onConfirm(e) {
+			this.$emit('confirm', e.detail.value);
+		},
+		onClear(event) {
+			this.val = '';
+			// TODO 兼容 vue2
+			this.$emit('input', '');
+			// TODO 兼容 vue2
+			// TODO　兼容　vue3
+			this.$emit('update:modelValue', '');
+		},
+		fieldClick() {
+			this.$emit('click');
+		},
+		trimStr(str, pos = 'both') {
+			if (pos === 'both') {
+				return str.trim();
+			} else if (pos === 'left') {
+				return str.trimLeft();
+			} else if (pos === 'right') {
+				return str.trimRight();
+			} else if (pos === 'start') {
+				return str.trimStart();
+			} else if (pos === 'end') {
+				return str.trimEnd();
+			} else if (pos === 'all') {
+				return str.replace(/\s+/g, '');
+			} else if (pos === 'none') {
+				return str;
+			}
+			return str;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+$uni-error: #e43d33;
+$uni-border-1: #dcdfe6 !default;
+.uni-easyinput {
+	/* #ifndef APP-NVUE */
+	width: 100%;
+	/* #endif */
+	flex: 1;
+	position: relative;
+	text-align: left;
+	color: #333;
+	font-size: 14px;
+}
+
+.uni-easyinput__content {
+	flex: 1;
+	/* #ifndef APP-NVUE */
+	width: 100%;
+	display: flex;
+	box-sizing: border-box;
+	min-height: 72rpx;
+	/* #endif */
+	flex-direction: row;
+	align-items: center;
+}
+
+.uni-easyinput__content-input {
+	/* #ifndef APP-NVUE */
+	width: auto;
+	/* #endif */
+	position: relative;
+	overflow: hidden;
+	flex: 1;
+	line-height: 56rpx;
+	font-size: 28rpx;
+	height: 56rpx;
+}
+.uni-easyinput__placeholder-class {
+	color: #bbbbbb;
+	font-size: 28rpx;
+	font-weight: 400;
+	line-height: normal;
+}
+.is-textarea {
+	align-items: flex-start;
+}
+
+.is-textarea-icon {
+	margin-top: 5px;
+}
+
+.uni-easyinput__content-textarea {
+	position: relative;
+	overflow: hidden;
+	flex: 1;
+	line-height: 1.5;
+	font-size: 14px;
+	padding-top: 6px;
+	padding-bottom: 10px;
+	height: 80px;
+	/* #ifndef APP-NVUE */
+	min-height: 80px;
+	width: auto;
+	/* #endif */
+}
+
+.input-padding {
+	padding-left: 10px;
+}
+
+.content-clear-icon {
+	padding: 0 5px;
+}
+
+.label-icon {
+	margin-right: 5px;
+	margin-top: -1px;
+}
+
+// 显示边框
+.is-input-border {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	box-sizing: border-box;
+	/* #endif */
+	flex-direction: row;
+	align-items: center;
+	border: 1px solid $uni-border-1;
+	border-radius: 4px;
+}
+
+.uni-error-message {
+	position: absolute;
+	bottom: -17px;
+	left: 0;
+	line-height: 12px;
+	color: $uni-error;
+	font-size: 12px;
+	text-align: left;
+}
+
+.uni-error-msg--boeder {
+	position: relative;
+	bottom: 0;
+	line-height: 22px;
+}
+
+.is-input-error-border {
+	border-color: $uni-error;
+	.uni-easyinput__placeholder-class {
+		// color: mix(#fff, $uni-error, 50%);
+	}
+}
+
+.uni-easyinput--border {
+	margin-bottom: 0;
+	padding: 10px 15px;
+	// padding-bottom: 0;
+	border-top: 1px #eee solid;
+}
+
+.uni-easyinput-error {
+	padding-bottom: 0;
+}
+
+.is-first-border {
+	/* #ifndef APP-NVUE */
+	border: none;
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	border-width: 0;
+	/* #endif */
+}
+
+.is-disabled {
+	border-color: red;
+	background-color: #f7f6f6;
+	color: #d5d5d5;
+	.uni-easyinput__placeholder-class {
+		color: #d5d5d5;
+		font-size: 12px;
+	}
+}
+</style>
diff --git a/src/uni_modules/uni-easyinput/package.json b/src/uni_modules/uni-easyinput/package.json
new file mode 100644
index 00000000..15482b24
--- /dev/null
+++ b/src/uni_modules/uni-easyinput/package.json
@@ -0,0 +1,90 @@
+{
+  "id": "uni-easyinput",
+  "displayName": "uni-easyinput 增强输入框",
+  "version": "1.0.5",
+  "description": "Easyinput 组件是对原生input组件的增强",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "input",
+    "uni-easyinput",
+    "输入框"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+      "uni-icons"
+    ],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-easyinput/readme.md b/src/uni_modules/uni-easyinput/readme.md
new file mode 100644
index 00000000..f1faf8fb
--- /dev/null
+++ b/src/uni_modules/uni-easyinput/readme.md
@@ -0,0 +1,11 @@
+
+
+### Easyinput 增强输入框
+> **组件名：uni-easyinput**
+> 代码块： `uEasyinput`
+
+
+easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-easyinput)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-fab/changelog.md b/src/uni_modules/uni-fab/changelog.md
new file mode 100644
index 00000000..24e26b16
--- /dev/null
+++ b/src/uni_modules/uni-fab/changelog.md
@@ -0,0 +1,17 @@
+## 1.2.2（2021-12-29）
+- 更新 组件依赖
+## 1.2.1（2021-11-19）
+- 修复 阴影颜色不正确的bug
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-fab](https://uniapp.dcloud.io/component/uniui/uni-fab)
+## 1.1.1（2021-11-09） 
+- 新增 提供组件设计资源，组件样式调整
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-05-12）
+- 新增 组件示例地址
+## 1.0.6（2021-02-05）
+- 调整为uni_modules目录规范
+- 优化 按钮背景色调整
+- 优化 兼容pc端
diff --git a/src/uni_modules/uni-fab/components/uni-fab/uni-fab.vue b/src/uni_modules/uni-fab/components/uni-fab/uni-fab.vue
new file mode 100644
index 00000000..dcb44f00
--- /dev/null
+++ b/src/uni_modules/uni-fab/components/uni-fab/uni-fab.vue
@@ -0,0 +1,528 @@
+<template>
+  <view class="uni-cursor-point">
+    <view
+      v-if="popMenu && (leftBottom || rightBottom || leftTop || rightTop) && content.length > 0"
+      :class="{
+        'uni-fab--leftBottom': leftBottom,
+        'uni-fab--rightBottom': rightBottom,
+        'uni-fab--leftTop': leftTop,
+        'uni-fab--rightTop': rightTop,
+      }"
+      class="uni-fab"
+    >
+      <view
+        :class="{
+          'uni-fab__content--left': horizontal === 'left',
+          'uni-fab__content--right': horizontal === 'right',
+          'uni-fab__content--flexDirection': direction === 'vertical',
+          'uni-fab__content--flexDirectionStart': flexDirectionStart,
+          'uni-fab__content--flexDirectionEnd': flexDirectionEnd,
+          'uni-fab__content--other-platform': !isAndroidNvue,
+        }"
+        :style="{ width: boxWidth, height: boxHeight }"
+        class="uni-fab__content"
+        elevation="5"
+      >
+        <view
+          v-if="flexDirectionStart || horizontalLeft"
+          class="uni-fab__item uni-fab__item--first"
+        />
+        <view
+          v-for="(item, index) in content"
+          :key="index"
+          :class="{
+            'uni-fab__item--active': isShow,
+            'horizontal-margin': direction == 'horizontal',
+          }"
+          class="uni-fab__item"
+          @click="_onItemClick(index, item)"
+        >
+          <image
+            :src="item.active ? item.selectedIconPath : item.iconPath"
+            class="uni-fab__item-image"
+            mode="aspectFit"
+          />
+          <text
+            class="uni-fab__item-text"
+            :class="{ 'vertical-margin': direction == 'vertical' }"
+            :style="{ color: pattern[index].color }"
+            >{{ item.text }}</text
+          >
+        </view>
+        <view
+          v-if="flexDirectionEnd || horizontalRight"
+          class="uni-fab__item uni-fab__item--first"
+        />
+      </view>
+    </view>
+    <view
+      :class="{
+        'uni-fab__circle--leftBottom': leftBottom,
+        'uni-fab__circle--rightBottom': rightBottom,
+        'uni-fab__circle--leftTop': leftTop,
+        'uni-fab__circle--rightTop': rightTop,
+        'uni-fab__content--other-platform': !isAndroidNvue,
+      }"
+      class="uni-fab__circle uni-fab__plus"
+      :style="{ 'background-color': 'var(--ui-BG-Main)' }"
+      @click="_onClick"
+    >
+      <uni-icons
+        class="fab-circle-icon"
+        type="plusempty"
+        color="#fff"
+        size="20"
+        :class="{ 'uni-fab__plus--active': isShow && content.length > 0 }"
+      ></uni-icons>
+      <!-- <view class="fab-circle-v"  :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view>
+			<view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow  && content.length > 0}"></view> -->
+    </view>
+  </view>
+</template>
+
+<script>
+import sheep from '@/sheep';
+let platform = 'other';
+// #ifdef APP-NVUE
+platform = uni.getDeviceInfo().platform;
+// #endif
+
+/**
+ * Fab 悬浮按钮
+ * @description 点击可展开一个图形按钮菜单
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=144
+ * @property {Object} pattern 可选样式配置项
+ * @property {Object} horizontal = [left | right] 水平对齐方式
+ * 	@value left 左对齐
+ * 	@value right 右对齐
+ * @property {Object} vertical = [bottom | top] 垂直对齐方式
+ * 	@value bottom 下对齐
+ * 	@value top 上对齐
+ * @property {Object} direction = [horizontal | vertical] 展开菜单显示方式
+ * 	@value horizontal 水平显示
+ * 	@value vertical 垂直显示
+ * @property {Array} content 展开菜单内容配置项
+ * @property {Boolean} popMenu 是否使用弹出菜单
+ * @event {Function} trigger 展开菜单点击事件，返回点击信息
+ * @event {Function} fabClick 悬浮按钮点击事件
+ */
+export default {
+  name: 'UniFab',
+  emits: ['fabClick', 'trigger'],
+  props: {
+    pattern: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    horizontal: {
+      type: String,
+      default: 'left',
+    },
+    vertical: {
+      type: String,
+      default: 'bottom',
+    },
+    direction: {
+      type: String,
+      default: 'horizontal',
+    },
+    content: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    popMenu: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      fabShow: false,
+      isShow: false,
+      isAndroidNvue: platform === 'android',
+      styles: [
+        {
+          // color: '#3c3e49',
+          // selectedColor: '#007AFF',
+          // backgroundColor: '#fff',
+          // buttonColor: '#007AFF',
+          // iconColor: '#fff'
+        },
+      ],
+    };
+  },
+  computed: {
+    contentWidth(e) {
+      return (this.content.length + 1) * 130 + 'rpx';
+    },
+    contentWidthMin() {
+      return '100rpx';
+    },
+    // 动态计算宽度
+    boxWidth() {
+      return this.getPosition(3, 'horizontal');
+    },
+    // 动态计算高度
+    boxHeight() {
+      return this.getPosition(3, 'vertical');
+    },
+    // 计算左下位置
+    leftBottom() {
+      return this.getPosition(0, 'left', 'bottom');
+    },
+    // 计算右下位置
+    rightBottom() {
+      return this.getPosition(0, 'right', 'bottom');
+    },
+    // 计算左上位置
+    leftTop() {
+      return this.getPosition(0, 'left', 'top');
+    },
+    rightTop() {
+      return this.getPosition(0, 'right', 'top');
+    },
+    flexDirectionStart() {
+      return this.getPosition(1, 'vertical', 'top');
+    },
+    flexDirectionEnd() {
+      return this.getPosition(1, 'vertical', 'bottom');
+    },
+    horizontalLeft() {
+      return this.getPosition(2, 'horizontal', 'left');
+    },
+    horizontalRight() {
+      return this.getPosition(2, 'horizontal', 'right');
+    },
+  },
+  watch: {
+    // pattern: {
+    // 	handler(val, oldVal) {
+    // 		this.styles = Object.assign({}, this.styles, val)
+    // 	},
+    // 	deep: true
+    // }
+  },
+  created() {
+    this.isShow = this.show;
+    if (this.top === 0) {
+      this.fabShow = true;
+    }
+    // 初始化样式
+    // this.styles = Object.assign({}, this.styles, this.pattern)
+  },
+  methods: {
+    _onClick() {
+      this.$emit('fabClick');
+      if (!this.popMenu) {
+        return;
+      }
+      this.isShow = !this.isShow;
+    },
+    open() {
+      this.isShow = true;
+    },
+    close() {
+      this.isShow = false;
+    },
+    /**
+     * 按钮点击事件
+     */
+    _onItemClick(index, item) {
+      this.$emit('trigger', {
+        index,
+        item,
+      });
+    },
+    /**
+     * 获取 位置信息
+     */
+    getPosition(types, paramA, paramB) {
+      if (types === 0) {
+        return this.horizontal === paramA && this.vertical === paramB;
+      } else if (types === 1) {
+        return this.direction === paramA && this.vertical === paramB;
+      } else if (types === 2) {
+        return this.direction === paramA && this.horizontal === paramB;
+      } else {
+        return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" >
+$uni-shadow-base: 0 1px 5px 2px
+  rgba(
+    $color: #000000,
+    $alpha: 0.3,
+  ) !default;
+
+.horizontal-margin {
+  margin-right: 20rpx;
+}
+.vertical-margin {
+  margin-bottom: 20rpx;
+}
+.uni-fab {
+  position: fixed;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  justify-content: center;
+  align-items: center;
+  z-index: 12;
+  border-radius: 45px;
+  // box-shadow: $uni-shadow-base;
+}
+
+.uni-cursor-point {
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.uni-fab--active {
+  opacity: 1;
+}
+
+.uni-fab--leftBottom {
+  left: 15px;
+  bottom: 30px;
+  /* #ifdef H5 */
+  left: calc(30px + var(--window-left));
+  bottom: calc(60px + var(--window-bottom));
+  /* #endif */
+  // padding: 10px;
+}
+
+.uni-fab--leftTop {
+  left: 15px;
+  top: 30px;
+  /* #ifdef H5 */
+  left: calc(15px + var(--window-left));
+  top: calc(30px + var(--window-top));
+  /* #endif */
+  // padding: 10px;
+}
+
+.uni-fab--rightBottom {
+  right: 24rpx;
+  bottom: calc(100rpx + env(safe-area-inset-bottom));
+  /* #ifdef H5 */
+  right: calc(24rpx + var(--window-right));
+  bottom: calc(100rpx + var(--window-bottom));
+  /* #endif */
+  // padding: 10px;
+}
+
+.uni-fab--rightTop {
+  right: 15px;
+  top: 30px;
+  /* #ifdef H5 */
+  right: calc(15px + var(--window-right));
+  top: calc(30px + var(--window-top));
+  /* #endif */
+  // padding: 10px;
+}
+
+.uni-fab__circle {
+  position: fixed;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  justify-content: center;
+  align-items: center;
+  width: 64rpx;
+  height: 64rpx;
+  background-color: #3c3e49;
+  border-radius: 50%;
+  z-index: 13;
+  // box-shadow: $uni-shadow-base;
+}
+
+.uni-fab__circle--leftBottom {
+  left: 15px;
+  bottom: 30px;
+  /* #ifdef H5 */
+  left: calc(15px + var(--window-left));
+  bottom: calc(30px + var(--window-bottom));
+  /* #endif */
+}
+
+.uni-fab__circle--leftTop {
+  left: 15px;
+  top: 30px;
+  /* #ifdef H5 */
+  left: calc(15px + var(--window-left));
+  top: calc(30px + var(--window-top));
+  /* #endif */
+}
+
+.uni-fab__circle--rightBottom {
+  right: 40rpx;
+  bottom: calc(120rpx + env(safe-area-inset-bottom));
+  /* #ifdef H5 */
+  right: calc(40rpx + var(--window-right));
+  bottom: calc(120rpx + var(--window-bottom));
+  /* #endif */
+}
+
+.uni-fab__circle--rightTop {
+  right: 15px;
+  top: 30px;
+  /* #ifdef H5 */
+  right: calc(15px + var(--window-right));
+  top: calc(30px + var(--window-top));
+  /* #endif */
+}
+
+.uni-fab__circle--left {
+  left: 0;
+}
+
+.uni-fab__circle--right {
+  right: 0;
+}
+
+.uni-fab__circle--top {
+  top: 0;
+}
+
+.uni-fab__circle--bottom {
+  bottom: 0;
+}
+
+.uni-fab__plus {
+  font-weight: bold;
+}
+
+// .fab-circle-v {
+// 	position: absolute;
+// 	width: 2px;
+// 	height: 24px;
+// 	left: 0;
+// 	top: 0;
+// 	right: 0;
+// 	bottom: 0;
+// 	/* #ifndef APP-NVUE */
+// 	margin: auto;
+// 	/* #endif */
+// 	background-color: white;
+// 	transform: rotate(0deg);
+// 	transition: transform 0.3s;
+// }
+
+// .fab-circle-h {
+// 	position: absolute;
+// 	width: 24px;
+// 	height: 2px;
+// 	left: 0;
+// 	top: 0;
+// 	right: 0;
+// 	bottom: 0;
+// 	/* #ifndef APP-NVUE */
+// 	margin: auto;
+// 	/* #endif */
+// 	background-color: white;
+// 	transform: rotate(0deg);
+// 	transition: transform 0.3s;
+// }
+
+.fab-circle-icon {
+  transform: rotate(0deg);
+  transition: transform 0.3s;
+  font-weight: 200;
+}
+
+.uni-fab__plus--active {
+  transform: rotate(135deg);
+}
+
+.uni-fab__content {
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  border-radius: 55px;
+  overflow: hidden;
+  transition-property: width, height;
+  transition-duration: 0.2s;
+  width: 64rpx;
+  border-color: #dddddd;
+  border-width: 1rpx;
+  border-style: solid;
+}
+
+.uni-fab__content--other-platform {
+  border-width: 0px;
+  // box-shadow: $uni-shadow-base;
+}
+
+.uni-fab__content--left {
+  justify-content: flex-start;
+}
+
+.uni-fab__content--right {
+  justify-content: flex-end;
+}
+
+.uni-fab__content--flexDirection {
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.uni-fab__content--flexDirectionStart {
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.uni-fab__content--flexDirectionEnd {
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.uni-fab__item {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100rpx;
+  // height: 84rpx;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.uni-fab__item--active {
+  opacity: 1;
+}
+
+.uni-fab__item-image {
+  width: 52rpx;
+  height: 52rpx;
+}
+
+.uni-fab__item-text {
+  color: #ffffff;
+  display: table;
+  font-size: 24rpx;
+  margin-top: 4px;
+}
+
+.uni-fab__item--first {
+  width: 100rpx;
+  height: 100rpx;
+  margin-bottom: 0 !important;
+}
+</style>
diff --git a/src/uni_modules/uni-fab/package.json b/src/uni_modules/uni-fab/package.json
new file mode 100644
index 00000000..0f27daa5
--- /dev/null
+++ b/src/uni_modules/uni-fab/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-fab",
+  "displayName": "uni-fab 悬浮按钮",
+  "version": "1.2.2",
+  "description": "悬浮按钮 fab button ，点击可展开一个图标按钮菜单。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "按钮",
+    "悬浮按钮",
+    "fab"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss","uni-icons"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/src/uni_modules/uni-fab/readme.md b/src/uni_modules/uni-fab/readme.md
new file mode 100644
index 00000000..9a444e88
--- /dev/null
+++ b/src/uni_modules/uni-fab/readme.md
@@ -0,0 +1,9 @@
+## Fab 悬浮按钮
+> **组件名：uni-fab**
+> 代码块： `uFab`
+
+
+点击可展开一个图形按钮菜单
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-fab)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-fav/changelog.md b/src/uni_modules/uni-fav/changelog.md
new file mode 100644
index 00000000..d8a08d43
--- /dev/null
+++ b/src/uni_modules/uni-fav/changelog.md
@@ -0,0 +1,19 @@
+## 1.2.1（2022-05-30）
+- 新增 stat 属性 ，是否开启uni统计功能
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-fav](https://uniapp.dcloud.io/component/uniui/uni-fav)
+## 1.1.1（2021-08-24）
+- 新增 支持国际化
+## 1.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.6（2021-05-12）
+- 新增 组件示例地址
+## 1.0.5（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.4（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+## 1.0.3（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+## 1.0.2（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-fav/components/uni-fav/i18n/en.json b/src/uni_modules/uni-fav/components/uni-fav/i18n/en.json
new file mode 100644
index 00000000..9a0759e0
--- /dev/null
+++ b/src/uni_modules/uni-fav/components/uni-fav/i18n/en.json
@@ -0,0 +1,4 @@
+{
+	"uni-fav.collect": "collect",
+	"uni-fav.collected": "collected"
+}
diff --git a/src/uni_modules/uni-fav/components/uni-fav/i18n/index.js b/src/uni_modules/uni-fav/components/uni-fav/i18n/index.js
new file mode 100644
index 00000000..de7509c8
--- /dev/null
+++ b/src/uni_modules/uni-fav/components/uni-fav/i18n/index.js
@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/src/uni_modules/uni-fav/components/uni-fav/i18n/zh-Hans.json b/src/uni_modules/uni-fav/components/uni-fav/i18n/zh-Hans.json
new file mode 100644
index 00000000..67c89bfc
--- /dev/null
+++ b/src/uni_modules/uni-fav/components/uni-fav/i18n/zh-Hans.json
@@ -0,0 +1,4 @@
+{
+	"uni-fav.collect": "收藏",
+	"uni-fav.collected": "已收藏"
+}
diff --git a/src/uni_modules/uni-fav/components/uni-fav/i18n/zh-Hant.json b/src/uni_modules/uni-fav/components/uni-fav/i18n/zh-Hant.json
new file mode 100644
index 00000000..67c89bfc
--- /dev/null
+++ b/src/uni_modules/uni-fav/components/uni-fav/i18n/zh-Hant.json
@@ -0,0 +1,4 @@
+{
+	"uni-fav.collect": "收藏",
+	"uni-fav.collected": "已收藏"
+}
diff --git a/src/uni_modules/uni-fav/components/uni-fav/uni-fav.vue b/src/uni_modules/uni-fav/components/uni-fav/uni-fav.vue
new file mode 100644
index 00000000..d2c58df9
--- /dev/null
+++ b/src/uni_modules/uni-fav/components/uni-fav/uni-fav.vue
@@ -0,0 +1,161 @@
+<template>
+	<view :class="[circle === true || circle === 'true' ? 'uni-fav--circle' : '']" :style="[{ backgroundColor: checked ? bgColorChecked : bgColor }]"
+	 @click="onClick" class="uni-fav">
+		<!-- #ifdef MP-ALIPAY -->
+		<view class="uni-fav-star" v-if="!checked && (star === true || star === 'true')">
+			<uni-icons :color="fgColor" :style="{color: checked ? fgColorChecked : fgColor}" size="14" type="star-filled" />
+		</view>
+		<!-- #endif -->
+		<!-- #ifndef MP-ALIPAY -->
+		<uni-icons :color="fgColor" :style="{color: checked ? fgColorChecked : fgColor}" class="uni-fav-star" size="14" type="star-filled"
+		 v-if="!checked && (star === true || star === 'true')" />
+		<!-- #endif -->
+		<text :style="{color: checked ? fgColorChecked : fgColor}" class="uni-fav-text">{{ checked ? contentFav : contentDefault }}</text>
+	</view>
+</template>
+
+<script>
+
+	/**
+	 * Fav 收藏按钮
+	 * @description 用于收藏功能，可点击切换选中、不选中的状态
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=864
+	 * @property {Boolean} star = [true|false] 按钮是否带星星
+	 * @property {String} bgColor 未收藏时的背景色
+	 * @property {String} bgColorChecked 已收藏时的背景色
+	 * @property {String} fgColor 未收藏时的文字颜色
+	 * @property {String} fgColorChecked 已收藏时的文字颜色
+	 * @property {Boolean} circle = [true|false] 是否为圆角
+	 * @property {Boolean} checked = [true|false] 是否为已收藏
+	 * @property {Object} contentText = [true|false] 收藏按钮文字
+	 * @property {Boolean} stat 是否开启统计功能
+	 * @event {Function} click 点击 fav按钮触发事件
+	 * @example <uni-fav :checked="true"/>
+	 */
+
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {	t	} = initVueI18n(messages)
+
+	export default {
+		name: "UniFav",
+		// TODO 兼容 vue3，需要注册事件
+		emits: ['click'],
+		props: {
+			star: {
+				type: [Boolean, String],
+				default: true
+			},
+			bgColor: {
+				type: String,
+				default: "#eeeeee"
+			},
+			fgColor: {
+				type: String,
+				default: "#666666"
+			},
+			bgColorChecked: {
+				type: String,
+				default: "#007aff"
+			},
+			fgColorChecked: {
+				type: String,
+				default: "#FFFFFF"
+			},
+			circle: {
+				type: [Boolean, String],
+				default: false
+			},
+			checked: {
+				type: Boolean,
+				default: false
+			},
+			contentText: {
+				type: Object,
+				default () {
+					return {
+						contentDefault: "",
+						contentFav: ""
+					};
+				}
+			},
+			stat:{
+				type: Boolean,
+				default: false
+			}
+		},
+		computed: {
+			contentDefault() {
+				return this.contentText.contentDefault || t("uni-fav.collect")
+			},
+			contentFav() {
+				return this.contentText.contentFav || t("uni-fav.collected")
+			},
+		},
+		watch: {
+			checked() {
+				if (uni.report && this.stat) {
+					if (this.checked) {
+						uni.report("收藏", "收藏");
+					} else {
+						uni.report("取消收藏", "取消收藏");
+					}
+				}
+			}
+		},
+		methods: {
+			onClick() {
+				this.$emit("click");
+			}
+		}
+	};
+</script>
+
+<style lang="scss" >
+	$fav-height: 25px;
+
+	.uni-fav {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		width: 60px;
+		height: $fav-height;
+		line-height: $fav-height;
+		text-align: center;
+		border-radius: 3px;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-fav--circle {
+		border-radius: 30px;
+	}
+
+	.uni-fav-star {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		height: $fav-height;
+		line-height: 24px;
+		margin-right: 3px;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.uni-fav-text {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		height: $fav-height;
+		line-height: $fav-height;
+		align-items: center;
+		justify-content: center;
+		font-size: 12px;
+	}
+</style>
diff --git a/src/uni_modules/uni-fav/package.json b/src/uni_modules/uni-fav/package.json
new file mode 100644
index 00000000..cc146971
--- /dev/null
+++ b/src/uni_modules/uni-fav/package.json
@@ -0,0 +1,89 @@
+{
+  "id": "uni-fav",
+  "displayName": "uni-fav 收藏按钮",
+  "version": "1.2.1",
+  "description": " Fav 收藏组件，可自定义颜色、大小。",
+  "keywords": [
+    "fav",
+    "uni-ui",
+    "uniui",
+    "收藏"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/src/uni_modules/uni-fav/readme.md b/src/uni_modules/uni-fav/readme.md
new file mode 100644
index 00000000..4de125d2
--- /dev/null
+++ b/src/uni_modules/uni-fav/readme.md
@@ -0,0 +1,10 @@
+
+
+## Fav 收藏按钮
+> **组件名：uni-fav**
+> 代码块： `uFav`
+
+用于收藏功能，可点击切换选中、不选中的状态。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-fav)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-forms/changelog.md b/src/uni_modules/uni-forms/changelog.md
new file mode 100644
index 00000000..26e120b5
--- /dev/null
+++ b/src/uni_modules/uni-forms/changelog.md
@@ -0,0 +1,60 @@
+## 1.3.2（2021-12-09）
+-
+## 1.3.1（2021-11-19）
+- 修复 label 插槽不生效的bug
+## 1.3.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-forms](https://uniapp.dcloud.io/component/uniui/uni-forms)
+## 1.2.7（2021-08-13）
+- 修复 没有添加校验规则的字段依然报错的Bug
+## 1.2.6（2021-08-11）
+- 修复 重置表单错误信息无法清除的问题
+## 1.2.5（2021-08-11）
+- 优化 组件文档
+## 1.2.4（2021-08-11）
+- 修复 表单验证只生效一次的问题
+## 1.2.3（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.2.2（2021-07-26）
+- 修复 vue2 下条件编译导致destroyed生命周期失效的Bug
+- 修复 1.2.1 引起的示例在小程序平台报错的Bug
+## 1.2.1（2021-07-22）
+- 修复 动态校验表单，默认值为空的情况下校验失效的Bug
+- 修复 不指定name属性时，运行报错的Bug
+- 优化 label默认宽度从65调整至70，使required为true且四字时不换行
+- 优化 组件示例，新增动态校验示例代码
+- 优化 组件文档，使用方式更清晰
+## 1.2.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.2（2021-06-25）
+- 修复 pattern 属性在微信小程序平台无效的问题
+## 1.1.1（2021-06-22）
+- 修复 validate-trigger属性为submit且err-show-type属性为toast时不能弹出的Bug
+## 1.1.0（2021-06-22）
+- 修复 只写setRules方法而导致校验不生效的Bug
+- 修复 由上个办法引发的错误提示文字错位的Bug
+## 1.0.48（2021-06-21）
+- 修复 不设置 label 属性 ，无法设置label插槽的问题
+## 1.0.47（2021-06-21）
+- 修复 不设置label属性，label-width属性不生效的bug
+- 修复 setRules 方法与rules属性冲突的问题
+## 1.0.46（2021-06-04）
+- 修复 动态删减数据导致报错的问题
+## 1.0.45（2021-06-04）
+- 新增 modelValue 属性 ，value 即将废弃
+## 1.0.44（2021-06-02）
+- 新增 uni-forms-item 可以设置单独的 rules
+- 新增 validate 事件增加 keepitem 参数，可以选择那些字段不过滤
+- 优化 submit 事件重命名为 validate
+## 1.0.43（2021-05-12）
+- 新增 组件示例地址
+## 1.0.42（2021-04-30）
+- 修复 自定义检验器失效的问题
+## 1.0.41（2021-03-05）
+- 更新 校验器
+- 修复 表单规则设置类型为 number 的情况下，值为0校验失败的Bug
+## 1.0.40（2021-03-04）
+- 修复 动态显示uni-forms-item的情况下，submit 方法获取值错误的Bug
+## 1.0.39（2021-02-05）
+- 调整为uni_modules目录规范
+- 修复 校验器传入 int 等类型 ，返回String类型的Bug
diff --git a/src/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue b/src/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue
new file mode 100644
index 00000000..184122a9
--- /dev/null
+++ b/src/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue
@@ -0,0 +1,536 @@
+<template>
+	<view class="">
+		<view
+			class="uni-forms-item"
+			:class="{
+				'uni-forms-item--border': border,
+				'is-first-border': border && isFirstBorder,
+				'uni-forms-item-error': msg
+			}"
+		>
+			<view class="uni-forms-item__box">
+				<view class="uni-forms-item__inner" :class="['is-direction-' + labelPos]">
+					<view class="uni-forms-item__label" :style="{ width: labelWid, justifyContent: justifyContent }">
+						<slot name="label">
+							<text v-if="required" class="is-required">*</text>
+							<uni-icons
+								v-if="leftIcon"
+								class="label-icon"
+								size="16"
+								:type="leftIcon"
+								:color="iconColor"
+							/>
+							<text class="label-text">{{ label }}</text>
+
+							<view v-if="label" class="label-seat"></view>
+						</slot>
+					</view>
+					<view class="uni-forms-item__content" :class="{ 'is-input-error-border': msg }"><slot></slot></view>
+				</view>
+				<view
+					v-if="msg"
+					class="uni-error-message"
+					:class="{ 'uni-error-msg--boeder': border }"
+					:style="{
+						paddingLeft: labelLeft
+					}"
+				>
+					<text class="uni-error-message-text">{{ showMsg === 'undertext' ? msg : '' }}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * Field 输入框
+ * @description 此组件可以实现表单的输入与校验，包括 "text" 和 "textarea" 类型。
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=21001
+ * @property {Boolean} 	required 			是否必填，左边显示红色"*"号（默认false）
+ * @property {String} validateTrigger = [bind|submit]	校验触发器方式 默认 submit 可选
+ * 	@value bind 	发生变化时触发
+ * 	@value submit 	提交时触发
+ * @property {String } 	leftIcon 			label左边的图标，限 uni-ui 的图标名称
+ * @property {String } 	iconColor 			左边通过icon配置的图标的颜色（默认#606266）
+ * @property {String } 	label 				输入框左边的文字提示
+ * @property {Number } 	labelWidth 			label的宽度，单位px（默认65）
+ * @property {String } 	labelAlign = [left|center|right] label的文字对齐方式（默认left）
+ * 	@value left		label 左侧显示
+ * 	@value center	label 居中
+ * 	@value right	label 右侧对齐
+ * @property {String } 	labelPosition = [top|left] label的文字的位置（默认left）
+ * 	@value top	顶部显示 label
+ * 	@value left	左侧显示 label
+ * @property {String } 	errorMessage 		显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
+ * @property {String } 	name 				表单域的属性名，在使用校验规则时必填
+ */
+
+export default {
+	name: 'uniFormsItem',
+	props: {
+		// 自定义内容
+		custom: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示报错信息
+		showMessage: {
+			type: Boolean,
+			default: true
+		},
+		name: String,
+		required: Boolean,
+		validateTrigger: {
+			type: String,
+			default: ''
+		},
+		leftIcon: String,
+		iconColor: {
+			type: String,
+			default: '#606266'
+		},
+		label: String,
+		// 左边标题的宽度单位px
+		labelWidth: {
+			type: [Number, String],
+			default: ''
+		},
+		// 对齐方式，left|center|right
+		labelAlign: {
+			type: String,
+			default: ''
+		},
+		// lable的位置，可选为 left-左边，top-上边
+		labelPosition: {
+			type: String,
+			default: ''
+		},
+		errorMessage: {
+			type: [String, Boolean],
+			default: ''
+		},
+		// 表单校验规则
+		rules: {
+			type: Array,
+			default() {
+				return [];
+			}
+		}
+	},
+	data() {
+		return {
+			errorTop: false,
+			errorBottom: false,
+			labelMarginBottom: '',
+			errorWidth: '',
+			errMsg: '',
+			val: '',
+			labelPos: '',
+			labelWid: '',
+			labelAli: '',
+			showMsg: 'undertext',
+			border: false,
+			isFirstBorder: false,
+			isArray: false,
+			arrayField: ''
+		};
+	},
+	computed: {
+		msg() {
+			return this.errorMessage || this.errMsg;
+		},
+		fieldStyle() {
+			let style = {};
+			if (this.labelPos == 'top') {
+				style.padding = '0 0';
+				this.labelMarginBottom = '6px';
+			}
+			if (this.labelPos == 'left' && this.msg !== false && this.msg != '') {
+				style.paddingBottom = '0px';
+				this.errorBottom = true;
+				this.errorTop = false;
+			} else if (this.labelPos == 'top' && this.msg !== false && this.msg != '') {
+				this.errorBottom = false;
+				this.errorTop = true;
+			} else {
+				// style.paddingBottom = ''
+				this.errorTop = false;
+				this.errorBottom = false;
+			}
+			return style;
+		},
+
+		// uni不支持在computed中写style.justifyContent = 'center'的形式，故用此方法
+		justifyContent() {
+			if (this.labelAli === 'left') return 'flex-start';
+			if (this.labelAli === 'center') return 'center';
+			if (this.labelAli === 'right') return 'flex-end';
+		},
+		labelLeft() {
+			return (this.labelPos === 'left' ? parseInt(this.labelWid) : 0) + 'rpx';
+		}
+	},
+	watch: {
+		validateTrigger(trigger) {
+			this.formTrigger = trigger;
+		}
+	},
+	created() {
+		this.form = this.getForm();
+		this.group = this.getForm('uniGroup');
+		this.formRules = [];
+		this.formTrigger = this.validateTrigger;
+		// 处理 name，是否数组
+		if (this.name && this.name.indexOf('[') !== -1 && this.name.indexOf(']') !== -1) {
+			this.isArray = true;
+			this.arrayField = this.name;
+			// fix by mehaotian 修改不修改的情况，动态值不检验的问题
+			this.form.formData[this.name] = this.form._getValue(this.name, '');
+		}
+	},
+	mounted() {
+		if (this.form) {
+			this.form.childrens.push(this);
+		}
+		this.init();
+	},
+	// #ifndef VUE3
+	destroyed() {
+		if (this.__isUnmounted) return;
+		this.unInit();
+	},
+	// #endif
+	// #ifdef VUE3
+	unmounted() {
+		this.__isUnmounted = true;
+		this.unInit();
+	},
+	// #endif
+	methods: {
+		init() {
+			if (this.form) {
+				let {
+					formRules,
+					validator,
+					formData,
+					value,
+					labelPosition,
+					labelWidth,
+					labelAlign,
+					errShowType
+				} = this.form;
+				this.labelPos = this.labelPosition ? this.labelPosition : labelPosition;
+
+				if (this.label) {
+					this.labelWid = this.labelWidth ? this.labelWidth : labelWidth || 140;
+				} else {
+					this.labelWid = this.labelWidth ? this.labelWidth : labelWidth || 'auto';
+				}
+				if (this.labelWid && this.labelWid !== 'auto') {
+					this.labelWid += 'rpx';
+				}
+				this.labelAli = this.labelAlign ? this.labelAlign : labelAlign;
+
+				// 判断第一个 item
+				if (!this.form.isFirstBorder) {
+					this.form.isFirstBorder = true;
+					this.isFirstBorder = true;
+				}
+
+				// 判断 group 里的第一个 item
+				if (this.group) {
+					if (!this.group.isFirstBorder) {
+						this.group.isFirstBorder = true;
+						this.isFirstBorder = true;
+					}
+				}
+
+				this.border = this.form.border;
+				this.showMsg = errShowType;
+				let name = this.isArray ? this.arrayField : this.name;
+				if (!name) return;
+				if (formRules && this.rules.length > 0) {
+					if (!formRules[name]) {
+						formRules[name] = {
+							rules: this.rules
+						};
+					}
+					validator.updateSchema(formRules);
+				}
+				this.formRules = formRules[name] || {};
+				this.validator = validator;
+			} else {
+				this.labelPos = this.labelPosition || 'left';
+				this.labelWid = this.labelWidth || 130;
+				this.labelAli = this.labelAlign || 'left';
+			}
+		},
+		unInit() {
+			if (this.form) {
+				this.form.childrens.forEach((item, index) => {
+					if (item === this) {
+						this.form.childrens.splice(index, 1);
+						delete this.form.formData[item.name];
+					}
+				});
+			}
+		},
+		/**
+		 * 获取父元素实例
+		 */
+		getForm(name = 'uniForms') {
+			let parent = this.$parent;
+			let parentName = parent.$options.name;
+			while (parentName !== name) {
+				parent = parent.$parent;
+				if (!parent) return false;
+				parentName = parent.$options.name;
+			}
+			return parent;
+		},
+
+		/**
+		 * 移除该表单项的校验结果
+		 */
+		clearValidate() {
+			this.errMsg = '';
+		},
+		/**
+		 * 子组件调用，如 easyinput
+		 * @param {Object} value
+		 */
+		setValue(value) {
+			let name = this.isArray ? this.arrayField : this.name;
+			if (name) {
+				if (this.errMsg) this.errMsg = '';
+				// 给组件赋值
+				this.form.formData[name] = this.form._getValue(name, value);
+				if (!this.formRules || (typeof this.formRules && JSON.stringify(this.formRules) === '{}')) return;
+				this.triggerCheck(this.form._getValue(this.name, value));
+			}
+		},
+
+		/**
+		 * 校验规则
+		 * @param {Object} value
+		 */
+		async triggerCheck(value, formTrigger) {
+			let promise = null;
+			this.errMsg = '';
+			// fix by mehaotian 解决没有检验规则的情况下，抛出错误的问题
+			if (!this.validator || Object.keys(this.formRules).length === 0) return;
+			const isNoField = this.isRequired(this.formRules.rules || []);
+			let isTrigger = this.isTrigger(
+				this.formRules.validateTrigger,
+				this.validateTrigger,
+				this.form.validateTrigger
+			);
+			let result = null;
+			if (!!isTrigger || formTrigger) {
+				let name = this.isArray ? this.arrayField : this.name;
+				result = await this.validator.validateUpdate(
+					{
+						[name]: value
+					},
+					this.form.formData
+				);
+			}
+			// 判断是否必填,非必填，不填不校验，填写才校验
+			if (!isNoField && (value === undefined || value === '')) {
+				result = null;
+			}
+			const inputComp = this.form.inputChildrens.find(child => child.rename === this.name);
+			if ((isTrigger || formTrigger) && result && result.errorMessage) {
+				if (inputComp) {
+					inputComp.errMsg = result.errorMessage;
+				}
+				if (this.form.errShowType === 'toast') {
+					uni.showToast({
+						title: result.errorMessage || '校验错误',
+						icon: 'none'
+					});
+				}
+				if (this.form.errShowType === 'modal') {
+					uni.showModal({
+						title: '提示',
+						content: result.errorMessage || '校验错误'
+					});
+				}
+			} else {
+				if (inputComp) {
+					inputComp.errMsg = '';
+				}
+			}
+
+			this.errMsg = !result ? '' : result.errorMessage;
+			// 触发validate事件
+			this.form.validateCheck(result ? result : null);
+			// typeof callback === 'function' && callback(result ? result : null);
+			// if (promise) return promise
+			return result ? result : null;
+		},
+		/**
+		 * 触发时机
+		 * @param {Object} event
+		 */
+		isTrigger(rule, itemRlue, parentRule) {
+			let rl = true;
+			//  bind  submit
+			if (rule === 'submit' || !rule) {
+				if (rule === undefined) {
+					if (itemRlue !== 'bind') {
+						if (!itemRlue) {
+							return parentRule === 'bind' ? true : false;
+						}
+						return false;
+					}
+					return true;
+				}
+				return false;
+			}
+			return true;
+		},
+		// 是否有必填字段
+		isRequired(rules) {
+			let isNoField = false;
+			for (let i = 0; i < rules.length; i++) {
+				const ruleData = rules[i];
+				if (ruleData.required) {
+					isNoField = true;
+					break;
+				}
+			}
+			return isNoField;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.uni-forms-item {
+	position: relative;
+	padding: 0px;
+	text-align: left;
+	color: #333;
+	font-size: 14px;
+	// margin-bottom: 22px;
+}
+
+.uni-forms-item__box {
+	position: relative;
+}
+
+.uni-forms-item__inner {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	// flex-direction: row;
+	// align-items: center;
+	padding-bottom: 22px;
+	// margin-bottom: 22px;
+}
+
+.is-direction-left {
+	flex-direction: row;
+}
+
+.is-direction-top {
+	flex-direction: column;
+}
+
+.uni-forms-item__label {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	flex-shrink: 0;
+	box-sizing: border-box;
+	/* #endif */
+	flex-direction: row;
+	align-items: center;
+	width: 65px;
+	// line-height: 2;
+	// margin-top: 3px;
+	padding: 5px 0;
+	height: 72rpx;
+	// margin-right: 5px;
+
+	.label-text {
+		font-size: 28rpx;
+		color: #333333;
+	}
+	.label-seat {
+		margin-right: 5px;
+	}
+}
+
+.uni-forms-item__content {
+	/* #ifndef APP-NVUE */
+	width: 100%;
+	box-sizing: border-box;
+	min-height: 36px;
+	/* #endif */
+	flex: 1;
+}
+
+.label-icon {
+	margin-right: 5px;
+	margin-top: -1px;
+}
+
+// 必填
+.is-required {
+	// color: $uni-color-error;
+	color: #dd524d;
+	font-weight: bold;
+}
+
+.uni-error-message {
+	position: absolute;
+	bottom: 0px;
+	left: 0;
+	text-align: left;
+}
+
+.uni-error-message-text {
+	line-height: 44rpx;
+	color: #dd524d;
+	font-size: 24rpx;
+}
+
+.uni-error-msg--boeder {
+	position: relative;
+	bottom: 0;
+	line-height: 22px;
+}
+
+.is-input-error-border {
+	border-color: #dd524d;
+}
+
+.uni-forms-item--border {
+	margin-bottom: 0;
+	padding: 10px 0;
+	border-top: 1px #eee solid;
+
+	.uni-forms-item__inner {
+		padding: 0;
+	}
+}
+
+.uni-forms-item-error {
+	// padding-bottom: 0;
+}
+
+.is-first-border {
+	/* #ifndef APP-NVUE */
+	border: none;
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	border-width: 0;
+	/* #endif */
+}
+
+.uni-forms--no-padding {
+	padding: 0;
+}
+</style>
diff --git a/src/uni_modules/uni-forms/components/uni-forms/uni-forms.vue b/src/uni_modules/uni-forms/components/uni-forms/uni-forms.vue
new file mode 100644
index 00000000..d8b4e66b
--- /dev/null
+++ b/src/uni_modules/uni-forms/components/uni-forms/uni-forms.vue
@@ -0,0 +1,472 @@
+<template>
+	<view class="uni-forms" :class="{ 'uni-forms--top': !border }">
+		<form @submit.stop="submitForm" @reset="resetForm">
+			<slot></slot>
+		</form>
+	</view>
+</template>
+
+<script>
+	// #ifndef VUE3
+	import Vue from 'vue';
+	Vue.prototype.binddata = function(name, value, formName) {
+		if (formName) {
+			this.$refs[formName].setValue(name, value);
+		} else {
+			let formVm;
+			for (let i in this.$refs) {
+				const vm = this.$refs[i];
+				if (vm && vm.$options && vm.$options.name === 'uniForms') {
+					formVm = vm;
+					break;
+				}
+			}
+			if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
+			formVm.setValue(name, value);
+		}
+	};
+	// #endif
+
+
+
+	import Validator from './validate.js';
+	/**
+	 * Forms 表单
+	 * @description 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=2773
+	 * @property {Object} rules	表单校验规则
+	 * @property {String} validateTrigger = [bind|submit]	校验触发器方式 默认 submit
+	 * @value bind		发生变化时触发
+	 * @value submit	提交时触发
+	 * @property {String} labelPosition = [top|left]	label 位置 默认 left
+	 * @value top		顶部显示 label
+	 * @value left	左侧显示 label
+	 * @property {String} labelWidth	label 宽度，默认 65px
+	 * @property {String} labelAlign = [left|center|right]	label 居中方式  默认 left
+	 * @value left		label 左侧显示
+	 * @value center	label 居中
+	 * @value right		label 右侧对齐
+	 * @property {String} errShowType = [undertext|toast|modal]	校验错误信息提示方式
+	 * @value undertext	错误信息在底部显示
+	 * @value toast			错误信息toast显示
+	 * @value modal			错误信息modal显示
+	 * @event {Function} submit	提交时触发
+	 */
+
+	export default {
+		name: 'uniForms',
+		components: {},
+		emits:['input','reset','validate','submit'],
+		props: {
+			// 即将弃用
+			value: {
+				type: Object,
+				default () {
+					return {};
+				}
+			},
+			// 替换 value 属性
+			modelValue: {
+				type: Object,
+				default () {
+					return {};
+				}
+			},
+			// 表单校验规则
+			rules: {
+				type: Object,
+				default () {
+					return {};
+				}
+			},
+			// 校验触发器方式，默认 关闭
+			validateTrigger: {
+				type: String,
+				default: ''
+			},
+			// label 位置，可选值 top/left
+			labelPosition: {
+				type: String,
+				default: 'left'
+			},
+			// label 宽度，单位 px
+			labelWidth: {
+				type: [String, Number],
+				default: ''
+			},
+			// label 居中方式，可选值 left/center/right
+			labelAlign: {
+				type: String,
+				default: 'left'
+			},
+			errShowType: {
+				type: String,
+				default: 'undertext'
+			},
+			border: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				formData: {}
+			};
+		},
+		computed: {
+			dataValue() {
+				if (JSON.stringify(this.modelValue) === '{}') {
+					return this.value
+				} else {
+					return this.modelValue
+				}
+			}
+		},
+		watch: {
+			rules(newVal) {
+				// 如果规则发生变化，要初始化组件
+				this.init(newVal);
+			},
+			labelPosition() {
+				this.childrens.forEach(vm => {
+					vm.init()
+				})
+			}
+		},
+		created() {
+			// #ifdef VUE3
+			let getbinddata = getApp().$vm.$.appContext.config.globalProperties.binddata
+			if (!getbinddata) {
+				getApp().$vm.$.appContext.config.globalProperties.binddata = function(name, value, formName) {
+					if (formName) {
+						this.$refs[formName].setValue(name, value);
+					} else {
+						let formVm;
+						for (let i in this.$refs) {
+							const vm = this.$refs[i];
+							if (vm && vm.$options && vm.$options.name === 'uniForms') {
+								formVm = vm;
+								break;
+							}
+						}
+						if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
+						formVm.setValue(name, value);
+					}
+				}
+			}
+			// #endif
+
+			// 存放watch 监听数组
+			this.unwatchs = [];
+			// 存放子组件数组
+			this.childrens = [];
+			// 存放 easyInput 组件
+			this.inputChildrens = [];
+			// 存放 dataCheckbox 组件
+			this.checkboxChildrens = [];
+			// 存放规则
+			this.formRules = [];
+			this.init(this.rules);
+		},
+		// mounted() {
+		// 	this.init(this.rules)
+		// },
+		methods: {
+			init(formRules) {
+				// 判断是否有规则
+				if (Object.keys(formRules).length === 0) {
+					this.formData = this.dataValue
+					return
+				};
+				this.formRules = formRules;
+				this.validator = new Validator(formRules);
+				this.registerWatch();
+			},
+			// 监听 watch
+			registerWatch() {
+				// 取消监听,避免多次调用 init 重复执行 $watch
+				this.unwatchs.forEach(v => v());
+				this.childrens.forEach((v) => {
+					v.init()
+				})
+				// watch 每个属性 ，需要知道具体那个属性发变化
+				Object.keys(this.dataValue).forEach(key => {
+					let watch = this.$watch(
+						'dataValue.' + key,
+						value => {
+							if (!value) return
+							// 如果是对象 ，则平铺内容
+							if (value.toString() === '[object Object]') {
+								for (let i in value) {
+									let name = `${key}[${i}]`;
+									this.formData[name] = this._getValue(name, value[i]);
+								}
+							} else {
+								this.formData[key] = this._getValue(key, value);
+							}
+						},
+						{
+							deep: true,
+							immediate: true
+						}
+					);
+					this.unwatchs.push(watch);
+				});
+			},
+			/**
+			 * 公开给用户使用
+			 * 设置校验规则
+			 * @param {Object} formRules
+			 */
+			setRules(formRules) {
+				this.init(formRules);
+			},
+			/**
+			 * 公开给用户使用
+			 * 设置自定义表单组件 value 值
+			 *  @param {String} name 字段名称
+			 *  @param {String} value 字段值
+			 */
+			setValue(name, value, callback) {
+				let example = this.childrens.find(child => child.name === name);
+				if (!example) return null;
+				value = this._getValue(example.name, value);
+				this.formData[name] = value;
+				example.val = value;
+				return example.triggerCheck(value, callback);
+			},
+
+			/**
+			 * 表单重置
+			 * @param {Object} event
+			 */
+			resetForm(event) {
+				this.childrens.forEach(item => {
+					item.errMsg = '';
+					const inputComp = this.inputChildrens.find(child => child.rename === item.name);
+					if (inputComp) {
+						inputComp.errMsg = '';
+						// fix by mehaotian 不触发其他组件的 setValue
+						inputComp.is_reset = true
+						inputComp.$emit('input', inputComp.multiple ? [] : '');
+						inputComp.$emit('update:modelValue', inputComp.multiple ? [] : '');
+					}
+				});
+
+				this.childrens.forEach(item => {
+					if (item.name) {
+						this.formData[item.name] = this._getValue(item.name, '');
+					}
+				});
+
+				this.$emit('reset', event);
+			},
+
+			/**
+			 * 触发表单校验，通过 @validate 获取
+			 * @param {Object} validate
+			 */
+			validateCheck(validate) {
+				if (validate === null) validate = null;
+				this.$emit('validate', validate);
+			},
+			/**
+			 * 校验所有或者部分表单
+			 */
+			async validateAll(invalidFields, type, keepitem, callback) {
+				let childrens = []
+				for (let i in invalidFields) {
+					const item = this.childrens.find(v => v.name === i)
+					if (item) {
+						childrens.push(item)
+					}
+				}
+
+				if (!callback && typeof keepitem === 'function') {
+					callback = keepitem;
+				}
+
+				let promise;
+				if (!callback && typeof callback !== 'function' && Promise) {
+					promise = new Promise((resolve, reject) => {
+						callback = function(valid, invalidFields) {
+							!valid ? resolve(invalidFields) : reject(valid);
+						};
+					});
+				}
+
+				let results = [];
+				let newFormData = {};
+				if (this.validator) {
+					for (let key in childrens) {
+						const child = childrens[key];
+						let name = child.isArray ? child.arrayField : child.name;
+						if (child.isArray) {
+							if (child.name.indexOf('[') !== -1 && child.name.indexOf(']') !== -1) {
+								const fieldData = child.name.split('[');
+								const fieldName = fieldData[0];
+								const fieldValue = fieldData[1].replace(']', '');
+								if (!newFormData[fieldName]) {
+									newFormData[fieldName] = {};
+								}
+								newFormData[fieldName][fieldValue] = this._getValue(name, invalidFields[name]);
+							}
+						} else {
+							newFormData[name] = this._getValue(name, invalidFields[name]);
+						}
+						const result = await child.triggerCheck(invalidFields[name], true);
+						if (result) {
+							results.push(result);
+							if (this.errShowType === 'toast' || this.errShowType === 'modal') break;
+						}
+					}
+				} else {
+					newFormData = invalidFields
+				}
+				if (Array.isArray(results)) {
+					if (results.length === 0) results = null;
+				}
+
+				if (Array.isArray(keepitem)) {
+					keepitem.forEach(v => {
+						newFormData[v] = this.dataValue[v];
+					});
+				}
+
+				if (type === 'submit') {
+					this.$emit('submit', {
+						detail: {
+							value: newFormData,
+							errors: results
+						}
+					});
+				} else {
+					this.$emit('validate', results);
+				}
+
+				callback && typeof callback === 'function' && callback(results, newFormData);
+
+				if (promise && callback) {
+					return promise;
+				} else {
+					return null;
+				}
+			},
+			submitForm() {},
+			/**
+			 * 外部调用方法
+			 * 手动提交校验表单
+			 * 对整个表单进行校验的方法，参数为一个回调函数。
+			 */
+			submit(keepitem, callback, type) {
+				for (let i in this.dataValue) {
+					const itemData = this.childrens.find(v => v.name === i);
+					if (itemData) {
+						if (this.formData[i] === undefined) {
+							this.formData[i] = this._getValue(i, this.dataValue[i]);
+						}
+					}
+				}
+				if (!type) {
+					console.warn('submit 方法即将废弃，请使用validate方法代替！');
+				}
+				return this.validateAll(this.formData, 'submit', keepitem, callback);
+			},
+
+			/**
+			 * 外部调用方法
+			 * 校验表单
+			 * 对整个表单进行校验的方法，参数为一个回调函数。
+			 */
+			validate(keepitem, callback) {
+				return this.submit(keepitem, callback, true);
+			},
+
+			/**
+			 * 部分表单校验
+			 * @param {Object} props
+			 * @param {Object} cb
+			 */
+			validateField(props, callback) {
+				props = [].concat(props);
+				let invalidFields = {};
+				this.childrens.forEach(item => {
+					if (props.indexOf(item.name) !== -1) {
+						invalidFields = Object.assign({}, invalidFields, {
+							[item.name]: this.formData[item.name]
+						});
+					}
+				});
+				return this.validateAll(invalidFields, 'submit', [], callback);
+			},
+
+			/**
+			 * 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
+			 */
+			resetFields() {
+				this.resetForm();
+			},
+
+			/**
+			 * 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
+			 */
+			clearValidate(props) {
+				props = [].concat(props);
+				this.childrens.forEach(item => {
+					const inputComp = this.inputChildrens.find(child => child.rename === item.name);
+					if (props.length === 0) {
+						item.errMsg = '';
+						if (inputComp) {
+							inputComp.errMsg = '';
+						}
+					} else {
+						if (props.indexOf(item.name) !== -1) {
+							item.errMsg = '';
+							if (inputComp) {
+								inputComp.errMsg = '';
+							}
+						}
+					}
+				});
+			},
+			/**
+			 * 把 value 转换成指定的类型
+			 * @param {Object} key
+			 * @param {Object} value
+			 */
+			_getValue(key, value) {
+				const rules = (this.formRules[key] && this.formRules[key].rules) || [];
+				const isRuleNum = rules.find(val => val.format && this.type_filter(val.format));
+				const isRuleBool = rules.find(val => (val.format && val.format === 'boolean') || val.format === 'bool');
+				// 输入值为 number
+				if (isRuleNum) {
+					value = isNaN(value) ? value : value === '' || value === null ? null : Number(value);
+				}
+				// 简单判断真假值
+				if (isRuleBool) {
+					value = !value ? false : true;
+				}
+				return value;
+			},
+			/**
+			 * 过滤数字类型
+			 * @param {Object} format
+			 */
+			type_filter(format) {
+				return format === 'int' || format === 'double' || format === 'number' || format === 'timestamp';
+			}
+		}
+	};
+</script>
+
+<style lang="scss" >
+	.uni-forms {
+		// overflow: hidden;
+		// padding: 10px 15px;
+	}
+
+	.uni-forms--top {
+		// padding: 10px 15px;
+		// padding-top: 22px;
+	}
+</style>
diff --git a/src/uni_modules/uni-forms/components/uni-forms/validate.js b/src/uni_modules/uni-forms/components/uni-forms/validate.js
new file mode 100644
index 00000000..1834c6cf
--- /dev/null
+++ b/src/uni_modules/uni-forms/components/uni-forms/validate.js
@@ -0,0 +1,486 @@
+var pattern = {
+	email: /^\S+?@\S+?\.\S+?$/,
+	idcard: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
+	url: new RegExp(
+		"^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$",
+		'i')
+};
+
+const FORMAT_MAPPING = {
+	"int": 'integer',
+	"bool": 'boolean',
+	"double": 'number',
+	"long": 'number',
+	"password": 'string'
+	// "fileurls": 'array'
+}
+
+function formatMessage(args, resources = '') {
+	var defaultMessage = ['label']
+	defaultMessage.forEach((item) => {
+		if (args[item] === undefined) {
+			args[item] = ''
+		}
+	})
+
+	let str = resources
+	for (let key in args) {
+		let reg = new RegExp('{' + key + '}')
+		str = str.replace(reg, args[key])
+	}
+	return str
+}
+
+function isEmptyValue(value, type) {
+	if (value === undefined || value === null) {
+		return true;
+	}
+
+	if (typeof value === 'string' && !value) {
+		return true;
+	}
+
+	if (Array.isArray(value) && !value.length) {
+		return true;
+	}
+
+	if (type === 'object' && !Object.keys(value).length) {
+		return true;
+	}
+
+	return false;
+}
+
+const types = {
+	integer(value) {
+		return types.number(value) && parseInt(value, 10) === value;
+	},
+	string(value) {
+		return typeof value === 'string';
+	},
+	number(value) {
+		if (isNaN(value)) {
+			return false;
+		}
+		return typeof value === 'number';
+	},
+	"boolean": function(value) {
+		return typeof value === 'boolean';
+	},
+	"float": function(value) {
+		return types.number(value) && !types.integer(value);
+	},
+	array(value) {
+		return Array.isArray(value);
+	},
+	object(value) {
+		return typeof value === 'object' && !types.array(value);
+	},
+	date(value) {
+		return value instanceof Date;
+	},
+	timestamp(value) {
+		if (!this.integer(value) || Math.abs(value).toString().length > 16) {
+			return false
+		}
+		return true;
+	},
+	file(value) {
+		return typeof value.url === 'string';
+	},
+	email(value) {
+		return typeof value === 'string' && !!value.match(pattern.email) && value.length < 255;
+	},
+	url(value) {
+		return typeof value === 'string' && !!value.match(pattern.url);
+	},
+	pattern(reg, value) {
+		try {
+			return new RegExp(reg).test(value);
+		} catch (e) {
+			return false;
+		}
+	},
+	method(value) {
+		return typeof value === 'function';
+	},
+	idcard(value) {
+		return typeof value === 'string' && !!value.match(pattern.idcard);
+	},
+	'url-https'(value) {
+		return this.url(value) && value.startsWith('https://');
+	},
+	'url-scheme'(value) {
+		return value.startsWith('://');
+	},
+	'url-web'(value) {
+		return false;
+	}
+}
+
+class RuleValidator {
+
+	constructor(message) {
+		this._message = message
+	}
+
+	async validateRule(fieldKey, fieldValue, value, data, allData) {
+		var result = null
+
+		let rules = fieldValue.rules
+
+		let hasRequired = rules.findIndex((item) => {
+			return item.required
+		})
+		if (hasRequired < 0) {
+			if (value === null || value === undefined) {
+				return result
+			}
+			if (typeof value === 'string' && !value.length) {
+				return result
+			}
+		}
+
+		var message = this._message
+
+		if (rules === undefined) {
+			return message['default']
+		}
+
+		for (var i = 0; i < rules.length; i++) {
+			let rule = rules[i]
+			let vt = this._getValidateType(rule)
+
+			Object.assign(rule, {
+				label: fieldValue.label || `["${fieldKey}"]`
+			})
+
+			if (RuleValidatorHelper[vt]) {
+				result = RuleValidatorHelper[vt](rule, value, message)
+				if (result != null) {
+					break
+				}
+			}
+
+			if (rule.validateExpr) {
+				let now = Date.now()
+				let resultExpr = rule.validateExpr(value, allData, now)
+				if (resultExpr === false) {
+					result = this._getMessage(rule, rule.errorMessage || this._message['default'])
+					break
+				}
+			}
+
+			if (rule.validateFunction) {
+				result = await this.validateFunction(rule, value, data, allData, vt)
+				if (result !== null) {
+					break
+				}
+			}
+		}
+
+		if (result !== null) {
+			result = message.TAG + result
+		}
+
+		return result
+	}
+
+	async validateFunction(rule, value, data, allData, vt) {
+		let result = null
+		try {
+			let callbackMessage = null
+			const res = await rule.validateFunction(rule, value, allData || data, (message) => {
+				callbackMessage = message
+			})
+			if (callbackMessage || (typeof res === 'string' && res) || res === false) {
+				result = this._getMessage(rule, callbackMessage || res, vt)
+			}
+		} catch (e) {
+			result = this._getMessage(rule, e.message, vt)
+		}
+		return result
+	}
+
+	_getMessage(rule, message, vt) {
+		return formatMessage(rule, message || rule.errorMessage || this._message[vt] || message['default'])
+	}
+
+	_getValidateType(rule) {
+		var result = ''
+		if (rule.required) {
+			result = 'required'
+		} else if (rule.format) {
+			result = 'format'
+		} else if (rule.arrayType) {
+			result = 'arrayTypeFormat'
+		} else if (rule.range) {
+			result = 'range'
+		} else if (rule.maximum !== undefined || rule.minimum !== undefined) {
+			result = 'rangeNumber'
+		} else if (rule.maxLength !== undefined || rule.minLength !== undefined) {
+			result = 'rangeLength'
+		} else if (rule.pattern) {
+			result = 'pattern'
+		} else if (rule.validateFunction) {
+			result = 'validateFunction'
+		}
+		return result
+	}
+}
+
+const RuleValidatorHelper = {
+	required(rule, value, message) {
+		if (rule.required && isEmptyValue(value, rule.format || typeof value)) {
+			return formatMessage(rule, rule.errorMessage || message.required);
+		}
+
+		return null
+	},
+
+	range(rule, value, message) {
+		const {
+			range,
+			errorMessage
+		} = rule;
+
+		let list = new Array(range.length);
+		for (let i = 0; i < range.length; i++) {
+			const item = range[i];
+			if (types.object(item) && item.value !== undefined) {
+				list[i] = item.value;
+			} else {
+				list[i] = item;
+			}
+		}
+
+		let result = false
+		if (Array.isArray(value)) {
+			result = (new Set(value.concat(list)).size === list.length);
+		} else {
+			if (list.indexOf(value) > -1) {
+				result = true;
+			}
+		}
+
+		if (!result) {
+			return formatMessage(rule, errorMessage || message['enum']);
+		}
+
+		return null
+	},
+
+	rangeNumber(rule, value, message) {
+		if (!types.number(value)) {
+			return formatMessage(rule, rule.errorMessage || message.pattern.mismatch);
+		}
+
+		let {
+			minimum,
+			maximum,
+			exclusiveMinimum,
+			exclusiveMaximum
+		} = rule;
+		let min = exclusiveMinimum ? value <= minimum : value < minimum;
+		let max = exclusiveMaximum ? value >= maximum : value > maximum;
+
+		if (minimum !== undefined && min) {
+			return formatMessage(rule, rule.errorMessage || message['number'][exclusiveMinimum ?
+				'exclusiveMinimum' : 'minimum'
+			])
+		} else if (maximum !== undefined && max) {
+			return formatMessage(rule, rule.errorMessage || message['number'][exclusiveMaximum ?
+				'exclusiveMaximum' : 'maximum'
+			])
+		} else if (minimum !== undefined && maximum !== undefined && (min || max)) {
+			return formatMessage(rule, rule.errorMessage || message['number'].range)
+		}
+
+		return null
+	},
+
+	rangeLength(rule, value, message) {
+		if (!types.string(value) && !types.array(value)) {
+			return formatMessage(rule, rule.errorMessage || message.pattern.mismatch);
+		}
+
+		let min = rule.minLength;
+		let max = rule.maxLength;
+		let val = value.length;
+
+		if (min !== undefined && val < min) {
+			return formatMessage(rule, rule.errorMessage || message['length'].minLength)
+		} else if (max !== undefined && val > max) {
+			return formatMessage(rule, rule.errorMessage || message['length'].maxLength)
+		} else if (min !== undefined && max !== undefined && (val < min || val > max)) {
+			return formatMessage(rule, rule.errorMessage || message['length'].range)
+		}
+
+		return null
+	},
+
+	pattern(rule, value, message) {
+		if (!types['pattern'](rule.pattern, value)) {
+			return formatMessage(rule, rule.errorMessage || message.pattern.mismatch);
+		}
+
+		return null
+	},
+
+	format(rule, value, message) {
+		var customTypes = Object.keys(types);
+		var format = FORMAT_MAPPING[rule.format] ? FORMAT_MAPPING[rule.format] : (rule.format || rule.arrayType);
+
+		if (customTypes.indexOf(format) > -1) {
+			if (!types[format](value)) {
+				return formatMessage(rule, rule.errorMessage || message.typeError);
+			}
+		}
+
+		return null
+	},
+
+	arrayTypeFormat(rule, value, message) {
+		if (!Array.isArray(value)) {
+			return formatMessage(rule, rule.errorMessage || message.typeError);
+		}
+
+		for (let i = 0; i < value.length; i++) {
+			const element = value[i];
+			let formatResult = this.format(rule, element, message)
+			if (formatResult !== null) {
+				return formatResult
+			}
+		}
+
+		return null
+	}
+}
+
+class SchemaValidator extends RuleValidator {
+
+	constructor(schema, options) {
+		super(SchemaValidator.message);
+
+		this._schema = schema
+		this._options = options || null
+	}
+
+	updateSchema(schema) {
+		this._schema = schema
+	}
+
+	async validate(data, allData) {
+		let result = this._checkFieldInSchema(data)
+		if (!result) {
+			result = await this.invokeValidate(data, false, allData)
+		}
+		return result.length ? result[0] : null
+	}
+
+	async validateAll(data, allData) {
+		let result = this._checkFieldInSchema(data)
+		if (!result) {
+			result = await this.invokeValidate(data, true, allData)
+		}
+		return result
+	}
+
+	async validateUpdate(data, allData) {
+		let result = this._checkFieldInSchema(data)
+		if (!result) {
+			result = await this.invokeValidateUpdate(data, false, allData)
+		}
+		return result.length ? result[0] : null
+	}
+
+	async invokeValidate(data, all, allData) {
+		let result = []
+		let schema = this._schema
+		for (let key in schema) {
+			let value = schema[key]
+			let errorMessage = await this.validateRule(key, value, data[key], data, allData)
+			if (errorMessage != null) {
+				result.push({
+					key,
+					errorMessage
+				})
+				if (!all) break
+			}
+		}
+		return result
+	}
+
+	async invokeValidateUpdate(data, all, allData) {
+		let result = []
+		for (let key in data) {
+			let errorMessage = await this.validateRule(key, this._schema[key], data[key], data, allData)
+			if (errorMessage != null) {
+				result.push({
+					key,
+					errorMessage
+				})
+				if (!all) break
+			}
+		}
+		return result
+	}
+
+	_checkFieldInSchema(data) {
+		var keys = Object.keys(data)
+		var keys2 = Object.keys(this._schema)
+		if (new Set(keys.concat(keys2)).size === keys2.length) {
+			return ''
+		}
+
+		var noExistFields = keys.filter((key) => {
+			return keys2.indexOf(key) < 0;
+		})
+		var errorMessage = formatMessage({
+			field: JSON.stringify(noExistFields)
+		}, SchemaValidator.message.TAG + SchemaValidator.message['defaultInvalid'])
+		return [{
+			key: 'invalid',
+			errorMessage
+		}]
+	}
+}
+
+function Message() {
+	return {
+		TAG: "",
+		default: '验证错误',
+		defaultInvalid: '提交的字段{field}在数据库中并不存在',
+		validateFunction: '验证无效',
+		required: '{label}必填',
+		'enum': '{label}超出范围',
+		timestamp: '{label}格式无效',
+		whitespace: '{label}不能为空',
+		typeError: '{label}类型无效',
+		date: {
+			format: '{label}日期{value}格式无效',
+			parse: '{label}日期无法解析,{value}无效',
+			invalid: '{label}日期{value}无效'
+		},
+		length: {
+			minLength: '{label}长度不能少于{minLength}',
+			maxLength: '{label}长度不能超过{maxLength}',
+			range: '{label}必须介于{minLength}和{maxLength}之间'
+		},
+		number: {
+			minimum: '{label}不能小于{minimum}',
+			maximum: '{label}不能大于{maximum}',
+			exclusiveMinimum: '{label}不能小于等于{minimum}',
+			exclusiveMaximum: '{label}不能大于等于{maximum}',
+			range: '{label}必须介于{minimum}and{maximum}之间'
+		},
+		pattern: {
+			mismatch: '{label}格式不匹配'
+		}
+	};
+}
+
+
+SchemaValidator.message = new Message();
+
+export default SchemaValidator
diff --git a/src/uni_modules/uni-forms/package.json b/src/uni_modules/uni-forms/package.json
new file mode 100644
index 00000000..dfa7af4c
--- /dev/null
+++ b/src/uni_modules/uni-forms/package.json
@@ -0,0 +1,90 @@
+{
+  "id": "uni-forms",
+  "displayName": "uni-forms 表单",
+  "version": "1.3.2",
+  "description": "由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据",
+  "keywords": [
+    "uni-ui",
+    "表单",
+    "校验",
+    "表单校验",
+    "表单验证"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+      "uni-icons"
+    ],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/src/uni_modules/uni-forms/readme.md b/src/uni_modules/uni-forms/readme.md
new file mode 100644
index 00000000..63d5a043
--- /dev/null
+++ b/src/uni_modules/uni-forms/readme.md
@@ -0,0 +1,23 @@
+
+
+## Forms 表单
+
+> **组件名：uni-forms**
+> 代码块： `uForms`、`uni-forms-item`
+> 关联组件：`uni-forms-item`、`uni-easyinput`、`uni-data-checkbox`、`uni-group`。
+
+
+uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
+
+然而几乎每个表单都需要做表单验证，为了方便做表单验证，减少重复开发，`uni ui` 又基于 `<form>`组件封装了 `<uni-forms>`组件，内置了表单验证功能。
+
+`<uni-forms>` 提供了 `rules`属性来描述校验规则、`<uni-forms-item>`子组件来包裹具体的表单项，以及给原生或三方组件提供了 `binddata()` 来设置表单值。
+
+每个要校验的表单项，不管input还是checkbox，都必须放在`<uni-forms-item>`组件中，且一个`<uni-forms-item>`组件只能放置一个表单项。
+
+`<uni-forms-item>`组件内部预留了显示error message的区域，默认是在表单项的底部。
+
+另外，`<uni-forms>`组件下面的各个表单项，可以通过`<uni-group>`包裹为不同的分组。同一`<uni-group>`下的不同表单项目将聚拢在一起，同其他group保持垂直间距。`<uni-group>`仅影响视觉效果。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-forms)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-goods-nav/changelog.md b/src/uni_modules/uni-goods-nav/changelog.md
new file mode 100644
index 00000000..c6264c67
--- /dev/null
+++ b/src/uni_modules/uni-goods-nav/changelog.md
@@ -0,0 +1,18 @@
+## 1.2.1（2022-05-30）
+- 新增 stat属性，是否开启uni统计功能
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-goods-nav](https://uniapp.dcloud.io/component/uniui/uni-goods-nav)
+## 1.1.1（2021-08-24）
+- 新增 支持国际化
+## 1.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-05-12）
+- 新增 组件示例地址
+## 1.0.6（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.5（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.4（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/en.json b/src/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/en.json
new file mode 100644
index 00000000..dcdba41c
--- /dev/null
+++ b/src/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/en.json
@@ -0,0 +1,6 @@
+{
+	"uni-goods-nav.options.shop": "shop",
+	"uni-goods-nav.options.cart": "cart",
+	"uni-goods-nav.buttonGroup.addToCart": "add to cart",
+	"uni-goods-nav.buttonGroup.buyNow": "buy now"
+}
diff --git a/src/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/index.js b/src/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/index.js
new file mode 100644
index 00000000..de7509c8
--- /dev/null
+++ b/src/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/index.js
@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/src/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/zh-Hans.json b/src/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/zh-Hans.json
new file mode 100644
index 00000000..48ee344c
--- /dev/null
+++ b/src/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/zh-Hans.json
@@ -0,0 +1,6 @@
+{
+	"uni-goods-nav.options.shop": "店铺",
+	"uni-goods-nav.options.cart": "购物车",
+	"uni-goods-nav.buttonGroup.addToCart": "加入购物车",
+	"uni-goods-nav.buttonGroup.buyNow": "立即购买"
+}
diff --git a/src/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/zh-Hant.json b/src/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/zh-Hant.json
new file mode 100644
index 00000000..d0a0255c
--- /dev/null
+++ b/src/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/zh-Hant.json
@@ -0,0 +1,6 @@
+{
+	"uni-goods-nav.options.shop": "店鋪",
+	"uni-goods-nav.options.cart": "購物車",
+	"uni-goods-nav.buttonGroup.addToCart": "加入購物車",
+	"uni-goods-nav.buttonGroup.buyNow": "立即購買"
+}
diff --git a/src/uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue b/src/uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue
new file mode 100644
index 00000000..8a16b175
--- /dev/null
+++ b/src/uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue
@@ -0,0 +1,229 @@
+<template>
+	<view class="uni-goods-nav">
+		<!-- 底部占位 -->
+		<view class="uni-tab__seat" />
+		<view class="uni-tab__cart-box flex">
+			<view class="flex uni-tab__cart-sub-left">
+				<view v-for="(item,index) in options" :key="index" class="flex uni-tab__cart-button-left uni-tab__shop-cart" @click="onClick(index,item)">
+					<view class="uni-tab__icon">
+						<uni-icons :type="item.icon" size="20" color="#646566"></uni-icons>
+						<!-- <image class="image" :src="item.icon" mode="widthFix" /> -->
+					</view>
+					<text class="uni-tab__text">{{ item.text }}</text>
+					<view class="flex uni-tab__dot-box">
+						<text v-if="item.info" :class="{ 'uni-tab__dots': item.info > 9 }" class="uni-tab__dot " :style="{'backgroundColor':item.infoBackgroundColor?item.infoBackgroundColor:'#ff0000',
+						color:item.infoColor?item.infoColor:'#fff'
+						}">{{ item.info }}</text>
+					</view>
+				</view>
+			</view>
+			<view :class="{'uni-tab__right':fill}" class="flex uni-tab__cart-sub-right ">
+				<view v-for="(item,index) in buttonGroup" :key="index" :style="{background:item.backgroundColor,color:item.color}"
+				 class="flex uni-tab__cart-button-right" @click="buttonClick(index,item)"><text :style="{color:item.color}" class="uni-tab__cart-button-right-text">{{ item.text }}</text></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+	initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {	t	} = initVueI18n(messages)
+	/**
+	 * GoodsNav 商品导航
+	 * @description 商品加入购物车、立即购买等
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=865
+	 * @property {Array} options 组件参数
+	 * @property {Array} buttonGroup 组件按钮组参数
+	 * @property {Boolean} fill = [true | false] 组件按钮组参数
+	 * @property {Boolean} stat 是否开启统计功能
+	 * @event {Function} click 左侧点击事件
+	 * @event {Function} buttonClick 右侧按钮组点击事件
+	 * @example <uni-goods-nav :fill="true"  options="" buttonGroup="buttonGroup"  @click="" @buttonClick="" />
+	 */
+	export default {
+		name: 'UniGoodsNav',
+		emits:['click','buttonClick'],
+		props: {
+			options: {
+				type: Array,
+				default () {
+					return [{
+						icon: 'shop',
+						text: t("uni-goods-nav.options.shop"),
+					}, {
+						icon: 'cart',
+						text: t("uni-goods-nav.options.cart")
+					}]
+				}
+			},
+			buttonGroup: {
+				type: Array,
+				default () {
+					return [{
+							text: t("uni-goods-nav.buttonGroup.addToCart"),
+							backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
+							color: '#fff'
+						},
+						{
+							text: t("uni-goods-nav.buttonGroup.buyNow"),
+							backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
+							color: '#fff'
+						}
+					]
+				}
+			},
+			fill: {
+				type: Boolean,
+				default: false
+			},
+			stat:{
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			onClick(index, item) {
+				this.$emit('click', {
+					index,
+					content: item,
+				})
+			},
+			buttonClick(index, item) {
+				if (uni.report && this.stat) {
+					uni.report(item.text, item.text)
+				}
+				this.$emit('buttonClick', {
+					index,
+					content: item
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.flex {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-goods-nav {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+	}
+
+	.uni-tab__cart-box {
+		flex: 1;
+		height: 50px;
+		background-color: #fff;
+		z-index: 900;
+	}
+
+	.uni-tab__cart-sub-left {
+		padding: 0 5px;
+	}
+
+	.uni-tab__cart-sub-right {
+		flex: 1;
+	}
+
+	.uni-tab__right {
+		margin: 5px 0;
+		margin-right: 10px;
+		border-radius: 100px;
+		overflow: hidden;
+	}
+
+	.uni-tab__cart-button-left {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		// flex: 1;
+		position: relative;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		margin: 0 10px;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-tab__icon {
+		width: 18px;
+		height: 18px;
+	}
+
+	.image {
+		width: 18px;
+		height: 18px;
+	}
+
+	.uni-tab__text {
+		margin-top: 3px;
+		font-size: 12px;
+		color: #646566;
+	}
+
+	.uni-tab__cart-button-right {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex-direction: column;
+		/* #endif */
+		flex: 1;
+		justify-content: center;
+		align-items: center;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-tab__cart-button-right-text {
+		font-size: 14px;
+		color: #fff;
+	}
+
+	.uni-tab__cart-button-right:active {
+		opacity: 0.7;
+	}
+
+	.uni-tab__dot-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex-direction: column;
+		/* #endif */
+		position: absolute;
+		right: -2px;
+		top: 2px;
+		justify-content: center;
+		align-items: center;
+		// width: 0;
+		// height: 0;
+	}
+
+	.uni-tab__dot {
+		// width: 30rpx;
+		// height: 30rpx;
+		padding: 0 4px;
+		line-height: 15px;
+		color: #ffffff;
+		text-align: center;
+		font-size: 12px;
+		background-color: #ff0000;
+		border-radius: 15px;
+	}
+
+	.uni-tab__dots {
+		padding: 0 4px;
+		// width: auto;
+		border-radius: 15px;
+	}
+</style>
diff --git a/src/uni_modules/uni-goods-nav/package.json b/src/uni_modules/uni-goods-nav/package.json
new file mode 100644
index 00000000..636e45e7
--- /dev/null
+++ b/src/uni_modules/uni-goods-nav/package.json
@@ -0,0 +1,88 @@
+{
+  "id": "uni-goods-nav",
+  "displayName": "uni-goods-nav 商品导航",
+  "version": "1.2.1",
+  "description": "商品导航组件主要用于电商类应用底部导航，可自定义加入购物车，购买等操作",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "商品导航"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/src/uni_modules/uni-goods-nav/readme.md b/src/uni_modules/uni-goods-nav/readme.md
new file mode 100644
index 00000000..07df93f5
--- /dev/null
+++ b/src/uni_modules/uni-goods-nav/readme.md
@@ -0,0 +1,10 @@
+
+
+## GoodsNav 商品导航
+> **组件名：uni-goods-nav**
+> 代码块： `uGoodsNav`
+
+商品加入购物车，立即购买等。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-goods-nav)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-grid/changelog.md b/src/uni_modules/uni-grid/changelog.md
new file mode 100644
index 00000000..d301166c
--- /dev/null
+++ b/src/uni_modules/uni-grid/changelog.md
@@ -0,0 +1,13 @@
+## 1.4.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-grid](https://uniapp.dcloud.io/component/uniui/uni-grid)
+## 1.3.2（2021-11-09） 
+- 新增 提供组件设计资源，组件样式调整
+## 1.3.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.3.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.2.4（2021-05-12）
+- 新增 组件示例地址
+## 1.2.3（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-grid/components/uni-grid-item/uni-grid-item.vue b/src/uni_modules/uni-grid/components/uni-grid-item/uni-grid-item.vue
new file mode 100644
index 00000000..ecaeb25f
--- /dev/null
+++ b/src/uni_modules/uni-grid/components/uni-grid-item/uni-grid-item.vue
@@ -0,0 +1,140 @@
+<template>
+	<view
+		:style="'width:' + width + ';' + (square ? 'height:' + width : '')"
+		class="uni-grid-item grid-item"
+	>
+		<view
+			:class="{
+				'uni-grid-item--border': showBorder,
+				'uni-grid-item--border-top': showBorder && index < column,
+				'uni-highlight': highlight
+			}"
+			:style="{
+				'border-right-color': borderColor,
+				'border-bottom-color': borderColor,
+				'border-top-color': borderColor
+			}"
+			class="uni-grid-item__box"
+			@click="_onClick"
+		>
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * GridItem 宫格
+ * @description 宫格组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=27
+ * @property {Number} index 子组件的唯一标识 ，点击gird会返回当前的标识
+ */
+export default {
+	name: 'UniGridItem',
+	inject: ['grid'],
+	props: {
+		index: {
+			type: Number,
+			default: 0
+		}
+	},
+	data() {
+		return {
+			column: 0,
+			showBorder: true,
+			square: true,
+			highlight: true,
+			left: 0,
+			top: 0,
+			openNum: 2,
+			width: 0,
+			borderColor: '#e5e5e5'
+		};
+	},
+	created() {
+		this.column = this.grid.column;
+		this.showBorder = this.grid.showBorder;
+		this.square = this.grid.square;
+		this.highlight = this.grid.highlight;
+		this.top = this.hor === 0 ? this.grid.hor : this.hor;
+		this.left = this.ver === 0 ? this.grid.ver : this.ver;
+		this.borderColor = this.grid.borderColor;
+		this.grid.children.push(this);
+		// this.grid.init()
+		this.width = this.grid.width;
+	},
+	beforeDestroy() {
+		this.grid.children.forEach((item, index) => {
+			if (item === this) {
+				this.grid.children.splice(index, 1);
+			}
+		});
+	},
+	methods: {
+		_onClick() {
+			this.grid.change({
+				detail: {
+					index: this.index
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.uni-grid-item {
+	/* #ifndef APP-NVUE */
+	height: 100%;
+	display: flex;
+	/* #endif */
+	/* #ifdef H5 */
+	cursor: pointer;
+	/* #endif */
+}
+
+.uni-grid-item__box {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	width: 100%;
+	/* #endif */
+	position: relative;
+	flex: 1;
+	flex-direction: column;
+	// justify-content: center;
+	// align-items: center;
+}
+
+.uni-grid-item--border {
+	position: relative;
+	/* #ifdef APP-NVUE */
+	border-bottom-color: #d2d2d2;
+	border-bottom-style: solid;
+	border-bottom-width: 0.5px;
+	border-right-color: #d2d2d2;
+	border-right-style: solid;
+	border-right-width: 0.5px;
+	/* #endif */
+	/* #ifndef APP-NVUE */
+	z-index: 0;
+	border-bottom: 1px #d2d2d2 solid;
+	border-right: 1px #d2d2d2 solid;
+	/* #endif */
+}
+.uni-grid-item--border-top {
+	position: relative;
+	/* #ifdef APP-NVUE */
+	border-top-color: #d2d2d2;
+	border-top-style: solid;
+	border-top-width: 0.5px;
+	/* #endif */
+	/* #ifndef APP-NVUE */
+	border-top: 1px #d2d2d2 solid;
+	z-index: 0;
+	/* #endif */
+}
+
+.uni-highlight:active {
+	background-color: #f1f1f1;
+}
+</style>
diff --git a/src/uni_modules/uni-grid/components/uni-grid/uni-grid.vue b/src/uni_modules/uni-grid/components/uni-grid/uni-grid.vue
new file mode 100644
index 00000000..0edc7ffe
--- /dev/null
+++ b/src/uni_modules/uni-grid/components/uni-grid/uni-grid.vue
@@ -0,0 +1,142 @@
+<template>
+	<view class="uni-grid-wrap">
+		<view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-color':borderColor}">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom');
+	// #endif
+
+	/**
+	 * Grid 宫格
+	 * @description 宫格组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=27
+	 * @property {Number} column 每列显示个数
+	 * @property {String} borderColor 边框颜色
+	 * @property {Boolean} showBorder 是否显示边框
+	 * @property {Boolean} square 是否方形显示
+	 * @property {Boolean} Boolean 点击背景是否高亮
+	 * @event {Function} change 点击 grid 触发，e={detail:{index:0}}，index 为当前点击 gird 下标
+	 */
+	export default {
+		name: 'UniGrid',
+		emits:['change'],
+		props: {
+			// 每列显示个数
+			column: {
+				type: Number,
+				default: 3
+			},
+			// 是否显示边框
+			showBorder: {
+				type: Boolean,
+				default: true
+			},
+			// 边框颜色
+			borderColor: {
+				type: String,
+				default: '#D2D2D2'
+			},
+			// 是否正方形显示,默认为 true
+			square: {
+				type: Boolean,
+				default: true
+			},
+			highlight: {
+				type: Boolean,
+				default: true
+			}
+		},
+		provide() {
+			return {
+				grid: this
+			}
+		},
+		data() {
+			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
+			return {
+				elId,
+				width: 0
+			}
+		},
+		created() {
+			this.children = []
+		},
+		mounted() {
+			this.$nextTick(()=>{
+				this.init()
+			})
+		},
+		methods: {
+			init() {
+				setTimeout(() => {
+					this._getSize((width) => {
+						this.children.forEach((item, index) => {
+							item.width = width
+						})
+					})
+				}, 50)
+			},
+			change(e) {
+				this.$emit('change', e)
+			},
+			_getSize(fn) {
+				// #ifndef APP-NVUE
+				uni.createSelectorQuery()
+					.in(this)
+					.select(`#${this.elId}`)
+					.boundingClientRect()
+					.exec(ret => {
+						this.width = parseInt((ret[0].width - 1) / this.column) + 'px'
+						fn(this.width)
+					})
+				// #endif
+				// #ifdef APP-NVUE
+				dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
+					this.width = parseInt((ret.size.width - 1) / this.column) + 'px'
+					fn(this.width)
+				})
+				// #endif
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-grid-wrap {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: column;
+		/* #ifdef H5 */
+		width: 100%;
+		/* #endif */
+	}
+
+	.uni-grid {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		// flex: 1;
+		flex-direction: row;
+		flex-wrap: wrap;
+	}
+
+	.uni-grid--border {
+		position: relative;
+		/* #ifdef APP-NVUE */
+		border-left-color: #D2D2D2;
+		border-left-style: solid;
+		border-left-width: 0.5px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		z-index: 1;
+		border-left: 1px #D2D2D2 solid;
+		/* #endif */
+	}
+</style>
diff --git a/src/uni_modules/uni-grid/package.json b/src/uni_modules/uni-grid/package.json
new file mode 100644
index 00000000..ccb2c917
--- /dev/null
+++ b/src/uni_modules/uni-grid/package.json
@@ -0,0 +1,86 @@
+{
+  "id": "uni-grid",
+  "displayName": "uni-grid 宫格",
+  "version": "1.4.0",
+  "description": "Grid 宫格组件，提供移动端常见的宫格布局，如九宫格。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "九宫格",
+    "表格"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss","uni-icons"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/src/uni_modules/uni-grid/readme.md b/src/uni_modules/uni-grid/readme.md
new file mode 100644
index 00000000..0aa44cc1
--- /dev/null
+++ b/src/uni_modules/uni-grid/readme.md
@@ -0,0 +1,11 @@
+
+
+## Grid 宫格
+> **组件名：uni-grid**
+> 代码块： `uGrid`
+
+
+宫格组件。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-grid)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-group/changelog.md b/src/uni_modules/uni-group/changelog.md
new file mode 100644
index 00000000..a7024fdf
--- /dev/null
+++ b/src/uni_modules/uni-group/changelog.md
@@ -0,0 +1,16 @@
+## 1.2.2（2022-05-30）
+- 新增 stat属性，是否开启uni统计功能
+## 1.2.1（2021-11-22）
+- 修复 vue3中某些scss变量无法找到的问题
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-group](https://uniapp.dcloud.io/component/uniui/uni-group)
+## 1.1.7（2021-11-08）
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+- 优化 组件文档
+## 1.0.3（2021-05-12）
+- 新增 组件示例地址
+## 1.0.2（2021-02-05）
+- 调整为uni_modules目录规范
+- 优化 兼容 nvue 页面
diff --git a/src/uni_modules/uni-group/components/uni-group/uni-group.vue b/src/uni_modules/uni-group/components/uni-group/uni-group.vue
new file mode 100644
index 00000000..3425ecd3
--- /dev/null
+++ b/src/uni_modules/uni-group/components/uni-group/uni-group.vue
@@ -0,0 +1,134 @@
+<template>
+	<view class="uni-group" :class="['uni-group--'+mode ,margin?'group-margin':'']" :style="{marginTop: `${top}px` }">
+		<slot name="title">
+			<view v-if="title" class="uni-group__title" :style="{'padding-left':border?'30px':'15px'}">
+				<text class="uni-group__title-text">{{ title }}</text>
+			</view>
+		</slot>
+		<view class="uni-group__content" :class="{'group-conent-padding':border}">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Group 分组
+	 * @description 表单字段分组
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3281
+	 * @property {String} title 主标题
+	 * @property {Number} top 分组间隔
+	 * @property {Number} mode 模式
+	 */
+	export default {
+		name: 'uniGroup',
+		emits:['click'],
+		props: {
+			title: {
+				type: String,
+				default: ''
+			},
+			top: {
+				type: [Number, String],
+				default: 10
+			},
+			mode: {
+				type: String,
+				default: 'default'
+			},
+			stat:{
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				margin: false,
+				border: false
+			}
+		},
+		watch: {
+			title(newVal) {
+				if (uni.report && this.stat && newVal !== '') {
+					uni.report('title', newVal)
+				}
+			}
+		},
+		created() {
+			this.form = this.getForm()
+			if (this.form) {
+				this.margin = true
+				this.border = this.form.border
+			}
+		},
+		methods: {
+			/**
+			 * 获取父元素实例
+			 */
+			getForm() {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== 'uniForms') {
+					parent = parent.$parent;
+					if (!parent) return false
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+			onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+<style lang="scss" >
+	.uni-group {
+		background: #fff;
+		margin-top: 10px;
+		// border: 1px red solid;
+	}
+
+	.group-margin {
+		// margin: 0 -15px;
+	}
+
+	.uni-group__title {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		padding-left: 15px;
+		height: 40px;
+		background-color: #eee;
+		font-weight: normal;
+		color: #666;
+	}
+
+	.uni-group__content {
+		padding: 15px;
+		// padding-bottom: 5px;
+		// background-color: #FFF;
+	}
+
+	.group-conent-padding {
+		padding: 0 15px;
+	}
+
+	.uni-group__title-text {
+		font-size: 14px;
+		color: #666;
+	}
+
+	.distraction {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.uni-group--card {
+		margin: 10px;
+		border-radius: 5px;
+		overflow: hidden;
+		box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.08);
+	}
+</style>
diff --git a/src/uni_modules/uni-group/package.json b/src/uni_modules/uni-group/package.json
new file mode 100644
index 00000000..ea00a08c
--- /dev/null
+++ b/src/uni_modules/uni-group/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-group",
+  "displayName": "uni-group 分组",
+  "version": "1.2.2",
+  "description": "分组组件可用于将组件用于分组，添加间隔，以产生明显的区块",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "group",
+    "分组",
+    ""
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-group/readme.md b/src/uni_modules/uni-group/readme.md
new file mode 100644
index 00000000..bae67f46
--- /dev/null
+++ b/src/uni_modules/uni-group/readme.md
@@ -0,0 +1,9 @@
+
+## Group 分组
+> **组件名：uni-group**
+> 代码块： `uGroup`
+
+分组组件可用于将组件分组，添加间隔，以产生明显的区块。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-group)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-icons/changelog.md b/src/uni_modules/uni-icons/changelog.md
new file mode 100644
index 00000000..64498853
--- /dev/null
+++ b/src/uni_modules/uni-icons/changelog.md
@@ -0,0 +1,22 @@
+## 1.3.5（2022-01-24）
+- 优化 size 属性可以传入不带单位的字符串数值
+## 1.3.4（2022-01-24）
+- 优化 size 支持其他单位
+## 1.3.3（2022-01-17）
+- 修复 nvue 有些图标不显示的bug，兼容老版本图标
+## 1.3.2（2021-12-01）
+- 优化 示例可复制图标名称
+## 1.3.1（2021-11-23）
+- 优化 兼容旧组件 type 值
+## 1.3.0（2021-11-19）
+- 新增 更多图标
+- 优化 自定义图标使用方式
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
+## 1.1.7（2021-11-08）
+## 1.2.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.5（2021-05-12）
+- 新增 组件示例地址
+## 1.1.4（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-icons/components/uni-icons/icons.js b/src/uni_modules/uni-icons/components/uni-icons/icons.js
new file mode 100644
index 00000000..78899364
--- /dev/null
+++ b/src/uni_modules/uni-icons/components/uni-icons/icons.js
@@ -0,0 +1,1169 @@
+export default {
+  "id": "2852637",
+  "name": "uniui图标库",
+  "font_family": "uniicons",
+  "css_prefix_text": "uniui-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "25027049",
+      "name": "yanse",
+      "font_class": "color",
+      "unicode": "e6cf",
+      "unicode_decimal": 59087
+    },
+    {
+      "icon_id": "25027048",
+      "name": "wallet",
+      "font_class": "wallet",
+      "unicode": "e6b1",
+      "unicode_decimal": 59057
+    },
+    {
+      "icon_id": "25015720",
+      "name": "settings-filled",
+      "font_class": "settings-filled",
+      "unicode": "e6ce",
+      "unicode_decimal": 59086
+    },
+    {
+      "icon_id": "25015434",
+      "name": "shimingrenzheng-filled",
+      "font_class": "auth-filled",
+      "unicode": "e6cc",
+      "unicode_decimal": 59084
+    },
+    {
+      "icon_id": "24934246",
+      "name": "shop-filled",
+      "font_class": "shop-filled",
+      "unicode": "e6cd",
+      "unicode_decimal": 59085
+    },
+    {
+      "icon_id": "24934159",
+      "name": "staff-filled-01",
+      "font_class": "staff-filled",
+      "unicode": "e6cb",
+      "unicode_decimal": 59083
+    },
+    {
+      "icon_id": "24932461",
+      "name": "VIP-filled",
+      "font_class": "vip-filled",
+      "unicode": "e6c6",
+      "unicode_decimal": 59078
+    },
+    {
+      "icon_id": "24932462",
+      "name": "plus_circle_fill",
+      "font_class": "plus-filled",
+      "unicode": "e6c7",
+      "unicode_decimal": 59079
+    },
+    {
+      "icon_id": "24932463",
+      "name": "folder_add-filled",
+      "font_class": "folder-add-filled",
+      "unicode": "e6c8",
+      "unicode_decimal": 59080
+    },
+    {
+      "icon_id": "24932464",
+      "name": "yanse-filled",
+      "font_class": "color-filled",
+      "unicode": "e6c9",
+      "unicode_decimal": 59081
+    },
+    {
+      "icon_id": "24932465",
+      "name": "tune-filled",
+      "font_class": "tune-filled",
+      "unicode": "e6ca",
+      "unicode_decimal": 59082
+    },
+    {
+      "icon_id": "24932455",
+      "name": "a-rilidaka-filled",
+      "font_class": "calendar-filled",
+      "unicode": "e6c0",
+      "unicode_decimal": 59072
+    },
+    {
+      "icon_id": "24932456",
+      "name": "notification-filled",
+      "font_class": "notification-filled",
+      "unicode": "e6c1",
+      "unicode_decimal": 59073
+    },
+    {
+      "icon_id": "24932457",
+      "name": "wallet-filled",
+      "font_class": "wallet-filled",
+      "unicode": "e6c2",
+      "unicode_decimal": 59074
+    },
+    {
+      "icon_id": "24932458",
+      "name": "paihangbang-filled",
+      "font_class": "medal-filled",
+      "unicode": "e6c3",
+      "unicode_decimal": 59075
+    },
+    {
+      "icon_id": "24932459",
+      "name": "gift-filled",
+      "font_class": "gift-filled",
+      "unicode": "e6c4",
+      "unicode_decimal": 59076
+    },
+    {
+      "icon_id": "24932460",
+      "name": "fire-filled",
+      "font_class": "fire-filled",
+      "unicode": "e6c5",
+      "unicode_decimal": 59077
+    },
+    {
+      "icon_id": "24928001",
+      "name": "refreshempty",
+      "font_class": "refreshempty",
+      "unicode": "e6bf",
+      "unicode_decimal": 59071
+    },
+    {
+      "icon_id": "24926853",
+      "name": "location-ellipse",
+      "font_class": "location-filled",
+      "unicode": "e6af",
+      "unicode_decimal": 59055
+    },
+    {
+      "icon_id": "24926735",
+      "name": "person-filled",
+      "font_class": "person-filled",
+      "unicode": "e69d",
+      "unicode_decimal": 59037
+    },
+    {
+      "icon_id": "24926703",
+      "name": "personadd-filled",
+      "font_class": "personadd-filled",
+      "unicode": "e698",
+      "unicode_decimal": 59032
+    },
+    {
+      "icon_id": "24923351",
+      "name": "back",
+      "font_class": "back",
+      "unicode": "e6b9",
+      "unicode_decimal": 59065
+    },
+    {
+      "icon_id": "24923352",
+      "name": "forward",
+      "font_class": "forward",
+      "unicode": "e6ba",
+      "unicode_decimal": 59066
+    },
+    {
+      "icon_id": "24923353",
+      "name": "arrowthinright",
+      "font_class": "arrow-right",
+      "unicode": "e6bb",
+      "unicode_decimal": 59067
+    },
+		{
+		  "icon_id": "24923353",
+		  "name": "arrowthinright",
+		  "font_class": "arrowthinright",
+		  "unicode": "e6bb",
+		  "unicode_decimal": 59067
+		},
+    {
+      "icon_id": "24923354",
+      "name": "arrowthinleft",
+      "font_class": "arrow-left",
+      "unicode": "e6bc",
+      "unicode_decimal": 59068
+    },
+		{
+		  "icon_id": "24923354",
+		  "name": "arrowthinleft",
+		  "font_class": "arrowthinleft",
+		  "unicode": "e6bc",
+		  "unicode_decimal": 59068
+		},
+    {
+      "icon_id": "24923355",
+      "name": "arrowthinup",
+      "font_class": "arrow-up",
+      "unicode": "e6bd",
+      "unicode_decimal": 59069
+    },
+		{
+		  "icon_id": "24923355",
+		  "name": "arrowthinup",
+		  "font_class": "arrowthinup",
+		  "unicode": "e6bd",
+		  "unicode_decimal": 59069
+		},
+    {
+      "icon_id": "24923356",
+      "name": "arrowthindown",
+      "font_class": "arrow-down",
+      "unicode": "e6be",
+      "unicode_decimal": 59070
+    },{
+      "icon_id": "24923356",
+      "name": "arrowthindown",
+      "font_class": "arrowthindown",
+      "unicode": "e6be",
+      "unicode_decimal": 59070
+    },
+    {
+      "icon_id": "24923349",
+      "name": "arrowdown",
+      "font_class": "bottom",
+      "unicode": "e6b8",
+      "unicode_decimal": 59064
+    },{
+      "icon_id": "24923349",
+      "name": "arrowdown",
+      "font_class": "arrowdown",
+      "unicode": "e6b8",
+      "unicode_decimal": 59064
+    },
+    {
+      "icon_id": "24923346",
+      "name": "arrowright",
+      "font_class": "right",
+      "unicode": "e6b5",
+      "unicode_decimal": 59061
+    },
+		{
+		  "icon_id": "24923346",
+		  "name": "arrowright",
+		  "font_class": "arrowright",
+		  "unicode": "e6b5",
+		  "unicode_decimal": 59061
+		},
+    {
+      "icon_id": "24923347",
+      "name": "arrowup",
+      "font_class": "top",
+      "unicode": "e6b6",
+      "unicode_decimal": 59062
+    },
+		{
+		  "icon_id": "24923347",
+		  "name": "arrowup",
+		  "font_class": "arrowup",
+		  "unicode": "e6b6",
+		  "unicode_decimal": 59062
+		},
+    {
+      "icon_id": "24923348",
+      "name": "arrowleft",
+      "font_class": "left",
+      "unicode": "e6b7",
+      "unicode_decimal": 59063
+    },
+		{
+		  "icon_id": "24923348",
+		  "name": "arrowleft",
+		  "font_class": "arrowleft",
+		  "unicode": "e6b7",
+		  "unicode_decimal": 59063
+		},
+    {
+      "icon_id": "24923334",
+      "name": "eye",
+      "font_class": "eye",
+      "unicode": "e651",
+      "unicode_decimal": 58961
+    },
+    {
+      "icon_id": "24923335",
+      "name": "eye-filled",
+      "font_class": "eye-filled",
+      "unicode": "e66a",
+      "unicode_decimal": 58986
+    },
+    {
+      "icon_id": "24923336",
+      "name": "eye-slash",
+      "font_class": "eye-slash",
+      "unicode": "e6b3",
+      "unicode_decimal": 59059
+    },
+    {
+      "icon_id": "24923337",
+      "name": "eye-slash-filled",
+      "font_class": "eye-slash-filled",
+      "unicode": "e6b4",
+      "unicode_decimal": 59060
+    },
+    {
+      "icon_id": "24923305",
+      "name": "info-filled",
+      "font_class": "info-filled",
+      "unicode": "e649",
+      "unicode_decimal": 58953
+    },
+    {
+      "icon_id": "24923299",
+      "name": "reload-01",
+      "font_class": "reload",
+      "unicode": "e6b2",
+      "unicode_decimal": 59058
+    },
+    {
+      "icon_id": "24923195",
+      "name": "mic_slash_fill",
+      "font_class": "micoff-filled",
+      "unicode": "e6b0",
+      "unicode_decimal": 59056
+    },
+    {
+      "icon_id": "24923165",
+      "name": "map-pin-ellipse",
+      "font_class": "map-pin-ellipse",
+      "unicode": "e6ac",
+      "unicode_decimal": 59052
+    },
+    {
+      "icon_id": "24923166",
+      "name": "map-pin",
+      "font_class": "map-pin",
+      "unicode": "e6ad",
+      "unicode_decimal": 59053
+    },
+    {
+      "icon_id": "24923167",
+      "name": "location",
+      "font_class": "location",
+      "unicode": "e6ae",
+      "unicode_decimal": 59054
+    },
+    {
+      "icon_id": "24923064",
+      "name": "starhalf",
+      "font_class": "starhalf",
+      "unicode": "e683",
+      "unicode_decimal": 59011
+    },
+    {
+      "icon_id": "24923065",
+      "name": "star",
+      "font_class": "star",
+      "unicode": "e688",
+      "unicode_decimal": 59016
+    },
+    {
+      "icon_id": "24923066",
+      "name": "star-filled",
+      "font_class": "star-filled",
+      "unicode": "e68f",
+      "unicode_decimal": 59023
+    },
+    {
+      "icon_id": "24899646",
+      "name": "a-rilidaka",
+      "font_class": "calendar",
+      "unicode": "e6a0",
+      "unicode_decimal": 59040
+    },
+    {
+      "icon_id": "24899647",
+      "name": "fire",
+      "font_class": "fire",
+      "unicode": "e6a1",
+      "unicode_decimal": 59041
+    },
+    {
+      "icon_id": "24899648",
+      "name": "paihangbang",
+      "font_class": "medal",
+      "unicode": "e6a2",
+      "unicode_decimal": 59042
+    },
+    {
+      "icon_id": "24899649",
+      "name": "font",
+      "font_class": "font",
+      "unicode": "e6a3",
+      "unicode_decimal": 59043
+    },
+    {
+      "icon_id": "24899650",
+      "name": "gift",
+      "font_class": "gift",
+      "unicode": "e6a4",
+      "unicode_decimal": 59044
+    },
+    {
+      "icon_id": "24899651",
+      "name": "link",
+      "font_class": "link",
+      "unicode": "e6a5",
+      "unicode_decimal": 59045
+    },
+    {
+      "icon_id": "24899652",
+      "name": "notification",
+      "font_class": "notification",
+      "unicode": "e6a6",
+      "unicode_decimal": 59046
+    },
+    {
+      "icon_id": "24899653",
+      "name": "staff",
+      "font_class": "staff",
+      "unicode": "e6a7",
+      "unicode_decimal": 59047
+    },
+    {
+      "icon_id": "24899654",
+      "name": "VIP",
+      "font_class": "vip",
+      "unicode": "e6a8",
+      "unicode_decimal": 59048
+    },
+    {
+      "icon_id": "24899655",
+      "name": "folder_add",
+      "font_class": "folder-add",
+      "unicode": "e6a9",
+      "unicode_decimal": 59049
+    },
+    {
+      "icon_id": "24899656",
+      "name": "tune",
+      "font_class": "tune",
+      "unicode": "e6aa",
+      "unicode_decimal": 59050
+    },
+    {
+      "icon_id": "24899657",
+      "name": "shimingrenzheng",
+      "font_class": "auth",
+      "unicode": "e6ab",
+      "unicode_decimal": 59051
+    },
+    {
+      "icon_id": "24899565",
+      "name": "person",
+      "font_class": "person",
+      "unicode": "e699",
+      "unicode_decimal": 59033
+    },
+    {
+      "icon_id": "24899566",
+      "name": "email-filled",
+      "font_class": "email-filled",
+      "unicode": "e69a",
+      "unicode_decimal": 59034
+    },
+    {
+      "icon_id": "24899567",
+      "name": "phone-filled",
+      "font_class": "phone-filled",
+      "unicode": "e69b",
+      "unicode_decimal": 59035
+    },
+    {
+      "icon_id": "24899568",
+      "name": "phone",
+      "font_class": "phone",
+      "unicode": "e69c",
+      "unicode_decimal": 59036
+    },
+    {
+      "icon_id": "24899570",
+      "name": "email",
+      "font_class": "email",
+      "unicode": "e69e",
+      "unicode_decimal": 59038
+    },
+    {
+      "icon_id": "24899571",
+      "name": "personadd",
+      "font_class": "personadd",
+      "unicode": "e69f",
+      "unicode_decimal": 59039
+    },
+    {
+      "icon_id": "24899558",
+      "name": "chatboxes-filled",
+      "font_class": "chatboxes-filled",
+      "unicode": "e692",
+      "unicode_decimal": 59026
+    },
+    {
+      "icon_id": "24899559",
+      "name": "contact",
+      "font_class": "contact",
+      "unicode": "e693",
+      "unicode_decimal": 59027
+    },
+    {
+      "icon_id": "24899560",
+      "name": "chatbubble-filled",
+      "font_class": "chatbubble-filled",
+      "unicode": "e694",
+      "unicode_decimal": 59028
+    },
+    {
+      "icon_id": "24899561",
+      "name": "contact-filled",
+      "font_class": "contact-filled",
+      "unicode": "e695",
+      "unicode_decimal": 59029
+    },
+    {
+      "icon_id": "24899562",
+      "name": "chatboxes",
+      "font_class": "chatboxes",
+      "unicode": "e696",
+      "unicode_decimal": 59030
+    },
+    {
+      "icon_id": "24899563",
+      "name": "chatbubble",
+      "font_class": "chatbubble",
+      "unicode": "e697",
+      "unicode_decimal": 59031
+    },
+    {
+      "icon_id": "24881290",
+      "name": "upload-filled",
+      "font_class": "upload-filled",
+      "unicode": "e68e",
+      "unicode_decimal": 59022
+    },
+    {
+      "icon_id": "24881292",
+      "name": "upload",
+      "font_class": "upload",
+      "unicode": "e690",
+      "unicode_decimal": 59024
+    },
+    {
+      "icon_id": "24881293",
+      "name": "weixin",
+      "font_class": "weixin",
+      "unicode": "e691",
+      "unicode_decimal": 59025
+    },
+    {
+      "icon_id": "24881274",
+      "name": "compose",
+      "font_class": "compose",
+      "unicode": "e67f",
+      "unicode_decimal": 59007
+    },
+    {
+      "icon_id": "24881275",
+      "name": "qq",
+      "font_class": "qq",
+      "unicode": "e680",
+      "unicode_decimal": 59008
+    },
+    {
+      "icon_id": "24881276",
+      "name": "download-filled",
+      "font_class": "download-filled",
+      "unicode": "e681",
+      "unicode_decimal": 59009
+    },
+    {
+      "icon_id": "24881277",
+      "name": "pengyouquan",
+      "font_class": "pyq",
+      "unicode": "e682",
+      "unicode_decimal": 59010
+    },
+    {
+      "icon_id": "24881279",
+      "name": "sound",
+      "font_class": "sound",
+      "unicode": "e684",
+      "unicode_decimal": 59012
+    },
+    {
+      "icon_id": "24881280",
+      "name": "trash-filled",
+      "font_class": "trash-filled",
+      "unicode": "e685",
+      "unicode_decimal": 59013
+    },
+    {
+      "icon_id": "24881281",
+      "name": "sound-filled",
+      "font_class": "sound-filled",
+      "unicode": "e686",
+      "unicode_decimal": 59014
+    },
+    {
+      "icon_id": "24881282",
+      "name": "trash",
+      "font_class": "trash",
+      "unicode": "e687",
+      "unicode_decimal": 59015
+    },
+    {
+      "icon_id": "24881284",
+      "name": "videocam-filled",
+      "font_class": "videocam-filled",
+      "unicode": "e689",
+      "unicode_decimal": 59017
+    },
+    {
+      "icon_id": "24881285",
+      "name": "spinner-cycle",
+      "font_class": "spinner-cycle",
+      "unicode": "e68a",
+      "unicode_decimal": 59018
+    },
+    {
+      "icon_id": "24881286",
+      "name": "weibo",
+      "font_class": "weibo",
+      "unicode": "e68b",
+      "unicode_decimal": 59019
+    },
+    {
+      "icon_id": "24881288",
+      "name": "videocam",
+      "font_class": "videocam",
+      "unicode": "e68c",
+      "unicode_decimal": 59020
+    },
+    {
+      "icon_id": "24881289",
+      "name": "download",
+      "font_class": "download",
+      "unicode": "e68d",
+      "unicode_decimal": 59021
+    },
+    {
+      "icon_id": "24879601",
+      "name": "help",
+      "font_class": "help",
+      "unicode": "e679",
+      "unicode_decimal": 59001
+    },
+    {
+      "icon_id": "24879602",
+      "name": "navigate-filled",
+      "font_class": "navigate-filled",
+      "unicode": "e67a",
+      "unicode_decimal": 59002
+    },
+    {
+      "icon_id": "24879603",
+      "name": "plusempty",
+      "font_class": "plusempty",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "24879604",
+      "name": "smallcircle",
+      "font_class": "smallcircle",
+      "unicode": "e67c",
+      "unicode_decimal": 59004
+    },
+    {
+      "icon_id": "24879605",
+      "name": "minus-filled",
+      "font_class": "minus-filled",
+      "unicode": "e67d",
+      "unicode_decimal": 59005
+    },
+    {
+      "icon_id": "24879606",
+      "name": "micoff",
+      "font_class": "micoff",
+      "unicode": "e67e",
+      "unicode_decimal": 59006
+    },
+    {
+      "icon_id": "24879588",
+      "name": "closeempty",
+      "font_class": "closeempty",
+      "unicode": "e66c",
+      "unicode_decimal": 58988
+    },
+    {
+      "icon_id": "24879589",
+      "name": "clear",
+      "font_class": "clear",
+      "unicode": "e66d",
+      "unicode_decimal": 58989
+    },
+    {
+      "icon_id": "24879590",
+      "name": "navigate",
+      "font_class": "navigate",
+      "unicode": "e66e",
+      "unicode_decimal": 58990
+    },
+    {
+      "icon_id": "24879591",
+      "name": "minus",
+      "font_class": "minus",
+      "unicode": "e66f",
+      "unicode_decimal": 58991
+    },
+    {
+      "icon_id": "24879592",
+      "name": "image",
+      "font_class": "image",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "24879593",
+      "name": "mic",
+      "font_class": "mic",
+      "unicode": "e671",
+      "unicode_decimal": 58993
+    },
+    {
+      "icon_id": "24879594",
+      "name": "paperplane",
+      "font_class": "paperplane",
+      "unicode": "e672",
+      "unicode_decimal": 58994
+    },
+    {
+      "icon_id": "24879595",
+      "name": "close",
+      "font_class": "close",
+      "unicode": "e673",
+      "unicode_decimal": 58995
+    },
+    {
+      "icon_id": "24879596",
+      "name": "help-filled",
+      "font_class": "help-filled",
+      "unicode": "e674",
+      "unicode_decimal": 58996
+    },
+    {
+      "icon_id": "24879597",
+      "name": "plus-filled",
+      "font_class": "paperplane-filled",
+      "unicode": "e675",
+      "unicode_decimal": 58997
+    },
+    {
+      "icon_id": "24879598",
+      "name": "plus",
+      "font_class": "plus",
+      "unicode": "e676",
+      "unicode_decimal": 58998
+    },
+    {
+      "icon_id": "24879599",
+      "name": "mic-filled",
+      "font_class": "mic-filled",
+      "unicode": "e677",
+      "unicode_decimal": 58999
+    },
+    {
+      "icon_id": "24879600",
+      "name": "image-filled",
+      "font_class": "image-filled",
+      "unicode": "e678",
+      "unicode_decimal": 59000
+    },
+    {
+      "icon_id": "24855900",
+      "name": "locked-filled",
+      "font_class": "locked-filled",
+      "unicode": "e668",
+      "unicode_decimal": 58984
+    },
+    {
+      "icon_id": "24855901",
+      "name": "info",
+      "font_class": "info",
+      "unicode": "e669",
+      "unicode_decimal": 58985
+    },
+    {
+      "icon_id": "24855903",
+      "name": "locked",
+      "font_class": "locked",
+      "unicode": "e66b",
+      "unicode_decimal": 58987
+    },
+    {
+      "icon_id": "24855884",
+      "name": "camera-filled",
+      "font_class": "camera-filled",
+      "unicode": "e658",
+      "unicode_decimal": 58968
+    },
+    {
+      "icon_id": "24855885",
+      "name": "chat-filled",
+      "font_class": "chat-filled",
+      "unicode": "e659",
+      "unicode_decimal": 58969
+    },
+    {
+      "icon_id": "24855886",
+      "name": "camera",
+      "font_class": "camera",
+      "unicode": "e65a",
+      "unicode_decimal": 58970
+    },
+    {
+      "icon_id": "24855887",
+      "name": "circle",
+      "font_class": "circle",
+      "unicode": "e65b",
+      "unicode_decimal": 58971
+    },
+    {
+      "icon_id": "24855888",
+      "name": "checkmarkempty",
+      "font_class": "checkmarkempty",
+      "unicode": "e65c",
+      "unicode_decimal": 58972
+    },
+    {
+      "icon_id": "24855889",
+      "name": "chat",
+      "font_class": "chat",
+      "unicode": "e65d",
+      "unicode_decimal": 58973
+    },
+    {
+      "icon_id": "24855890",
+      "name": "circle-filled",
+      "font_class": "circle-filled",
+      "unicode": "e65e",
+      "unicode_decimal": 58974
+    },
+    {
+      "icon_id": "24855891",
+      "name": "flag",
+      "font_class": "flag",
+      "unicode": "e65f",
+      "unicode_decimal": 58975
+    },
+    {
+      "icon_id": "24855892",
+      "name": "flag-filled",
+      "font_class": "flag-filled",
+      "unicode": "e660",
+      "unicode_decimal": 58976
+    },
+    {
+      "icon_id": "24855893",
+      "name": "gear-filled",
+      "font_class": "gear-filled",
+      "unicode": "e661",
+      "unicode_decimal": 58977
+    },
+    {
+      "icon_id": "24855894",
+      "name": "home",
+      "font_class": "home",
+      "unicode": "e662",
+      "unicode_decimal": 58978
+    },
+    {
+      "icon_id": "24855895",
+      "name": "home-filled",
+      "font_class": "home-filled",
+      "unicode": "e663",
+      "unicode_decimal": 58979
+    },
+    {
+      "icon_id": "24855896",
+      "name": "gear",
+      "font_class": "gear",
+      "unicode": "e664",
+      "unicode_decimal": 58980
+    },
+    {
+      "icon_id": "24855897",
+      "name": "smallcircle-filled",
+      "font_class": "smallcircle-filled",
+      "unicode": "e665",
+      "unicode_decimal": 58981
+    },
+    {
+      "icon_id": "24855898",
+      "name": "map-filled",
+      "font_class": "map-filled",
+      "unicode": "e666",
+      "unicode_decimal": 58982
+    },
+    {
+      "icon_id": "24855899",
+      "name": "map",
+      "font_class": "map",
+      "unicode": "e667",
+      "unicode_decimal": 58983
+    },
+    {
+      "icon_id": "24855825",
+      "name": "refresh-filled",
+      "font_class": "refresh-filled",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "24855826",
+      "name": "refresh",
+      "font_class": "refresh",
+      "unicode": "e657",
+      "unicode_decimal": 58967
+    },
+    {
+      "icon_id": "24855808",
+      "name": "cloud-upload",
+      "font_class": "cloud-upload",
+      "unicode": "e645",
+      "unicode_decimal": 58949
+    },
+    {
+      "icon_id": "24855809",
+      "name": "cloud-download-filled",
+      "font_class": "cloud-download-filled",
+      "unicode": "e646",
+      "unicode_decimal": 58950
+    },
+    {
+      "icon_id": "24855810",
+      "name": "cloud-download",
+      "font_class": "cloud-download",
+      "unicode": "e647",
+      "unicode_decimal": 58951
+    },
+    {
+      "icon_id": "24855811",
+      "name": "cloud-upload-filled",
+      "font_class": "cloud-upload-filled",
+      "unicode": "e648",
+      "unicode_decimal": 58952
+    },
+    {
+      "icon_id": "24855813",
+      "name": "redo",
+      "font_class": "redo",
+      "unicode": "e64a",
+      "unicode_decimal": 58954
+    },
+    {
+      "icon_id": "24855814",
+      "name": "images-filled",
+      "font_class": "images-filled",
+      "unicode": "e64b",
+      "unicode_decimal": 58955
+    },
+    {
+      "icon_id": "24855815",
+      "name": "undo-filled",
+      "font_class": "undo-filled",
+      "unicode": "e64c",
+      "unicode_decimal": 58956
+    },
+    {
+      "icon_id": "24855816",
+      "name": "more",
+      "font_class": "more",
+      "unicode": "e64d",
+      "unicode_decimal": 58957
+    },
+    {
+      "icon_id": "24855817",
+      "name": "more-filled",
+      "font_class": "more-filled",
+      "unicode": "e64e",
+      "unicode_decimal": 58958
+    },
+    {
+      "icon_id": "24855818",
+      "name": "undo",
+      "font_class": "undo",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "24855819",
+      "name": "images",
+      "font_class": "images",
+      "unicode": "e650",
+      "unicode_decimal": 58960
+    },
+    {
+      "icon_id": "24855821",
+      "name": "paperclip",
+      "font_class": "paperclip",
+      "unicode": "e652",
+      "unicode_decimal": 58962
+    },
+    {
+      "icon_id": "24855822",
+      "name": "settings",
+      "font_class": "settings",
+      "unicode": "e653",
+      "unicode_decimal": 58963
+    },
+    {
+      "icon_id": "24855823",
+      "name": "search",
+      "font_class": "search",
+      "unicode": "e654",
+      "unicode_decimal": 58964
+    },
+    {
+      "icon_id": "24855824",
+      "name": "redo-filled",
+      "font_class": "redo-filled",
+      "unicode": "e655",
+      "unicode_decimal": 58965
+    },
+    {
+      "icon_id": "24841702",
+      "name": "list",
+      "font_class": "list",
+      "unicode": "e644",
+      "unicode_decimal": 58948
+    },
+    {
+      "icon_id": "24841489",
+      "name": "mail-open-filled",
+      "font_class": "mail-open-filled",
+      "unicode": "e63a",
+      "unicode_decimal": 58938
+    },
+    {
+      "icon_id": "24841491",
+      "name": "hand-thumbsdown-filled",
+      "font_class": "hand-down-filled",
+      "unicode": "e63c",
+      "unicode_decimal": 58940
+    },
+    {
+      "icon_id": "24841492",
+      "name": "hand-thumbsdown",
+      "font_class": "hand-down",
+      "unicode": "e63d",
+      "unicode_decimal": 58941
+    },
+    {
+      "icon_id": "24841493",
+      "name": "hand-thumbsup-filled",
+      "font_class": "hand-up-filled",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
+    {
+      "icon_id": "24841494",
+      "name": "hand-thumbsup",
+      "font_class": "hand-up",
+      "unicode": "e63f",
+      "unicode_decimal": 58943
+    },
+    {
+      "icon_id": "24841496",
+      "name": "heart-filled",
+      "font_class": "heart-filled",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
+    {
+      "icon_id": "24841498",
+      "name": "mail-open",
+      "font_class": "mail-open",
+      "unicode": "e643",
+      "unicode_decimal": 58947
+    },
+    {
+      "icon_id": "24841488",
+      "name": "heart",
+      "font_class": "heart",
+      "unicode": "e639",
+      "unicode_decimal": 58937
+    },
+    {
+      "icon_id": "24839963",
+      "name": "loop",
+      "font_class": "loop",
+      "unicode": "e633",
+      "unicode_decimal": 58931
+    },
+    {
+      "icon_id": "24839866",
+      "name": "pulldown",
+      "font_class": "pulldown",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    },
+    {
+      "icon_id": "24813798",
+      "name": "scan",
+      "font_class": "scan",
+      "unicode": "e62a",
+      "unicode_decimal": 58922
+    },
+    {
+      "icon_id": "24813786",
+      "name": "bars",
+      "font_class": "bars",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "24813788",
+      "name": "cart-filled",
+      "font_class": "cart-filled",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "24813790",
+      "name": "checkbox",
+      "font_class": "checkbox",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    },
+    {
+      "icon_id": "24813791",
+      "name": "checkbox-filled",
+      "font_class": "checkbox-filled",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "24813794",
+      "name": "shop",
+      "font_class": "shop",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "24813795",
+      "name": "headphones",
+      "font_class": "headphones",
+      "unicode": "e630",
+      "unicode_decimal": 58928
+    },
+    {
+      "icon_id": "24813796",
+      "name": "cart",
+      "font_class": "cart",
+      "unicode": "e631",
+      "unicode_decimal": 58929
+    }
+  ]
+}
diff --git a/src/uni_modules/uni-icons/components/uni-icons/uni-icons.vue b/src/uni_modules/uni-icons/components/uni-icons/uni-icons.vue
new file mode 100644
index 00000000..86e74445
--- /dev/null
+++ b/src/uni_modules/uni-icons/components/uni-icons/uni-icons.vue
@@ -0,0 +1,96 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
+	<!-- #endif -->
+	<!-- #ifndef APP-NVUE -->
+	<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
+	<!-- #endif -->
+</template>
+
+<script>
+	import icons from './icons.js';
+	const getVal = (val) => {
+		const reg = /^[0-9]*$/g
+		return (typeof val === 'number' ||　reg.test(val) )? val + 'px' : val;
+	} 
+	// #ifdef APP-NVUE
+	var domModule = weex.requireModule('dom');
+	import iconUrl from './uniicons.ttf'
+	domModule.addRule('fontFace', {
+		'fontFamily': "uniicons",
+		'src': "url('"+iconUrl+"')"
+	});
+	// #endif
+
+	/**
+	 * Icons 图标
+	 * @description 用于展示 icons 图标
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=28
+	 * @property {Number} size 图标大小
+	 * @property {String} type 图标图案，参考示例
+	 * @property {String} color 图标颜色
+	 * @property {String} customPrefix 自定义图标
+	 * @event {Function} click 点击 Icon 触发事件
+	 */
+	export default {
+		name: 'UniIcons',
+		emits:['click'],
+		props: {
+			type: {
+				type: String,
+				default: ''
+			},
+			color: {
+				type: String,
+				default: '#333333'
+			},
+			size: {
+				type: [Number, String],
+				default: 16
+			},
+			customPrefix:{
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				icons: icons.glyphs
+			}
+		},
+		computed:{
+			unicode(){
+				let code = this.icons.find(v=>v.font_class === this.type)
+				if(code){
+					return unescape(`%u${code.unicode}`)
+				}
+				return ''
+			},
+			iconSize(){
+				return getVal(this.size)
+			}
+		},
+		methods: {
+			_onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	/* #ifndef APP-NVUE */
+	@import './uniicons.css';
+	@font-face {
+		font-family: uniicons;
+		src: url('./uniicons.ttf') format('truetype');
+	}
+
+	/* #endif */
+	.uni-icons {
+		font-family: uniicons;
+		text-decoration: none;
+		text-align: center;
+	}
+
+</style>
diff --git a/src/uni_modules/uni-icons/components/uni-icons/uni.ttf b/src/uni_modules/uni-icons/components/uni-icons/uni.ttf
new file mode 100644
index 00000000..60a1968d
Binary files /dev/null and b/src/uni_modules/uni-icons/components/uni-icons/uni.ttf differ
diff --git a/src/uni_modules/uni-icons/components/uni-icons/uniicons.css b/src/uni_modules/uni-icons/components/uni-icons/uniicons.css
new file mode 100644
index 00000000..2f56eabd
--- /dev/null
+++ b/src/uni_modules/uni-icons/components/uni-icons/uniicons.css
@@ -0,0 +1,663 @@
+.uniui-color:before {
+  content: "\e6cf";
+}
+
+.uniui-wallet:before {
+  content: "\e6b1";
+}
+
+.uniui-settings-filled:before {
+  content: "\e6ce";
+}
+
+.uniui-auth-filled:before {
+  content: "\e6cc";
+}
+
+.uniui-shop-filled:before {
+  content: "\e6cd";
+}
+
+.uniui-staff-filled:before {
+  content: "\e6cb";
+}
+
+.uniui-vip-filled:before {
+  content: "\e6c6";
+}
+
+.uniui-plus-filled:before {
+  content: "\e6c7";
+}
+
+.uniui-folder-add-filled:before {
+  content: "\e6c8";
+}
+
+.uniui-color-filled:before {
+  content: "\e6c9";
+}
+
+.uniui-tune-filled:before {
+  content: "\e6ca";
+}
+
+.uniui-calendar-filled:before {
+  content: "\e6c0";
+}
+
+.uniui-notification-filled:before {
+  content: "\e6c1";
+}
+
+.uniui-wallet-filled:before {
+  content: "\e6c2";
+}
+
+.uniui-medal-filled:before {
+  content: "\e6c3";
+}
+
+.uniui-gift-filled:before {
+  content: "\e6c4";
+}
+
+.uniui-fire-filled:before {
+  content: "\e6c5";
+}
+
+.uniui-refreshempty:before {
+  content: "\e6bf";
+}
+
+.uniui-location-filled:before {
+  content: "\e6af";
+}
+
+.uniui-person-filled:before {
+  content: "\e69d";
+}
+
+.uniui-personadd-filled:before {
+  content: "\e698";
+}
+
+.uniui-back:before {
+  content: "\e6b9";
+}
+
+.uniui-forward:before {
+  content: "\e6ba";
+}
+
+.uniui-arrow-right:before {
+  content: "\e6bb";
+}
+
+.uniui-arrowthinright:before {
+  content: "\e6bb";
+}
+
+.uniui-arrow-left:before {
+  content: "\e6bc";
+}
+
+.uniui-arrowthinleft:before {
+  content: "\e6bc";
+}
+
+.uniui-arrow-up:before {
+  content: "\e6bd";
+}
+
+.uniui-arrowthinup:before {
+  content: "\e6bd";
+}
+
+.uniui-arrow-down:before {
+  content: "\e6be";
+}
+
+.uniui-arrowthindown:before {
+  content: "\e6be";
+}
+
+.uniui-bottom:before {
+  content: "\e6b8";
+}
+
+.uniui-arrowdown:before {
+  content: "\e6b8";
+}
+
+.uniui-right:before {
+  content: "\e6b5";
+}
+
+.uniui-arrowright:before {
+  content: "\e6b5";
+}
+
+.uniui-top:before {
+  content: "\e6b6";
+}
+
+.uniui-arrowup:before {
+  content: "\e6b6";
+}
+
+.uniui-left:before {
+  content: "\e6b7";
+}
+
+.uniui-arrowleft:before {
+  content: "\e6b7";
+}
+
+.uniui-eye:before {
+  content: "\e651";
+}
+
+.uniui-eye-filled:before {
+  content: "\e66a";
+}
+
+.uniui-eye-slash:before {
+  content: "\e6b3";
+}
+
+.uniui-eye-slash-filled:before {
+  content: "\e6b4";
+}
+
+.uniui-info-filled:before {
+  content: "\e649";
+}
+
+.uniui-reload:before {
+  content: "\e6b2";
+}
+
+.uniui-micoff-filled:before {
+  content: "\e6b0";
+}
+
+.uniui-map-pin-ellipse:before {
+  content: "\e6ac";
+}
+
+.uniui-map-pin:before {
+  content: "\e6ad";
+}
+
+.uniui-location:before {
+  content: "\e6ae";
+}
+
+.uniui-starhalf:before {
+  content: "\e683";
+}
+
+.uniui-star:before {
+  content: "\e688";
+}
+
+.uniui-star-filled:before {
+  content: "\e68f";
+}
+
+.uniui-calendar:before {
+  content: "\e6a0";
+}
+
+.uniui-fire:before {
+  content: "\e6a1";
+}
+
+.uniui-medal:before {
+  content: "\e6a2";
+}
+
+.uniui-font:before {
+  content: "\e6a3";
+}
+
+.uniui-gift:before {
+  content: "\e6a4";
+}
+
+.uniui-link:before {
+  content: "\e6a5";
+}
+
+.uniui-notification:before {
+  content: "\e6a6";
+}
+
+.uniui-staff:before {
+  content: "\e6a7";
+}
+
+.uniui-vip:before {
+  content: "\e6a8";
+}
+
+.uniui-folder-add:before {
+  content: "\e6a9";
+}
+
+.uniui-tune:before {
+  content: "\e6aa";
+}
+
+.uniui-auth:before {
+  content: "\e6ab";
+}
+
+.uniui-person:before {
+  content: "\e699";
+}
+
+.uniui-email-filled:before {
+  content: "\e69a";
+}
+
+.uniui-phone-filled:before {
+  content: "\e69b";
+}
+
+.uniui-phone:before {
+  content: "\e69c";
+}
+
+.uniui-email:before {
+  content: "\e69e";
+}
+
+.uniui-personadd:before {
+  content: "\e69f";
+}
+
+.uniui-chatboxes-filled:before {
+  content: "\e692";
+}
+
+.uniui-contact:before {
+  content: "\e693";
+}
+
+.uniui-chatbubble-filled:before {
+  content: "\e694";
+}
+
+.uniui-contact-filled:before {
+  content: "\e695";
+}
+
+.uniui-chatboxes:before {
+  content: "\e696";
+}
+
+.uniui-chatbubble:before {
+  content: "\e697";
+}
+
+.uniui-upload-filled:before {
+  content: "\e68e";
+}
+
+.uniui-upload:before {
+  content: "\e690";
+}
+
+.uniui-weixin:before {
+  content: "\e691";
+}
+
+.uniui-compose:before {
+  content: "\e67f";
+}
+
+.uniui-qq:before {
+  content: "\e680";
+}
+
+.uniui-download-filled:before {
+  content: "\e681";
+}
+
+.uniui-pyq:before {
+  content: "\e682";
+}
+
+.uniui-sound:before {
+  content: "\e684";
+}
+
+.uniui-trash-filled:before {
+  content: "\e685";
+}
+
+.uniui-sound-filled:before {
+  content: "\e686";
+}
+
+.uniui-trash:before {
+  content: "\e687";
+}
+
+.uniui-videocam-filled:before {
+  content: "\e689";
+}
+
+.uniui-spinner-cycle:before {
+  content: "\e68a";
+}
+
+.uniui-weibo:before {
+  content: "\e68b";
+}
+
+.uniui-videocam:before {
+  content: "\e68c";
+}
+
+.uniui-download:before {
+  content: "\e68d";
+}
+
+.uniui-help:before {
+  content: "\e679";
+}
+
+.uniui-navigate-filled:before {
+  content: "\e67a";
+}
+
+.uniui-plusempty:before {
+  content: "\e67b";
+}
+
+.uniui-smallcircle:before {
+  content: "\e67c";
+}
+
+.uniui-minus-filled:before {
+  content: "\e67d";
+}
+
+.uniui-micoff:before {
+  content: "\e67e";
+}
+
+.uniui-closeempty:before {
+  content: "\e66c";
+}
+
+.uniui-clear:before {
+  content: "\e66d";
+}
+
+.uniui-navigate:before {
+  content: "\e66e";
+}
+
+.uniui-minus:before {
+  content: "\e66f";
+}
+
+.uniui-image:before {
+  content: "\e670";
+}
+
+.uniui-mic:before {
+  content: "\e671";
+}
+
+.uniui-paperplane:before {
+  content: "\e672";
+}
+
+.uniui-close:before {
+  content: "\e673";
+}
+
+.uniui-help-filled:before {
+  content: "\e674";
+}
+
+.uniui-paperplane-filled:before {
+  content: "\e675";
+}
+
+.uniui-plus:before {
+  content: "\e676";
+}
+
+.uniui-mic-filled:before {
+  content: "\e677";
+}
+
+.uniui-image-filled:before {
+  content: "\e678";
+}
+
+.uniui-locked-filled:before {
+  content: "\e668";
+}
+
+.uniui-info:before {
+  content: "\e669";
+}
+
+.uniui-locked:before {
+  content: "\e66b";
+}
+
+.uniui-camera-filled:before {
+  content: "\e658";
+}
+
+.uniui-chat-filled:before {
+  content: "\e659";
+}
+
+.uniui-camera:before {
+  content: "\e65a";
+}
+
+.uniui-circle:before {
+  content: "\e65b";
+}
+
+.uniui-checkmarkempty:before {
+  content: "\e65c";
+}
+
+.uniui-chat:before {
+  content: "\e65d";
+}
+
+.uniui-circle-filled:before {
+  content: "\e65e";
+}
+
+.uniui-flag:before {
+  content: "\e65f";
+}
+
+.uniui-flag-filled:before {
+  content: "\e660";
+}
+
+.uniui-gear-filled:before {
+  content: "\e661";
+}
+
+.uniui-home:before {
+  content: "\e662";
+}
+
+.uniui-home-filled:before {
+  content: "\e663";
+}
+
+.uniui-gear:before {
+  content: "\e664";
+}
+
+.uniui-smallcircle-filled:before {
+  content: "\e665";
+}
+
+.uniui-map-filled:before {
+  content: "\e666";
+}
+
+.uniui-map:before {
+  content: "\e667";
+}
+
+.uniui-refresh-filled:before {
+  content: "\e656";
+}
+
+.uniui-refresh:before {
+  content: "\e657";
+}
+
+.uniui-cloud-upload:before {
+  content: "\e645";
+}
+
+.uniui-cloud-download-filled:before {
+  content: "\e646";
+}
+
+.uniui-cloud-download:before {
+  content: "\e647";
+}
+
+.uniui-cloud-upload-filled:before {
+  content: "\e648";
+}
+
+.uniui-redo:before {
+  content: "\e64a";
+}
+
+.uniui-images-filled:before {
+  content: "\e64b";
+}
+
+.uniui-undo-filled:before {
+  content: "\e64c";
+}
+
+.uniui-more:before {
+  content: "\e64d";
+}
+
+.uniui-more-filled:before {
+  content: "\e64e";
+}
+
+.uniui-undo:before {
+  content: "\e64f";
+}
+
+.uniui-images:before {
+  content: "\e650";
+}
+
+.uniui-paperclip:before {
+  content: "\e652";
+}
+
+.uniui-settings:before {
+  content: "\e653";
+}
+
+.uniui-search:before {
+  content: "\e654";
+}
+
+.uniui-redo-filled:before {
+  content: "\e655";
+}
+
+.uniui-list:before {
+  content: "\e644";
+}
+
+.uniui-mail-open-filled:before {
+  content: "\e63a";
+}
+
+.uniui-hand-down-filled:before {
+  content: "\e63c";
+}
+
+.uniui-hand-down:before {
+  content: "\e63d";
+}
+
+.uniui-hand-up-filled:before {
+  content: "\e63e";
+}
+
+.uniui-hand-up:before {
+  content: "\e63f";
+}
+
+.uniui-heart-filled:before {
+  content: "\e641";
+}
+
+.uniui-mail-open:before {
+  content: "\e643";
+}
+
+.uniui-heart:before {
+  content: "\e639";
+}
+
+.uniui-loop:before {
+  content: "\e633";
+}
+
+.uniui-pulldown:before {
+  content: "\e632";
+}
+
+.uniui-scan:before {
+  content: "\e62a";
+}
+
+.uniui-bars:before {
+  content: "\e627";
+}
+
+.uniui-cart-filled:before {
+  content: "\e629";
+}
+
+.uniui-checkbox:before {
+  content: "\e62b";
+}
+
+.uniui-checkbox-filled:before {
+  content: "\e62c";
+}
+
+.uniui-shop:before {
+  content: "\e62f";
+}
+
+.uniui-headphones:before {
+  content: "\e630";
+}
+
+.uniui-cart:before {
+  content: "\e631";
+}
diff --git a/src/uni_modules/uni-icons/components/uni-icons/uniicons.ttf b/src/uni_modules/uni-icons/components/uni-icons/uniicons.ttf
new file mode 100644
index 00000000..835f33bc
Binary files /dev/null and b/src/uni_modules/uni-icons/components/uni-icons/uniicons.ttf differ
diff --git a/src/uni_modules/uni-icons/package.json b/src/uni_modules/uni-icons/package.json
new file mode 100644
index 00000000..d1c4e77d
--- /dev/null
+++ b/src/uni_modules/uni-icons/package.json
@@ -0,0 +1,86 @@
+{
+  "id": "uni-icons",
+  "displayName": "uni-icons 图标",
+  "version": "1.3.5",
+  "description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "icon",
+    "图标"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.2.14"
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-icons/readme.md b/src/uni_modules/uni-icons/readme.md
new file mode 100644
index 00000000..86234ba1
--- /dev/null
+++ b/src/uni_modules/uni-icons/readme.md
@@ -0,0 +1,8 @@
+## Icons 图标
+> **组件名：uni-icons**
+> 代码块： `uIcons`
+
+用于展示 icons 图标 。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
diff --git a/src/uni_modules/uni-link/changelog.md b/src/uni_modules/uni-link/changelog.md
new file mode 100644
index 00000000..2cfbf591
--- /dev/null
+++ b/src/uni_modules/uni-link/changelog.md
@@ -0,0 +1,17 @@
+## 1.0.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-link](https://uniapp.dcloud.io/component/uniui/uni-link)
+## 1.1.7（2021-11-08）
+## 0.0.7（2021-09-03）
+- 修复 在 nvue 下不显示的 bug
+## 0.0.6（2021-07-30）
+- 新增 支持自定义插槽
+## 0.0.5（2021-06-21）
+- 新增 download 属性，H5平台下载文件名
+## 0.0.4（2021-05-12）
+- 新增 组件示例地址
+## 0.0.3（2021-03-09）
+- 新增 href 属性支持 tel:|mailto:
+
+## 0.0.2（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-link/components/uni-link/uni-link.vue b/src/uni_modules/uni-link/components/uni-link/uni-link.vue
new file mode 100644
index 00000000..27c5468e
--- /dev/null
+++ b/src/uni_modules/uni-link/components/uni-link/uni-link.vue
@@ -0,0 +1,128 @@
+<template>
+	<a v-if="isShowA" class="uni-link" :href="href"
+		:class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}"
+		:style="{color,fontSize:fontSize+'px'}" :download="download">
+		<slot>{{text}}</slot>
+	</a>
+	<!-- #ifndef APP-NVUE -->
+	<text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}"
+		:style="{color,fontSize:fontSize+'px'}" @click="openURL">
+		<slot>{{text}}</slot>
+	</text>
+	<!-- #endif -->
+	<!-- #ifdef APP-NVUE -->
+	<text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}"
+		:style="{color,fontSize:fontSize+'px'}" @click="openURL">
+		{{text}}
+	</text>
+	<!-- #endif -->
+</template>
+
+<script>
+	/**
+	 * Link 外部网页超链接组件
+	 * @description uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=1182
+	 * @property {String} href 点击后打开的外部网页url
+	 * @property {String} text 显示的文字
+	 * @property {String} downlaod H5平台下载文件名
+	 * @property {Boolean} showUnderLine 是否显示下划线
+	 * @property {String} copyTips 在小程序端复制链接时显示的提示语
+	 * @property {String} color 链接文字颜色
+	 * @property {String} fontSize 链接文字大小
+	 * @example * <uni-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn"></uni-link>
+	 */
+	export default {
+		name: 'uniLink',
+		props: {
+			href: {
+				type: String,
+				default: ''
+			},
+			text: {
+				type: String,
+				default: ''
+			},
+			download: {
+				type: String,
+				default: ''
+			},
+			showUnderLine: {
+				type: [Boolean, String],
+				default: true
+			},
+			copyTips: {
+				type: String,
+				default: '已自动复制网址，请在手机浏览器里粘贴该网址'
+			},
+			color: {
+				type: String,
+				default: '#999999'
+			},
+			fontSize: {
+				type: [Number, String],
+				default: 14
+			}
+		},
+		computed: {
+			isShowA() {
+				// #ifdef H5
+				this._isH5 = true;
+				// #endif
+				if ((this.isMail() || this.isTel()) && this._isH5 === true) {
+					return true;
+				}
+				return false;
+			}
+		},
+		created() {
+			this._isH5 = null;
+		},
+		methods: {
+			isMail() {
+				return this.href.startsWith('mailto:');
+			},
+			isTel() {
+				return this.href.startsWith('tel:');
+			},
+			openURL() {
+				// #ifdef APP-PLUS
+				if (this.isTel()) {
+					this.makePhoneCall(this.href.replace('tel:', ''));
+				} else {
+					plus.runtime.openURL(this.href);
+				}
+				// #endif
+				// #ifdef H5
+				window.open(this.href)
+				// #endif
+				// #ifdef MP
+				uni.setClipboardData({
+					data: this.href
+				});
+				uni.showModal({
+					content: this.copyTips,
+					showCancel: false
+				});
+				// #endif
+			},
+			makePhoneCall(phoneNumber) {
+				uni.makePhoneCall({
+					phoneNumber
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	/* #ifndef APP-NVUE */
+	.uni-link {
+		cursor: pointer;
+	}
+
+	/* #endif */
+	.uni-link--withline {
+		text-decoration: underline;
+	}
+</style>
diff --git a/src/uni_modules/uni-link/package.json b/src/uni_modules/uni-link/package.json
new file mode 100644
index 00000000..77b19865
--- /dev/null
+++ b/src/uni_modules/uni-link/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-link",
+  "displayName": "uni-link 超链接",
+  "version": "1.0.0",
+  "description": "uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "link",
+    "超链接",
+    ""
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "y",
+          "联盟": "y"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-link/readme.md b/src/uni_modules/uni-link/readme.md
new file mode 100644
index 00000000..7f09e941
--- /dev/null
+++ b/src/uni_modules/uni-link/readme.md
@@ -0,0 +1,11 @@
+
+
+## Link 链接
+> **组件名：uni-link**
+> 代码块： `uLink`
+
+
+uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-link)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-list/changelog.md b/src/uni_modules/uni-list/changelog.md
new file mode 100644
index 00000000..6aa6e4e0
--- /dev/null
+++ b/src/uni_modules/uni-list/changelog.md
@@ -0,0 +1,20 @@
+## 1.2.1（2022-03-30）
+- 删除无用文件
+## 1.2.0（2021-11-23）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-list](https://uniapp.dcloud.io/component/uniui/uni-list)
+## 1.1.3（2021-08-30）
+- 修复 在vue3中to属性在发行应用的时候报错的bug
+## 1.1.2（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.1.1（2021-07-21）
+- 修复 与其他组件嵌套使用时，点击失效的Bug
+## 1.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.17（2021-05-12）
+- 新增 组件示例地址
+## 1.0.16（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+## 1.0.15（2021-02-05）
+- 调整为uni_modules目录规范
+- 修复 uni-list-chat 角标显示不正常的问题
diff --git a/src/uni_modules/uni-list/components/uni-list-ad/uni-list-ad.vue b/src/uni_modules/uni-list/components/uni-list-ad/uni-list-ad.vue
new file mode 100644
index 00000000..b9349c29
--- /dev/null
+++ b/src/uni_modules/uni-list/components/uni-list-ad/uni-list-ad.vue
@@ -0,0 +1,107 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<cell>
+		<!-- #endif -->
+		<view class="uni-list-ad">
+			<view v-if="borderShow" :class="{'uni-list--border':border,'uni-list-item--first':isFirstChild}"></view>
+			<ad style="width: 200px;height: 300px;border-width: 1px;border-color: red;border-style: solid;" adpid="1111111111"
+			 unit-id="" appid="" apid="" type="feed" @error="aderror" @close="closeAd"></ad>
+		</view>
+		<!-- #ifdef APP-NVUE -->
+	</cell>
+	<!-- #endif -->
+
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom');
+	// #endif
+	export default {
+		name: 'UniListAd',
+		props: {
+			title: {
+				type: String,
+				default: '',
+
+			}
+		},
+		// inject: ['list'],
+		data() {
+			return {
+				isFirstChild: false,
+				border: false,
+				borderShow: true,
+			}
+		},
+
+		mounted() {
+			this.list = this.getForm()
+			if (this.list) {
+				if (!this.list.firstChildAppend) {
+					this.list.firstChildAppend = true
+					this.isFirstChild = true
+				}
+				this.border = this.list.border
+			}
+		},
+		methods: {
+			/**
+			 * 获取父元素实例
+			 */
+			getForm(name = 'uniList') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+			aderror(e) {
+				console.log("aderror: " + JSON.stringify(e.detail));
+			},
+			closeAd(e) {
+				this.borderShow = false
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.uni-list-ad {
+		position: relative;
+		border: 1px red solid;
+	}
+
+	.uni-list--border {
+		position: relative;
+		padding-bottom: 1px;
+		/* #ifdef APP-PLUS */
+		border-top-color: $uni-border-color;
+		border-top-style: solid;
+		border-top-width: 0.5px;
+		/* #endif */
+		margin-left: $uni-spacing-row-lg;
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-list--border:after {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		height: 1px;
+		content: '';
+		-webkit-transform: scaleY(.5);
+		transform: scaleY(.5);
+		background-color: $uni-border-color;
+	}
+
+	.uni-list-item--first:after {
+		height: 0px;
+	}
+
+	/* #endif */
+</style>
diff --git a/src/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.scss b/src/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.scss
new file mode 100644
index 00000000..311f8d9f
--- /dev/null
+++ b/src/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.scss
@@ -0,0 +1,58 @@
+/**
+ * 这里是 uni-list 组件内置的常用样式变量
+ * 如果需要覆盖样式，这里提供了基本的组件样式变量，您可以尝试修改这里的变量，去完成样式替换，而不用去修改源码
+ *
+ */
+
+// 背景色
+$background-color : #fff;
+// 分割线颜色
+$divide-line-color : #e5e5e5;
+
+// 默认头像大小，如需要修改此值，注意同步修改 js 中的值 const avatarWidth = xx ，目前只支持方形头像
+// nvue 页面不支持修改头像大小
+$avatar-width : 45px ;
+
+// 头像边框
+$avatar-border-radius: 5px;
+$avatar-border-color: #eee;
+$avatar-border-width: 1px;
+
+// 标题文字样式
+$title-size : 16px;
+$title-color : #3b4144;
+$title-weight : normal;
+
+// 描述文字样式
+$note-size : 12px;
+$note-color : #999;
+$note-weight : normal;
+
+// 右侧额外内容默认样式
+$right-text-size : 12px;
+$right-text-color : #999;
+$right-text-weight : normal;
+
+// 角标样式
+// nvue 页面不支持修改圆点位置以及大小
+// 角标在左侧时，角标的位置，默认为 0 ，负数左/下移动，正数右/上移动
+$badge-left: 0px;
+$badge-top: 0px;
+
+// 显示圆点时，圆点大小
+$dot-width: 10px;
+$dot-height: 10px;
+
+// 显示角标时，角标大小和字体大小
+$badge-size : 18px;
+$badge-font : 12px;
+// 显示角标时，角标前景色
+$badge-color : #fff;
+// 显示角标时，角标背景色
+$badge-background-color : #ff5a5f;
+// 显示角标时，角标左右间距
+$badge-space : 6px;
+
+// 状态样式
+// 选中颜色
+$hover : #f5f5f5;
diff --git a/src/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue b/src/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue
new file mode 100644
index 00000000..2b310085
--- /dev/null
+++ b/src/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue
@@ -0,0 +1,538 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<cell>
+		<!-- #endif -->
+		<view :hover-class="!clickable && !link ? '' : 'uni-list-chat--hover'" class="uni-list-chat" @click.stop="onClick">
+			<view :class="{ 'uni-list--border': border, 'uni-list-chat--first': isFirstChild }"></view>
+			<view class="uni-list-chat__container">
+				<view class="uni-list-chat__header-warp">
+					<view v-if="avatarCircle || avatarList.length === 0" class="uni-list-chat__header" :class="{ 'header--circle': avatarCircle }">
+						<image class="uni-list-chat__header-image" :class="{ 'header--circle': avatarCircle }" :src="avatar" mode="aspectFill"></image>
+					</view>
+					<!-- 头像组 -->
+					<view v-else class="uni-list-chat__header">
+						<view v-for="(item, index) in avatarList" :key="index" class="uni-list-chat__header-box" :class="computedAvatar"
+						 :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }">
+							<image class="uni-list-chat__header-image" :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }" :src="item.url"
+							 mode="aspectFill"></image>
+						</view>
+					</view>
+				</view>
+				<view v-if="badgeText && badgePositon === 'left'" class="uni-list-chat__badge uni-list-chat__badge-pos" :class="[isSingle]">
+					<text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
+				</view>
+				<view class="uni-list-chat__content">
+					<view class="uni-list-chat__content-main">
+						<text class="uni-list-chat__content-title uni-ellipsis">{{ title }}</text>
+						<text class="uni-list-chat__content-note uni-ellipsis">{{ note }}</text>
+					</view>
+					<view class="uni-list-chat__content-extra">
+						<slot>
+							<text class="uni-list-chat__content-extra-text">{{ time }}</text>
+							<view v-if="badgeText && badgePositon === 'right'" class="uni-list-chat__badge" :class="[isSingle, badgePositon === 'right' ? 'uni-list-chat--right' : '']">
+								<text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
+							</view>
+						</slot>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- #ifdef APP-NVUE -->
+	</cell>
+	<!-- #endif -->
+</template>
+
+<script>
+	// 头像大小
+	const avatarWidth = 45;
+
+	/**
+	 * ListChat 聊天列表
+	 * @description 聊天列表,用于创建聊天类列表
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=24
+	 * @property {String} 	title 							标题
+	 * @property {String} 	note 							描述
+	 * @property {Boolean} 	clickable = [true|false] 		是否开启点击反馈，默认为false
+	 * @property {String} 	badgeText						数字角标内容
+	 * @property {String}  	badgePositon = [left|right]		角标位置，默认为 right
+	 * @property {String} 	link = [false｜navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈，默认为false
+	 *  @value false	 	不开启
+	 *  @value navigateTo 	同 uni.navigateTo()
+	 * 	@value redirectTo 	同 uni.redirectTo()
+	 * 	@value reLaunch   	同 uni.reLaunch()
+	 * 	@value switchTab  	同 uni.switchTab()
+	 * @property {String | PageURIString} 	to  			跳转目标页面
+	 * @property {String} 	time							右侧时间显示
+	 * @property {Boolean} 	avatarCircle = [true|false]		是否显示圆形头像，默认为false
+	 * @property {String} 	avatar							头像地址，avatarCircle 不填时生效
+	 * @property {Array} 	avatarList 						头像组，格式为 [{url:''}]
+	 * @event {Function} 	click 							点击 uniListChat 触发事件
+	 */
+	export default {
+		name: 'UniListChat',
+		emits:['click'],
+		props: {
+			title: {
+				type: String,
+				default: ''
+			},
+			note: {
+				type: String,
+				default: ''
+			},
+			clickable: {
+				type: Boolean,
+				default: false
+			},
+			link: {
+				type: [Boolean, String],
+				default: false
+			},
+			to: {
+				type: String,
+				default: ''
+			},
+			badgeText: {
+				type: [String, Number],
+				default: ''
+			},
+			badgePositon: {
+				type: String,
+				default: 'right'
+			},
+			time: {
+				type: String,
+				default: ''
+			},
+			avatarCircle: {
+				type: Boolean,
+				default: false
+			},
+			avatar: {
+				type: String,
+				default: ''
+			},
+			avatarList: {
+				type: Array,
+				default () {
+					return [];
+				}
+			}
+		},
+		// inject: ['list'],
+		computed: {
+			isSingle() {
+				if (this.badgeText === 'dot') {
+					return 'uni-badge--dot';
+				} else {
+					const badgeText = this.badgeText.toString();
+					if (badgeText.length > 1) {
+						return 'uni-badge--complex';
+					} else {
+						return 'uni-badge--single';
+					}
+				}
+			},
+			computedAvatar() {
+				if (this.avatarList.length > 4) {
+					this.imageWidth = avatarWidth * 0.31;
+					return 'avatarItem--3';
+				} else if (this.avatarList.length > 1) {
+					this.imageWidth = avatarWidth * 0.47;
+					return 'avatarItem--2';
+				} else {
+					this.imageWidth = avatarWidth;
+					return 'avatarItem--1';
+				}
+			}
+		},
+		data() {
+			return {
+				isFirstChild: false,
+				border: true,
+				// avatarList: 3,
+				imageWidth: 50
+			};
+		},
+		mounted() {
+			this.list = this.getForm()
+			if (this.list) {
+				if (!this.list.firstChildAppend) {
+					this.list.firstChildAppend = true;
+					this.isFirstChild = true;
+				}
+				this.border = this.list.border;
+			}
+		},
+		methods: {
+			/**
+			 * 获取父元素实例
+			 */
+			getForm(name = 'uniList') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+			onClick() {
+				if (this.to !== '') {
+					this.openPage();
+					return;
+				}
+
+				if (this.clickable || this.link) {
+					this.$emit('click', {
+						data: {}
+					});
+				}
+			},
+			openPage() {
+				if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
+					this.pageApi(this.link);
+				} else {
+					this.pageApi('navigateTo');
+				}
+			},
+			pageApi(api) {
+				uni[api]({
+					url: this.to,
+					success: res => {
+						this.$emit('click', {
+							data: res
+						});
+					},
+					fail: err => {
+						this.$emit('click', {
+							data: err
+						});
+						console.error(err.errMsg);
+					}
+				});
+			}
+		}
+	};
+</script>
+
+<style lang="scss" >
+	$uni-font-size-lg:16px;
+	$uni-spacing-row-sm: 5px;
+	$uni-spacing-row-base: 10px;
+	$uni-spacing-row-lg: 15px;
+	$background-color: #fff;
+	$divide-line-color: #e5e5e5;
+	$avatar-width: 45px;
+	$avatar-border-radius: 5px;
+	$avatar-border-color: #eee;
+	$avatar-border-width: 1px;
+	$title-size: 16px;
+	$title-color: #3b4144;
+	$title-weight: normal;
+	$note-size: 12px;
+	$note-color: #999;
+	$note-weight: normal;
+	$right-text-size: 12px;
+	$right-text-color: #999;
+	$right-text-weight: normal;
+	$badge-left: 0px;
+	$badge-top: 0px;
+	$dot-width: 10px;
+	$dot-height: 10px;
+	$badge-size: 18px;
+	$badge-font: 12px;
+	$badge-color: #fff;
+	$badge-background-color: #ff5a5f;
+	$badge-space: 6px;
+	$hover: #f5f5f5;
+
+	.uni-list-chat {
+		font-size: $uni-font-size-lg;
+		position: relative;
+		flex-direction: column;
+		justify-content: space-between;
+		background-color: $background-color;
+	}
+
+	// .uni-list-chat--disabled {
+	// 	opacity: 0.3;
+	// }
+
+	.uni-list-chat--hover {
+		background-color: $hover;
+	}
+
+	.uni-list--border {
+		position: relative;
+		margin-left: $uni-spacing-row-lg;
+		/* #ifdef APP-PLUS */
+		border-top-color: $divide-line-color;
+		border-top-style: solid;
+		border-top-width: 0.5px;
+		/* #endif */
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-list--border:after {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		height: 1px;
+		content: '';
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+		background-color: $divide-line-color;
+	}
+
+	.uni-list-item--first:after {
+		height: 0px;
+	}
+
+	/* #endif */
+
+	.uni-list-chat--first {
+		border-top-width: 0px;
+	}
+
+	.uni-ellipsis {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		/* #endif */
+	}
+
+	.uni-ellipsis-2 {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		/* #endif */
+
+		/* #ifdef APP-NVUE */
+		lines: 2;
+		/* #endif */
+	}
+
+	.uni-list-chat__container {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex: 1;
+		padding: $uni-spacing-row-base $uni-spacing-row-lg;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.uni-list-chat__header-warp {
+		position: relative;
+	}
+
+	.uni-list-chat__header {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		align-content: center;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		flex-wrap: wrap-reverse;
+		/* #ifdef APP-NVUE */
+		width: 50px;
+		height: 50px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		width: $avatar-width;
+		height: $avatar-width;
+		/* #endif */
+
+		border-radius: $avatar-border-radius;
+		border-color: $avatar-border-color;
+		border-width: $avatar-border-width;
+		border-style: solid;
+		overflow: hidden;
+	}
+
+	.uni-list-chat__header-box {
+		/* #ifndef APP-PLUS */
+		box-sizing: border-box;
+		display: flex;
+		width: $avatar-width;
+		height: $avatar-width;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		width: 50px;
+		height: 50px;
+		/* #endif */
+		overflow: hidden;
+		border-radius: 2px;
+	}
+
+	.uni-list-chat__header-image {
+		margin: 1px;
+		/* #ifdef APP-NVUE */
+		width: 50px;
+		height: 50px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		width: $avatar-width;
+		height: $avatar-width;
+		/* #endif */
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-list-chat__header-image {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+	.avatarItem--1 {
+		width: 100%;
+		height: 100%;
+	}
+
+	.avatarItem--2 {
+		width: 47%;
+		height: 47%;
+	}
+
+	.avatarItem--3 {
+		width: 32%;
+		height: 32%;
+	}
+
+	/* #endif */
+	.header--circle {
+		border-radius: 50%;
+	}
+
+	.uni-list-chat__content {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex: 1;
+		overflow: hidden;
+		padding: 2px 0;
+	}
+
+	.uni-list-chat__content-main {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: space-between;
+		padding-left: $uni-spacing-row-base;
+		flex: 1;
+		overflow: hidden;
+	}
+
+	.uni-list-chat__content-title {
+		font-size: $title-size;
+		color: $title-color;
+		font-weight: $title-weight;
+		overflow: hidden;
+	}
+
+	.uni-list-chat__content-note {
+		margin-top: 3px;
+		color: $note-color;
+		font-size: $note-size;
+		font-weight: $title-weight;
+		overflow: hidden;
+	}
+
+	.uni-list-chat__content-extra {
+		/* #ifndef APP-NVUE */
+		flex-shrink: 0;
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: flex-end;
+		margin-left: 5px;
+	}
+
+	.uni-list-chat__content-extra-text {
+		color: $right-text-color;
+		font-size: $right-text-size;
+		font-weight: $right-text-weight;
+		overflow: hidden;
+	}
+
+	.uni-list-chat__badge-pos {
+		position: absolute;
+		/* #ifdef APP-NVUE */
+		left: 55px;
+		top: 3px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		left: calc(#{$avatar-width} + 10px - #{$badge-space} + #{$badge-left});
+		top: calc(#{$uni-spacing-row-base}/ 2 + 1px + #{$badge-top});
+		/* #endif */
+	}
+
+	.uni-list-chat__badge {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		border-radius: 100px;
+		background-color: $badge-background-color;
+	}
+
+	.uni-list-chat__badge-text {
+		color: $badge-color;
+		font-size: $badge-font;
+	}
+
+	.uni-badge--single {
+		/* #ifndef APP-NVUE */
+		// left: calc(#{$avatar-width} + 7px + #{$badge-left});
+		/* #endif */
+		width: $badge-size;
+		height: $badge-size;
+	}
+
+	.uni-badge--complex {
+		/* #ifdef APP-NVUE */
+		left: 50px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		width: auto;
+		/* #endif */
+		height: $badge-size;
+		padding: 0 $badge-space;
+	}
+
+	.uni-badge--dot {
+		/* #ifdef APP-NVUE */
+		left: 60px;
+		top: 6px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		left: calc(#{$avatar-width} + 15px - #{$dot-width}/ 2 + 1px + #{$badge-left});
+		/* #endif */
+		width: $dot-width;
+		height: $dot-height;
+		padding: 0;
+	}
+
+	.uni-list-chat--right {
+		/* #ifdef APP-NVUE */
+		left: 0;
+		/* #endif */
+	}
+</style>
diff --git a/src/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue b/src/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue
new file mode 100644
index 00000000..fa2ab6f1
--- /dev/null
+++ b/src/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue
@@ -0,0 +1,473 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<cell>
+		<!-- #endif -->
+
+		<view
+			:class="{ 'uni-list-item--disabled': disabled }"
+			:hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'uni-list-item--hover'"
+			class="uni-list-item"
+			@click="onClick"
+		>
+			<view v-if="!isFirstChild" class="border--left" :class="{ 'uni-list--border': border }"></view>
+			<view
+				class="uni-list-item__container"
+				:class="{ 'container--right': showArrow || link, 'flex--direction': direction === 'column' }"
+			>
+				<slot name="header">
+					<view class="uni-list-item__header">
+						<view v-if="thumb" class="uni-list-item__icon">
+							<image :src="thumb" class="uni-list-item__icon-img" :class="['uni-list--' + thumbSize]" />
+						</view>
+						<view v-else-if="showExtraIcon" class="uni-list-item__icon">
+							<uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" />
+						</view>
+					</view>
+				</slot>
+				<slot name="body">
+					<view
+						class="uni-list-item__content"
+						:class="{ 'uni-list-item__content--center': thumb || showExtraIcon || showBadge || showSwitch }"
+					>
+						<text
+							v-if="title"
+							class="uni-list-item__content-title"
+							:class="[ellipsis !== 0 && ellipsis <= 2 ? 'uni-ellipsis-' + ellipsis : '']"
+						>
+							{{ title }}
+						</text>
+						<text v-if="note" class="uni-list-item__content-note">{{ note }}</text>
+					</view>
+				</slot>
+				<slot name="footer">
+					<view
+						v-if="rightText || showBadge || showSwitch"
+						class="uni-list-item__extra"
+						:class="{ 'flex--justify': direction === 'column' }"
+					>
+						<text v-if="rightText" class="uni-list-item__extra-text">{{ rightText }}</text>
+						<uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" :custom-style="badgeStyle" />
+						<switch
+							v-if="showSwitch"
+							:disabled="disabled"
+							:checked="switchChecked"
+							@change="onSwitchChange"
+						/>
+					</view>
+				</slot>
+			</view>
+			<uni-icons v-if="showArrow || link" :size="16" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
+		</view>
+		<!-- #ifdef APP-NVUE -->
+	</cell>
+	<!-- #endif -->
+</template>
+
+<script>
+/**
+ * ListItem 列表子组件
+ * @description 列表子组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=24
+ * @property {String} 	title 							标题
+ * @property {String} 	note 							描述
+ * @property {String} 	thumb 							左侧缩略图，若thumb有值，则不会显示扩展图标
+ * @property {String}  	thumbSize = [lg|base|sm]		略缩图大小
+ * 	@value 	 lg			大图
+ * 	@value 	 base		一般
+ * 	@value 	 sm			小图
+ * @property {String} 	badgeText						数字角标内容
+ * @property {String} 	badgeType 						数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
+ * @property {Object}   badgeStyle           数字角标样式
+ * @property {String} 	rightText 						右侧文字内容
+ * @property {Boolean} 	disabled = [true|false]			是否禁用
+ * @property {Boolean} 	clickable = [true|false] 		是否开启点击反馈
+ * @property {String} 	link = [navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈
+ *  @value 	navigateTo 	同 uni.navigateTo()
+ * 	@value redirectTo 	同 uni.redirectTo()
+ * 	@value reLaunch   	同 uni.reLaunch()
+ * 	@value switchTab  	同 uni.switchTab()
+ * @property {String | PageURIString} 	to  			跳转目标页面
+ * @property {Boolean} 	showBadge = [true|false] 		是否显示数字角标
+ * @property {Boolean} 	showSwitch = [true|false] 		是否显示Switch
+ * @property {Boolean} 	switchChecked = [true|false] 	Switch是否被选中
+ * @property {Boolean} 	showExtraIcon = [true|false] 	左侧是否显示扩展图标
+ * @property {Object} 	extraIcon 						扩展图标参数，格式为 {color: '#4cd964',size: '22',type: 'spinner'}
+ * @property {String} 	direction = [row|column]		排版方向
+ * @value row 			水平排列
+ * @value column 		垂直排列
+ * @event {Function} 	click 							点击 uniListItem 触发事件
+ * @event {Function} 	switchChange 					点击切换 Switch 时触发
+ */
+export default {
+	name: 'UniListItem',
+	emits: ['click', 'switchChange'],
+	props: {
+		direction: {
+			type: String,
+			default: 'row'
+		},
+		title: {
+			type: String,
+			default: ''
+		},
+		note: {
+			type: String,
+			default: ''
+		},
+		ellipsis: {
+			type: [Number, String],
+			default: 0
+		},
+		disabled: {
+			type: [Boolean, String],
+			default: false
+		},
+		clickable: {
+			type: Boolean,
+			default: false
+		},
+		showArrow: {
+			type: [Boolean, String],
+			default: false
+		},
+		link: {
+			type: [Boolean, String],
+			default: false
+		},
+		to: {
+			type: String,
+			default: ''
+		},
+		showBadge: {
+			type: [Boolean, String],
+			default: false
+		},
+		showSwitch: {
+			type: [Boolean, String],
+			default: false
+		},
+		switchChecked: {
+			type: [Boolean, String],
+			default: false
+		},
+		badgeText: {
+			type: String,
+			default: ''
+		},
+		badgeType: {
+			type: String,
+			default: 'success'
+		},
+		badgeStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		rightText: {
+			type: String,
+			default: ''
+		},
+		thumb: {
+			type: String,
+			default: ''
+		},
+		thumbSize: {
+			type: String,
+			default: 'base'
+		},
+		showExtraIcon: {
+			type: [Boolean, String],
+			default: false
+		},
+		extraIcon: {
+			type: Object,
+			default() {
+				return {
+					type: '',
+					color: '#000000',
+					size: 20
+				};
+			}
+		},
+		border: {
+			type: Boolean,
+			default: true
+		}
+	},
+	// inject: ['list'],
+	data() {
+		return {
+			isFirstChild: false
+		};
+	},
+	mounted() {
+		this.list = this.getForm();
+		// 判断是否存在 uni-list 组件
+		if (this.list) {
+			if (!this.list.firstChildAppend) {
+				this.list.firstChildAppend = true;
+				this.isFirstChild = true;
+			}
+		}
+	},
+	methods: {
+		/**
+		 * 获取父元素实例
+		 */
+		getForm(name = 'uniList') {
+			let parent = this.$parent;
+			let parentName = parent.$options.name;
+			while (parentName !== name) {
+				parent = parent.$parent;
+				if (!parent) return false;
+				parentName = parent.$options.name;
+			}
+			return parent;
+		},
+		onClick() {
+			if (this.to !== '') {
+				this.openPage();
+				return;
+			}
+			if (this.clickable || this.link) {
+				this.$emit('click', {
+					data: {}
+				});
+			}
+		},
+		onSwitchChange(e) {
+			this.$emit('switchChange', e.detail);
+		},
+		openPage() {
+			if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
+				this.pageApi(this.link);
+			} else {
+				this.pageApi('navigateTo');
+			}
+		},
+		pageApi(api) {
+			let callback = {
+				url: this.to,
+				success: res => {
+					this.$emit('click', {
+						data: res
+					});
+				},
+				fail: err => {
+					this.$emit('click', {
+						data: err
+					});
+				}
+			};
+			switch (api) {
+				case 'navigateTo':
+					uni.navigateTo(callback);
+					break;
+				case 'redirectTo':
+					uni.redirectTo(callback);
+					break;
+				case 'reLaunch':
+					uni.reLaunch(callback);
+					break;
+				case 'switchTab':
+					uni.switchTab(callback);
+					break;
+				default:
+					uni.navigateTo(callback);
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+$uni-font-size-sm: 12px;
+$uni-font-size-base: 14px;
+$uni-font-size-lg: 16px;
+$uni-spacing-col-lg: 12px;
+$uni-spacing-row-lg: 15px;
+$uni-img-size-sm: 20px;
+$uni-img-size-base: 26px;
+$uni-img-size-lg: 40px;
+$uni-border-color: #e5e5e5;
+$uni-bg-color-hover: #f1f1f1;
+$uni-text-color-grey: #999;
+$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
+.uni-list-item {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	font-size: $uni-font-size-lg;
+	position: relative;
+	justify-content: space-between;
+	align-items: center;
+	// background-color: #fff;
+	flex-direction: row;
+	/* #ifdef H5 */
+	cursor: pointer;
+	/* #endif */
+}
+.uni-list-item--disabled {
+	opacity: 0.3;
+}
+.uni-list-item--hover {
+	background-color: $uni-bg-color-hover;
+}
+.uni-list-item__container {
+	position: relative;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	padding: $list-item-pd;
+	padding-left: $uni-spacing-row-lg;
+	flex: 1;
+	overflow: hidden;
+	// align-items: center;
+}
+.container--right {
+	padding-right: 0;
+}
+// .border--left {
+// 	margin-left: $uni-spacing-row-lg;
+// }
+.uni-list--border {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	/* #ifdef APP-NVUE */
+	border-top-color: $uni-border-color;
+	border-top-style: solid;
+	border-top-width: 0.5px;
+	/* #endif */
+}
+/* #ifndef APP-NVUE */
+.uni-list--border:after {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(0.5);
+	transform: scaleY(0.5);
+	background-color: $uni-border-color;
+}
+/* #endif */
+.uni-list-item__content {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	padding-right: 8px;
+	flex: 1;
+	color: #3b4144;
+	// overflow: hidden;
+	flex-direction: column;
+	justify-content: space-between;
+	overflow: hidden;
+}
+.uni-list-item__content--center {
+	justify-content: center;
+}
+.uni-list-item__content-title {
+	font-size: $uni-font-size-base;
+	color: #3b4144;
+	overflow: hidden;
+}
+.uni-list-item__content-note {
+	margin-top: 6rpx;
+	color: $uni-text-color-grey;
+	font-size: $uni-font-size-sm;
+	overflow: hidden;
+}
+.uni-list-item__extra {
+	// width: 25%;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	justify-content: flex-end;
+	align-items: center;
+}
+.uni-list-item__header {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	align-items: center;
+}
+.uni-list-item__icon {
+	margin-right: 18rpx;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+.uni-list-item__icon-img {
+	/* #ifndef APP-NVUE */
+	display: block;
+	/* #endif */
+	height: $uni-img-size-base;
+	width: $uni-img-size-base;
+	margin-right: 10px;
+}
+.uni-icon-wrapper {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	align-items: center;
+	padding: 0 10px;
+}
+.flex--direction {
+	flex-direction: column;
+	/* #ifndef APP-NVUE */
+	align-items: initial;
+	/* #endif */
+}
+.flex--justify {
+	/* #ifndef APP-NVUE */
+	justify-content: initial;
+	/* #endif */
+}
+.uni-list--lg {
+	height: $uni-img-size-lg;
+	width: $uni-img-size-lg;
+}
+.uni-list--base {
+	height: $uni-img-size-base;
+	width: $uni-img-size-base;
+}
+.uni-list--sm {
+	height: $uni-img-size-sm;
+	width: $uni-img-size-sm;
+}
+.uni-list-item__extra-text {
+	color: $uni-text-color-grey;
+	font-size: $uni-font-size-sm;
+}
+.uni-ellipsis-1 {
+	/* #ifndef APP-NVUE */
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	lines: 1;
+	text-overflow: ellipsis;
+	/* #endif */
+}
+.uni-ellipsis-2 {
+	/* #ifndef APP-NVUE */
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	lines: 2;
+	text-overflow: ellipsis;
+	/* #endif */
+}
+</style>
diff --git a/src/uni_modules/uni-list/components/uni-list/uni-list.vue b/src/uni_modules/uni-list/components/uni-list/uni-list.vue
new file mode 100644
index 00000000..85103f20
--- /dev/null
+++ b/src/uni_modules/uni-list/components/uni-list/uni-list.vue
@@ -0,0 +1,108 @@
+<template>
+	<!-- #ifndef APP-NVUE -->
+	<view class="uni-list uni-border-top-bottom">
+		<view v-if="border" class="uni-list--border-top"></view>
+		<slot />
+		<view v-if="border" class="uni-list--border-bottom"></view>
+	</view>
+	<!-- #endif -->
+	<!-- #ifdef APP-NVUE -->
+	<list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list>
+	<!-- #endif -->
+</template>
+
+<script>
+/**
+ * List 列表
+ * @description 列表组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=24
+ * @property {String} 	border = [true|false] 		标题
+ */
+export default {
+	name: 'uniList',
+	'mp-weixin': {
+		options: {
+			multipleSlots: false
+		}
+	},
+	props: {
+		enableBackToTop: {
+			type: [Boolean, String],
+			default: false
+		},
+		scrollY: {
+			type: [Boolean, String],
+			default: false
+		},
+		border: {
+			type: Boolean,
+			default: true
+		}
+	},
+	// provide() {
+	// 	return {
+	// 		list: this
+	// 	};
+	// },
+	created() {
+		this.firstChildAppend = false;
+	},
+	methods: {
+		loadMore(e) {
+			this.$emit('scrolltolower');
+		}
+	}
+};
+</script>
+<style lang="scss" >
+$uni-bg-color:#ffffff;
+$uni-border-color:#e5e5e5;
+.uni-list {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	// background-color: $uni-bg-color;
+	position: relative;
+	flex-direction: column;
+}
+
+.uni-list--border {
+	position: relative;
+	/* #ifdef APP-NVUE */
+	border-top-color: $uni-border-color;
+	border-top-style: solid;
+	border-top-width: 0.5px;
+	border-bottom-color: $uni-border-color;
+	border-bottom-style: solid;
+	border-bottom-width: 0.5px;
+	/* #endif */
+	z-index: -1;
+}
+
+/* #ifndef APP-NVUE */
+
+.uni-list--border-top {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	height: 1px;
+	-webkit-transform: scaleY(0.5);
+	transform: scaleY(0.5);
+	background-color: $uni-border-color;
+	z-index: 1;
+}
+
+.uni-list--border-bottom {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	height: 1px;
+	-webkit-transform: scaleY(0.5);
+	transform: scaleY(0.5);
+	background-color: $uni-border-color;
+}
+
+/* #endif */
+</style>
diff --git a/src/uni_modules/uni-list/components/uni-list/uni-refresh.vue b/src/uni_modules/uni-list/components/uni-list/uni-refresh.vue
new file mode 100644
index 00000000..3b4c5a23
--- /dev/null
+++ b/src/uni_modules/uni-list/components/uni-list/uni-refresh.vue
@@ -0,0 +1,65 @@
+<template>
+    <!-- #ifdef APP-NVUE -->
+    <refresh :display="display" @refresh="onrefresh" @pullingdown="onpullingdown">
+        <slot />
+    </refresh>
+    <!-- #endif -->
+    <!-- #ifndef APP-NVUE -->
+    <view ref="uni-refresh" class="uni-refresh" v-show="isShow">
+        <slot />
+    </view>
+    <!-- #endif -->
+</template>
+
+<script>
+    export default {
+        name: 'UniRefresh',
+        props: {
+            display: {
+                type: [String],
+                default: "hide"
+            }
+        },
+        data() {
+            return {
+                pulling: false
+            }
+        },
+        computed: {
+            isShow() {
+                if (this.display === "show" || this.pulling === true) {
+                    return true;
+                }
+                return false;
+            }
+        },
+        created() {},
+        methods: {
+            onchange(value) {
+                this.pulling = value;
+            },
+            onrefresh(e) {
+                this.$emit("refresh", e);
+            },
+            onpullingdown(e) {
+                // #ifdef APP-NVUE
+                this.$emit("pullingdown", e);
+                // #endif
+                // #ifndef APP-NVUE
+                var detail = {
+                    viewHeight: 90,
+                    pullingDistance: e.height
+                }
+                this.$emit("pullingdown", detail);
+                // #endif
+            }
+        }
+    }
+</script>
+
+<style>
+    .uni-refresh {
+        height: 0;
+        overflow: hidden;
+    }
+</style>
diff --git a/src/uni_modules/uni-list/components/uni-list/uni-refresh.wxs b/src/uni_modules/uni-list/components/uni-list/uni-refresh.wxs
new file mode 100644
index 00000000..818a6b72
--- /dev/null
+++ b/src/uni_modules/uni-list/components/uni-list/uni-refresh.wxs
@@ -0,0 +1,87 @@
+var pullDown = {
+    threshold: 95,
+    maxHeight: 200,
+    callRefresh: 'onrefresh',
+    callPullingDown: 'onpullingdown',
+    refreshSelector: '.uni-refresh'
+};
+
+function ready(newValue, oldValue, ownerInstance, instance) {
+    var state = instance.getState()
+    state.canPullDown = newValue;
+    // console.log(newValue);
+}
+
+function touchStart(e, instance) {
+    var state = instance.getState();
+    state.refreshInstance = instance.selectComponent(pullDown.refreshSelector);
+    state.canPullDown = (state.refreshInstance != null && state.refreshInstance != undefined);
+    if (!state.canPullDown) {
+        return
+    }
+
+    // console.log("touchStart");
+
+    state.height = 0;
+    state.touchStartY = e.touches[0].pageY || e.changedTouches[0].pageY;
+    state.refreshInstance.setStyle({
+        'height': 0
+    });
+    state.refreshInstance.callMethod("onchange", true);
+}
+
+function touchMove(e, ownerInstance) {
+    var instance = e.instance;
+    var state = instance.getState();
+    if (!state.canPullDown) {
+        return
+    }
+
+    var oldHeight = state.height;
+    var endY = e.touches[0].pageY || e.changedTouches[0].pageY;
+    var height = endY - state.touchStartY;
+    if (height > pullDown.maxHeight) {
+        return;
+    }
+
+    var refreshInstance = state.refreshInstance;
+    refreshInstance.setStyle({
+        'height': height + 'px'
+    });
+
+    height = height < pullDown.maxHeight ? height : pullDown.maxHeight;
+    state.height = height;
+    refreshInstance.callMethod(pullDown.callPullingDown, {
+        height: height
+    });
+}
+
+function touchEnd(e, ownerInstance) {
+    var state = e.instance.getState();
+    if (!state.canPullDown) {
+        return
+    }
+
+    state.refreshInstance.callMethod("onchange", false);
+
+    var refreshInstance = state.refreshInstance;
+    if (state.height > pullDown.threshold) {
+        refreshInstance.callMethod(pullDown.callRefresh);
+        return;
+    }
+
+    refreshInstance.setStyle({
+        'height': 0
+    });
+}
+
+function propObserver(newValue, oldValue, instance) {
+    pullDown = newValue;
+}
+
+module.exports = {
+    touchmove: touchMove,
+    touchstart: touchStart,
+    touchend: touchEnd,
+    propObserver: propObserver
+}
diff --git a/src/uni_modules/uni-list/package.json b/src/uni_modules/uni-list/package.json
new file mode 100644
index 00000000..66e8bef0
--- /dev/null
+++ b/src/uni_modules/uni-list/package.json
@@ -0,0 +1,91 @@
+{
+  "id": "uni-list",
+  "displayName": "uni-list 列表",
+  "version": "1.2.1",
+  "description": "List 组件 ，帮助使用者快速构建列表。",
+  "keywords": [
+    "",
+    "uni-ui",
+    "uniui",
+    "列表",
+    "",
+    "list"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+      "uni-badge",
+      "uni-icons"
+    ],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-list/readme.md b/src/uni_modules/uni-list/readme.md
new file mode 100644
index 00000000..32c28654
--- /dev/null
+++ b/src/uni_modules/uni-list/readme.md
@@ -0,0 +1,346 @@
+## List 列表
+> **组件名：uni-list**
+> 代码块： `uList`、`uListItem`
+> 关联组件：`uni-list-item`、`uni-badge`、`uni-icons`、`uni-list-chat`、`uni-list-ad`
+
+
+List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。
+
+在vue页面里，它默认使用页面级滚动。在app-nvue页面里，它默认使用原生list组件滚动。这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。
+
+uni-list组件是父容器，里面的核心是uni-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。
+
+uni-list-item有很多风格，uni-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容。
+
+内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。
+
+涉及很多大图或丰富内容的列表，比如类今日头条的新闻列表、类淘宝的电商列表，需要通过扩展插槽实现。
+
+下文均有样例给出。
+
+uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uni-load-more](https://ext.dcloud.net.cn/plugin?id=29)
+
+
+### 安装方式
+
+本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
+
+如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
+
+> **注意事项**
+> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
+> - 组件需要依赖 `sass` 插件 ，请自行手动安装
+> - 组件内部依赖 `'uni-icons'` 、`uni-badge` 组件
+> - `uni-list` 和 `uni-list-item` 需要配套使用，暂不支持单独使用 `uni-list-item`
+> - 只有开启点击反馈后，会有点击选中效果
+> - 使用插槽时，可以完全自定义内容
+> - note 、rightText 属性暂时没做限制，不支持文字溢出隐藏，使用时应该控制长度显示或通过默认插槽自行扩展
+> - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译
+> - 如果需要修改 `switch`、`badge` 样式，请使用插槽自定义
+> - 在 `HBuilderX` 低版本中，可能会出现组件显示 `undefined` 的问题，请升级最新的 `HBuilderX` 或者 `cli`
+> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
+ 
+
+### 基本用法 
+
+- 设置 `title` 属性，可以显示列表标题
+- 设置 `disabled` 属性，可以禁用当前项
+
+```html
+<uni-list>
+	<uni-list-item  title="列表文字" ></uni-list-item>
+	<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
+</uni-list>
+			 
+```
+
+### 多行内容显示
+
+- 设置 `note` 属性 ，可以在第二行显示描述文本信息
+
+```html
+<uni-list>
+	<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
+	<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
+</uni-list>
+
+```
+
+### 右侧显示角标、switch
+
+- 设置 `show-badge` 属性 ，可以显示角标内容
+- 设置 `show-switch` 属性，可以显示 switch 开关
+
+```html
+<uni-list>
+	<uni-list-item  title="列表右侧显示角标" :show-badge="true" badge-text="12" ></uni-list-item>
+	<uni-list-item title="列表右侧显示 switch"  :show-switch="true"  @switchChange="switchChange" ></uni-list-item>
+</uni-list>
+
+```
+
+### 左侧显示略缩图、图标  
+
+- 设置 `thumb` 属性 ，可以在列表左侧显示略缩图
+- 设置 `show-extra-icon` 属性，并指定 `extra-icon` 可以在左侧显示图标
+
+```html
+ <uni-list>
+ 	<uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
+ 	 thumb-size="lg" rightText="右侧文字"></uni-list-item>
+ 	<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item>
+</uni-list>
+```
+
+### 开启点击反馈和右侧箭头
+- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件
+- 设置 `link` 属性，会自动开启点击反馈，并给列表右侧添加一个箭头
+- 设置 `to` 属性，可以跳转页面，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo`
+
+```html
+
+<uni-list>
+	<uni-list-item title="开启点击反馈" clickable  @click="onClick" ></uni-list-item>
+	<uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
+	<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
+</uni-list>
+
+```
+
+
+### 聊天列表示例
+- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件
+- 设置 `link` 属性，会自动开启点击反馈，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo`
+- 设置 `to` 属性，可以跳转页面
+- `time` 属性，通常会设置成时间显示，但是这个属性不仅仅可以设置时间，你可以传入任何文本，注意文本长度可能会影响显示
+- `avatar` 和 `avatarList` 属性同时只会有一个生效，同时设置的话，`avatarList` 属性的长度大于1 ，`avatar` 属性将失效
+- 可以通过默认插槽自定义列表右侧内容
+
+```html
+
+<uni-list>
+	<uni-list :border="true">
+		<!-- 显示圆形头像 -->
+		<uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" ></uni-list-chat>
+		<!-- 右侧带角标 -->
+		<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12" :badge-style="{backgroundColor:'#FF80AB'}"></uni-list-chat>
+		<!-- 头像显示圆点 -->
+		<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
+		<!-- 头像显示角标 -->
+		<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat>
+		<!-- 显示多头像 -->
+		<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
+		<!-- 自定义右侧内容 -->
+		<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
+			<view class="chat-custom-right">
+				<text class="chat-custom-text">刚刚</text>
+				<!-- 需要使用 uni-icons 请自行引入 -->
+				<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
+			</view>
+		</uni-list-chat>
+	</uni-list>
+</uni-list>
+
+```
+
+```javascript
+
+export default {
+	components: {},
+	data() {
+		return {
+			avatarList: [{
+				url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
+			}, {
+				url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
+			}, {
+				url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
+			}]
+		}
+	}
+}
+
+```
+
+
+```css
+
+.chat-custom-right {
+	flex: 1;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: flex-end;
+}
+
+.chat-custom-text {
+	font-size: 12px;
+	color: #999;
+}
+
+```
+
+## API
+
+### List Props
+
+属性名			|类型		|默认值		|	说明																									
+:-:				|:-:		|:-:		|	:-:	
+border			|Boolean	|true		|	是否显示边框
+
+
+### ListItem Props
+
+属性名			|类型		|默认值		|	说明																					
+:-:				|:-:		|:-:		|	:-:	
+title			|String		|-			|	标题
+note			|String		|-			|	描述
+ellipsis		|Number		|0			|	title 是否溢出隐藏，可选值，0:默认;  1:显示一行;	2:显示两行;【nvue 暂不支持】
+thumb			|String		|-			|	左侧缩略图，若thumb有值，则不会显示扩展图标
+thumbSize		|String 	|medium 	|	略缩图尺寸，可选值，lg:大图;  medium:一般;	sm:小图;
+showBadge		|Boolean	|false		|	是否显示数字角标	
+badgeText		|String		|-			|	数字角标内容
+badgeType		|String		|-			|	数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)	
+badgeStyle  |Object   |-      | 数字角标样式，使用uni-badge的custom-style参数
+rightText		|String		|-			|	右侧文字内容
+disabled		|Boolean	|false		|	是否禁用	
+showArrow 		|Boolean	|true		|	是否显示箭头图标			
+link			|String 	|navigateTo	|	新页面跳转方式，可选值见下表
+to				|String		|-			|	新页面跳转地址，如填写此属性，click 会返回页面是否跳转成功			
+clickable		|Boolean	|false		|	是否开启点击反馈
+showSwitch	    |Boolean	|false		|	是否显示Switch																			
+switchChecked	|Boolean	|false		|	Switch是否被选中																			
+showExtraIcon   |Boolean	|false		|	左侧是否显示扩展图标																		
+extraIcon		|Object		|-			|	扩展图标参数，格式为 ``{color: '#4cd964',size: '22',type: 'spinner'}``，参考 [uni-icons](https://ext.dcloud.net.cn/plugin?id=28)	
+direction		| String	|row		|	排版方向，可选值，row:水平排列;  column:垂直排列; 3个插槽是水平排还是垂直排，也受此属性控制
+
+
+#### Link Options
+
+属性名				|	说明
+:-:					|	:-:
+navigateTo 	| 	同 uni.navigateTo()
+redirectTo 	|	同 uni.reLaunch()
+reLaunch		|	同 uni.reLaunch()
+switchTab  	|	同 uni.switchTab()
+
+### ListItem Events
+
+事件称名			|说明									|返回参数			
+:-:				|:-:									|:-:				
+click			|点击 uniListItem 触发事件，需开启点击反馈	|-					
+switchChange	|点击切换 Switch 时触发，需显示 switch		|e={value:checked}	
+
+
+
+### ListItem Slots
+
+名称	 	|	说明					
+:-:		|	:-:						
+header	|	左/上内容插槽，可完全自定义默认显示
+body	|	中间内容插槽，可完全自定义中间内容				
+footer	|	右/下内容插槽，可完全自定义右侧内容		
+
+
+> **通过插槽扩展**
+> 需要注意的是当使用插槽时，内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现
+> 如果	`uni-list-item` 组件内置属性样式无法满足需求，可以使用插槽来自定义uni-list-item里的内容。
+> uni-list-item提供了3个可扩展的插槽：`header`、`body`、`footer`
+> - 当 `direction` 属性为 `row` 时表示水平排列，此时 `header` 表示列表的左边部分，`body` 表示列表的中间部分，`footer` 表示列表的右边部分
+> - 当 `direction` 属性为 `column` 时表示垂直排列，此时 `header` 表示列表的上边部分，`body` 表示列表的中间部分，`footer` 表示列表的下边部分
+> 开发者可以只用1个插槽，也可以3个一起使用。在插槽中可自主编写view标签，实现自己所需的效果。
+
+	
+**示例**
+
+```html
+<uni-list>
+	<uni-list-item title="自定义右侧插槽" note="列表描述信息" link>
+		<template slot="header">
+			<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
+		</template>
+	</uni-list-item>
+	<uni-list-item>
+		<!-- 自定义 header -->
+		<view slot="header" class="slot-box"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></view>
+		<!-- 自定义 body -->
+		<text slot="body" class="slot-box slot-text">自定义插槽</text>
+		<!-- 自定义 footer-->
+		<template slot="footer">
+			<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
+		</template>
+	</uni-list-item>
+</uni-list>
+```
+
+
+
+
+
+### ListItemChat Props
+
+属性名			|类型		|默认值		|	说明																		
+:-:				|:-:		|:-:		|	:-:	
+title 			|String		|-			|	标题
+note 			|String		|-			|	描述
+clickable		|Boolean	|false		|	是否开启点击反馈
+badgeText		|String		|-			|	数字角标内容，设置为 `dot` 将显示圆点
+badgePositon 	|String		|right		|	角标位置
+link			|String 	|navigateTo	|	是否展示右侧箭头并开启点击反馈，可选值见下表
+clickable		|Boolean	|false		|	是否开启点击反馈
+to				|String		|-			|	跳转页面地址，如填写此属性，click 会返回页面是否跳转成功	
+time			|String 	|-			|	右侧时间显示
+avatarCircle 	|Boolean 	|false		|	是否显示圆形头像
+avatar			|String 	|-			|	头像地址，avatarCircle 不填时生效
+avatarList 		|Array	 	|-			|	头像组，格式为 [{url:''}]
+
+#### Link Options
+
+属性名		|	说明
+:-:			|	:-:
+navigateTo 	| 	同 uni.navigateTo()
+redirectTo 	|	同 uni.reLaunch()
+reLaunch	|	同 uni.reLaunch()
+switchTab  	|	同 uni.switchTab()
+
+### ListItemChat Slots
+
+名称	 	|	说明					
+:-		|	:-						
+default	|	自定义列表右侧内容（包括时间和角标显示）
+
+### ListItemChat Events
+事件称名			|	说明						|	返回参数			
+:-:				|	:-:						|	:-:	
+@click			|	点击 uniListChat 触发事件	|	{data:{}}	，如有 to 属性，会返回页面跳转信息	
+
+
+
+
+
+
+## 基于uni-list扩展的页面模板
+
+通过扩展插槽，可实现多种常见样式的列表
+
+**新闻列表类**
+
+1. 云端一体混合布局：[https://ext.dcloud.net.cn/plugin?id=2546](https://ext.dcloud.net.cn/plugin?id=2546)
+2. 云端一体垂直布局，大图模式：[https://ext.dcloud.net.cn/plugin?id=2583](https://ext.dcloud.net.cn/plugin?id=2583)
+3. 云端一体垂直布局，多行图文混排：[https://ext.dcloud.net.cn/plugin?id=2584](https://ext.dcloud.net.cn/plugin?id=2584)
+4. 云端一体垂直布局，多图模式：[https://ext.dcloud.net.cn/plugin?id=2585](https://ext.dcloud.net.cn/plugin?id=2585)
+5. 云端一体水平布局，左图右文：[https://ext.dcloud.net.cn/plugin?id=2586](https://ext.dcloud.net.cn/plugin?id=2586)
+6. 云端一体水平布局，左文右图：[https://ext.dcloud.net.cn/plugin?id=2587](https://ext.dcloud.net.cn/plugin?id=2587)
+7. 云端一体垂直布局，无图模式，主标题+副标题：[https://ext.dcloud.net.cn/plugin?id=2588](https://ext.dcloud.net.cn/plugin?id=2588)
+
+**商品列表类**
+
+1. 云端一体列表/宫格视图互切：[https://ext.dcloud.net.cn/plugin?id=2651](https://ext.dcloud.net.cn/plugin?id=2651)
+2. 云端一体列表（宫格模式）：[https://ext.dcloud.net.cn/plugin?id=2671](https://ext.dcloud.net.cn/plugin?id=2671)
+3. 云端一体列表（列表模式）：[https://ext.dcloud.net.cn/plugin?id=2672](https://ext.dcloud.net.cn/plugin?id=2672)
+
+## 组件示例
+
+点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/list/list](https://hellouniapp.dcloud.net.cn/pages/extUI/list/list)
\ No newline at end of file
diff --git a/src/uni_modules/uni-load-more/changelog.md b/src/uni_modules/uni-load-more/changelog.md
new file mode 100644
index 00000000..8f03f1d5
--- /dev/null
+++ b/src/uni_modules/uni-load-more/changelog.md
@@ -0,0 +1,19 @@
+## 1.3.3（2022-01-20）
+- 新增 showText属性 ，是否显示文本
+## 1.3.2（2022-01-19）
+- 修复 nvue 平台下不显示文本的bug
+## 1.3.1（2022-01-19）
+- 修复 微信小程序平台样式选择器报警告的问题
+## 1.3.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more)
+## 1.2.1（2021-08-24）
+- 新增 支持国际化
+## 1.2.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.8（2021-05-12）
+- 新增 组件示例地址
+## 1.1.7（2021-03-30）
+- 修复 uni-load-more 在首页使用时，h5 平台报 'uni is not defined' 的 bug
+## 1.1.6（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-load-more/components/uni-load-more/i18n/en.json b/src/uni_modules/uni-load-more/components/uni-load-more/i18n/en.json
new file mode 100644
index 00000000..a4f14a54
--- /dev/null
+++ b/src/uni_modules/uni-load-more/components/uni-load-more/i18n/en.json
@@ -0,0 +1,5 @@
+{
+	"uni-load-more.contentdown": "Pull up to show more",
+	"uni-load-more.contentrefresh": "loading...",
+	"uni-load-more.contentnomore": "No more data"
+}
diff --git a/src/uni_modules/uni-load-more/components/uni-load-more/i18n/index.js b/src/uni_modules/uni-load-more/components/uni-load-more/i18n/index.js
new file mode 100644
index 00000000..de7509c8
--- /dev/null
+++ b/src/uni_modules/uni-load-more/components/uni-load-more/i18n/index.js
@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/src/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hans.json b/src/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hans.json
new file mode 100644
index 00000000..f15d5105
--- /dev/null
+++ b/src/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hans.json
@@ -0,0 +1,5 @@
+{
+	"uni-load-more.contentdown": "上拉显示更多",
+	"uni-load-more.contentrefresh": "正在加载...",
+	"uni-load-more.contentnomore": "没有更多数据了"
+}
diff --git a/src/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hant.json b/src/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hant.json
new file mode 100644
index 00000000..a255c6de
--- /dev/null
+++ b/src/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hant.json
@@ -0,0 +1,5 @@
+{
+	"uni-load-more.contentdown": "上拉顯示更多",
+	"uni-load-more.contentrefresh": "正在加載...",
+	"uni-load-more.contentnomore": "沒有更多數據了"
+}
diff --git a/src/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue b/src/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue
new file mode 100644
index 00000000..6d2f9d06
--- /dev/null
+++ b/src/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue
@@ -0,0 +1,399 @@
+<template>
+	<view class="uni-load-more" @click="onClick">
+		<!-- #ifdef APP-NVUE -->
+		<loading-indicator v-if="!webviewHide && status === 'loading' && showIcon"
+			:style="{color: color,width:iconSize+'px',height:iconSize+'px'}" :animating="true"
+			class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator>
+		<!-- #endif -->
+		<!-- #ifdef H5 -->
+		<svg width="24" height="24" viewBox="25 25 50 50"
+			v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
+			:style="{width:iconSize+'px',height:iconSize+'px'}"
+			class="uni-load-more__img uni-load-more__img--android-H5">
+			<circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" :stroke-width="3"></circle>
+		</svg>
+		<!-- #endif -->
+		<!-- #ifndef APP-NVUE || H5 -->
+		<view
+			v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
+			:style="{width:iconSize+'px',height:iconSize+'px'}"
+			class="uni-load-more__img uni-load-more__img--android-MP">
+			<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
+			<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
+			<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
+		</view>
+		<!-- #endif -->
+		<!-- #ifndef APP-NVUE -->
+		<view v-else-if="!webviewHide && status === 'loading' && showIcon"
+			:style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5">
+			<image :src="imgBase64" mode="widthFix"></image>
+		</view>
+		<!-- #endif -->
+		<text v-if="showText" class="uni-load-more__text"
+			:style="{color: color}">{{ status === 'more' ? contentdownText : status === 'loading' ? contentrefreshText : contentnomoreText }}</text>
+	</view>
+</template>
+
+<script>
+	let platform
+	setTimeout(() => {
+		platform = uni.getDeviceInfo().platform
+	}, 16)
+
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {
+		t
+	} = initVueI18n(messages)
+
+	/**
+	 * LoadMore 加载更多
+	 * @description 用于列表中，做滚动加载使用，展示 loading 的各种状态
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=29
+	 * @property {String} status = [more|loading|noMore] loading 的状态
+	 * 	@value more loading前
+	 * 	@value loading loading中
+	 * 	@value noMore 没有更多了
+	 * @property {Number} iconSize 指定图标大小
+	 * @property {Boolean} iconSize = [true|false] 是否显示 loading 图标
+	 * @property {String} iconType = [snow|circle|auto] 指定图标样式
+	 * 	@value snow ios雪花加载样式
+	 * 	@value circle 安卓唤醒加载样式
+	 * 	@value auto 根据平台自动选择加载样式
+	 * @property {String} color 图标和文字颜色
+	 * @property {Object} contentText 各状态文字说明，值为：{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
+	 * @event {Function} clickLoadMore 点击加载更多时触发
+	 */
+	export default {
+		name: 'UniLoadMore',
+		emits: ['clickLoadMore'],
+		props: {
+			status: {
+				// 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
+				type: String,
+				default: 'more'
+			},
+			showIcon: {
+				type: Boolean,
+				default: true
+			},
+			iconType: {
+				type: String,
+				default: 'auto'
+			},
+			iconSize: {
+				type: Number,
+				default: 24
+			},
+			color: {
+				type: String,
+				default: '#777777'
+			},
+			contentText: {
+				type: Object,
+				default () {
+					return {
+						contentdown: '',
+						contentrefresh: '',
+						contentnomore: ''
+					}
+				}
+			},
+			showText: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				webviewHide: false,
+				platform: platform,
+				imgBase64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlBMzU3OTlEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlBMzU3OUFEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUEzNTc5N0Q5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUEzNTc5OEQ5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+ALSwAAA6CSURBVHja1FsLkFZV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'
+			}
+		},
+		computed: {
+			iconSnowWidth() {
+				return (Math.floor(this.iconSize / 24) || 1) * 2
+			},
+			contentdownText() {
+				return this.contentText.contentdown || t("uni-load-more.contentdown")
+			},
+			contentrefreshText() {
+				return this.contentText.contentrefresh || t("uni-load-more.contentrefresh")
+			},
+			contentnomoreText() {
+				return this.contentText.contentnomore || t("uni-load-more.contentnomore")
+			}
+		},
+		mounted() {
+			// #ifdef APP-PLUS
+			var pages = getCurrentPages();
+			var page = pages[pages.length - 1];
+			var currentWebview = page.$getAppWebview();
+			currentWebview.addEventListener('hide', () => {
+				this.webviewHide = true
+			})
+			currentWebview.addEventListener('show', () => {
+				this.webviewHide = false
+			})
+			// #endif
+		},
+		methods: {
+			onClick() {
+				this.$emit('clickLoadMore', {
+					detail: {
+						status: this.status,
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.uni-load-more {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		height: 40px;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.uni-load-more__text {
+		font-size: 14px;
+		margin-left: 8px;
+	}
+
+	.uni-load-more__img {
+		width: 24px;
+		height: 24px;
+		// margin-right: 8px;
+	}
+
+	.uni-load-more__img--nvue {
+		color: #666666;
+	}
+
+	.uni-load-more__img--android,
+	.uni-load-more__img--ios {
+		width: 24px;
+		height: 24px;
+		transform: rotate(0deg);
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-load-more__img--android {
+		animation: loading-ios 1s 0s linear infinite;
+	}
+
+	@keyframes loading-android {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	.uni-load-more__img--ios-H5 {
+		position: relative;
+		animation: loading-ios-H5 1s 0s step-end infinite;
+	}
+
+	.uni-load-more__img--ios-H5 image {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+	}
+
+	@keyframes loading-ios-H5 {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		8% {
+			transform: rotate(30deg);
+		}
+
+		16% {
+			transform: rotate(60deg);
+		}
+
+		24% {
+			transform: rotate(90deg);
+		}
+
+		32% {
+			transform: rotate(120deg);
+		}
+
+		40% {
+			transform: rotate(150deg);
+		}
+
+		48% {
+			transform: rotate(180deg);
+		}
+
+		56% {
+			transform: rotate(210deg);
+		}
+
+		64% {
+			transform: rotate(240deg);
+		}
+
+		73% {
+			transform: rotate(270deg);
+		}
+
+		82% {
+			transform: rotate(300deg);
+		}
+
+		91% {
+			transform: rotate(330deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* #endif */
+
+	/* #ifdef H5 */
+	.uni-load-more__img--android-H5 {
+		animation: loading-android-H5-rotate 2s linear infinite;
+		transform-origin: center center;
+	}
+
+	.uni-load-more__img--android-H5 circle {
+		display: inline-block;
+		animation: loading-android-H5-dash 1.5s ease-in-out infinite;
+		stroke: currentColor;
+		stroke-linecap: round;
+	}
+
+	@keyframes loading-android-H5-rotate {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes loading-android-H5-dash {
+		0% {
+			stroke-dasharray: 1, 200;
+			stroke-dashoffset: 0;
+		}
+
+		50% {
+			stroke-dasharray: 90, 150;
+			stroke-dashoffset: -40;
+		}
+
+		100% {
+			stroke-dasharray: 90, 150;
+			stroke-dashoffset: -120;
+		}
+	}
+
+	/* #endif */
+
+	/* #ifndef APP-NVUE || H5 */
+	.uni-load-more__img--android-MP {
+		position: relative;
+		width: 24px;
+		height: 24px;
+		transform: rotate(0deg);
+		animation: loading-ios 1s 0s ease infinite;
+	}
+
+	.uni-load-more__img--android-MP .uni-load-more__img-icon {
+		position: absolute;
+		box-sizing: border-box;
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
+		border: solid 2px transparent;
+		border-top: solid 2px #777777;
+		transform-origin: center;
+	}
+
+	.uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(1) {
+		animation: loading-android-MP-1 1s 0s linear infinite;
+	}
+
+	.uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(2) {
+		animation: loading-android-MP-2 1s 0s linear infinite;
+	}
+
+	.uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(3) {
+		animation: loading-android-MP-3 1s 0s linear infinite;
+	}
+
+	@keyframes loading-android {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes loading-android-MP-1 {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		50% {
+			transform: rotate(90deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes loading-android-MP-2 {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		50% {
+			transform: rotate(180deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes loading-android-MP-3 {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		50% {
+			transform: rotate(270deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* #endif */
+</style>
diff --git a/src/uni_modules/uni-load-more/package.json b/src/uni_modules/uni-load-more/package.json
new file mode 100644
index 00000000..2fa6f040
--- /dev/null
+++ b/src/uni_modules/uni-load-more/package.json
@@ -0,0 +1,86 @@
+{
+  "id": "uni-load-more",
+  "displayName": "uni-load-more 加载更多",
+  "version": "1.3.3",
+  "description": "LoadMore 组件，常用在列表里面，做滚动加载使用。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "加载更多",
+    "load-more"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-load-more/readme.md b/src/uni_modules/uni-load-more/readme.md
new file mode 100644
index 00000000..54dc1fad
--- /dev/null
+++ b/src/uni_modules/uni-load-more/readme.md
@@ -0,0 +1,14 @@
+
+
+### LoadMore 加载更多
+> **组件名：uni-load-more**
+> 代码块： `uLoadMore`
+
+
+用于列表中，做滚动加载使用，展示 loading 的各种状态。
+
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-load-more)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/src/uni_modules/uni-nav-bar/changelog.md b/src/uni_modules/uni-nav-bar/changelog.md
new file mode 100644
index 00000000..c2d841b6
--- /dev/null
+++ b/src/uni_modules/uni-nav-bar/changelog.md
@@ -0,0 +1,39 @@
+## 1.3.5（2022-05-24）
+- 新增 stat 属性 ，可开启统计title 上报 ，仅使用了title 属性且项目开启了uni统计生效
+## 1.3.4（2022-01-24）
+- 更新 组件示例
+## 1.3.3（2022-01-24）
+- 新增 left-width/right-width属性 ，可修改左右两侧的宽度
+## 1.3.2（2022-01-18）
+- 修复 在vue下，标题不垂直居中的bug
+## 1.3.1（2022-01-18）
+- 修复 height 属性类型错误
+## 1.3.0（2022-01-18）
+- 新增 height 属性,可修改组件高度
+- 新增 dark 属性可可开启暗黑模式
+- 优化 标题字数过多显示省略号
+- 优化 插槽，插入内容可完全覆盖
+## 1.2.1（2022-01-10）
+- 修复 color 属性不生效的bug
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-nav-bar](https://uniapp.dcloud.io/component/uniui/uni-nav-bar)
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.11（2021-05-12）
+- 新增 组件示例地址
+## 1.0.10（2021-04-30）
+- 修复 在nvue下fixed为true，宽度不能撑满的Bug
+## 1.0.9（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.8（2021-04-14）
+- uni-ui 修复 uni-nav-bar 当 fixed 属性为 true 时铺不满屏幕的 bug
+
+## 1.0.7（2021-02-25）
+- 修复 easycom 下，找不到 uni-status-bar 的bug
+
+## 1.0.6（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.5（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue b/src/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue
new file mode 100644
index 00000000..cbfc1685
--- /dev/null
+++ b/src/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue
@@ -0,0 +1,348 @@
+<template>
+	<view class="uni-navbar" :class="{'uni-dark':dark}">
+		<view :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }"
+			:style="{ 'background-color': themeBgColor }" class="uni-navbar__content">
+			<status-bar v-if="statusBar" />
+			<view :style="{ color: themeColor,backgroundColor: themeBgColor ,height:navbarHeight}"
+				class="uni-navbar__header">
+				<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left"
+					:style="{width:leftIconWidth}">
+					<slot name="left">
+						<view class="uni-navbar__content_view" v-if="leftIcon.length > 0">
+							<uni-icons :color="themeColor" :type="leftIcon" size="20" />
+						</view>
+						<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }" class="uni-navbar-btn-text"
+							v-if="leftText.length">
+							<text :style="{ color: themeColor, fontSize: '12px' }">{{ leftText }}</text>
+						</view>
+					</slot>
+				</view>
+				<view class="uni-navbar__header-container " @tap="onClickTitle">
+					<slot>
+						<view class="uni-navbar__header-container-inner" v-if="title.length>0">
+							<text class="uni-nav-bar-text uni-ellipsis-1"
+								:style="{color: themeColor }">{{ title }}</text>
+						</view>
+					</slot>
+				</view>
+				<view @click="onClickRight" class="uni-navbar__header-btns uni-navbar__header-btns-right"
+					:style="{width:rightIconWidth}">
+					<slot name="right">
+						<view v-if="rightIcon.length">
+							<uni-icons :color="themeColor" :type="rightIcon" size="22" />
+						</view>
+						<view class="uni-navbar-btn-text" v-if="rightText.length && !rightIcon.length">
+							<text class="uni-nav-bar-right-text" :style="{ color: themeColor}">{{ rightText }}</text>
+						</view>
+					</slot>
+				</view>
+			</view>
+		</view>
+		<view class="uni-navbar__placeholder" v-if="fixed">
+			<status-bar v-if="statusBar" />
+			<view class="uni-navbar__placeholder-view" :style="{ height:navbarHeight}" />
+		</view>
+	</view>
+</template>
+
+<script>
+	import statusBar from "./uni-status-bar.vue";
+	const getVal = (val) => typeof val === 'number' ? val + 'px' : val;
+
+	/**
+	 * NavBar 自定义导航栏
+	 * @description 导航栏组件，主要用于头部导航
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=52
+	 * @property {Boolean} dark 开启黑暗模式
+	 * @property {String} title 标题文字
+	 * @property {String} leftText 左侧按钮文本
+	 * @property {String} rightText 右侧按钮文本
+	 * @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
+	 * @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
+	 * @property {String} color 图标和文字颜色
+	 * @property {String} backgroundColor 导航栏背景颜色
+	 * @property {Boolean} fixed = [true|false] 是否固定顶部
+	 * @property {Boolean} statusBar = [true|false] 是否包含状态栏
+	 * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
+	 * @property {Boolean} stat 是否开启统计标题上报
+	 * @event {Function} clickLeft 左侧按钮点击时触发
+	 * @event {Function} clickRight 右侧按钮点击时触发
+	 * @event {Function} clickTitle 中间标题点击时触发
+	 */
+	export default {
+		name: "UniNavBar",
+		components: {
+			statusBar
+		},
+		emits: ['clickLeft', 'clickRight', 'clickTitle'],
+		props: {
+			dark: {
+				type: Boolean,
+				default: false
+			},
+			title: {
+				type: String,
+				default: ""
+			},
+			leftText: {
+				type: String,
+				default: ""
+			},
+			rightText: {
+				type: String,
+				default: ""
+			},
+			leftIcon: {
+				type: String,
+				default: ""
+			},
+			rightIcon: {
+				type: String,
+				default: ""
+			},
+			fixed: {
+				type: [Boolean, String],
+				default: false
+			},
+			color: {
+				type: String,
+				default: ""
+			},
+			backgroundColor: {
+				type: String,
+				default: ""
+			},
+			statusBar: {
+				type: [Boolean, String],
+				default: false
+			},
+			shadow: {
+				type: [Boolean, String],
+				default: false
+			},
+			border: {
+				type: [Boolean, String],
+				default: true
+			},
+			height: {
+				type: [Number, String],
+				default: 44
+			},
+			leftWidth: {
+				type: [Number, String],
+				default: 60
+			},
+			rightWidth: {
+				type: [Number, String],
+				default: 60
+			},
+			stat: {
+				type: [Boolean, String],
+				default: ''
+			}
+		},
+		computed: {
+			themeBgColor() {
+				if (this.dark) {
+					// 默认值
+					if (this.backgroundColor) {
+						return this.backgroundColor
+					} else {
+						return this.dark ? '#333' : '#FFF'
+					}
+				}
+				return this.backgroundColor || '#FFF'
+			},
+			themeColor() {
+				if (this.dark) {
+					// 默认值
+					if (this.color) {
+						return this.color
+					} else {
+						return this.dark ? '#fff' : '#333'
+					}
+				}
+				return this.color || '#333'
+			},
+			navbarHeight() {
+				return getVal(this.height)
+			},
+			leftIconWidth() {
+				return getVal(this.leftWidth)
+			},
+			rightIconWidth() {
+				return getVal(this.rightWidth)
+			}
+		},
+		mounted() {
+			if (uni.report && this.stat && this.title !== '') {
+				uni.report('title', this.title)
+			}
+		},
+		methods: {
+			onClickLeft() {
+				this.$emit("clickLeft");
+			},
+			onClickRight() {
+				this.$emit("clickRight");
+			},
+			onClickTitle() {
+				this.$emit("clickTitle");
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	$nav-height: 44px;
+
+	.uni-navbar {
+		// box-sizing: border-box;
+	}
+
+	.uni-nav-bar-text {
+		/* #ifdef APP-PLUS */
+		font-size: 34rpx;
+		/* #endif */
+		/* #ifndef APP-PLUS */
+		font-size: 14px;
+		/* #endif */
+	}
+
+	.uni-nav-bar-right-text {
+		font-size: 12px;
+	}
+
+	.uni-navbar__content {
+		position: relative;
+		// background-color: #fff;
+		// box-sizing: border-box;
+		background-color: transparent;
+	}
+
+	.uni-navbar__content_view {
+		// box-sizing: border-box;
+	}
+
+	.uni-navbar-btn-text {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: center;
+		line-height: 12px;
+	}
+
+	.uni-navbar__header {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		padding: 0 10px;
+		flex-direction: row;
+		height: $nav-height;
+		font-size: 12px;
+	}
+
+	.uni-navbar__header-btns {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		display: flex;
+		/* #endif */
+		flex-wrap: nowrap;
+		flex-direction: row;
+		width: 120rpx;
+		// padding: 0 6px;
+		justify-content: center;
+		align-items: center;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-navbar__header-btns-left {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		width: 120rpx;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.uni-navbar__header-btns-right {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		// width: 150rpx;
+		// padding-right: 30rpx;
+		justify-content: flex-end;
+		align-items: center;
+	}
+
+	.uni-navbar__header-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		padding: 0 10px;
+		overflow: hidden;
+	}
+
+	.uni-navbar__header-container-inner {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		font-size: 12px;
+		overflow: hidden;
+		// box-sizing: border-box;
+	}
+
+
+	.uni-navbar__placeholder-view {
+		height: $nav-height;
+	}
+
+	.uni-navbar--fixed {
+		position: fixed;
+		z-index: 998;
+		/* #ifdef H5 */
+		left: var(--window-left);
+		right: var(--window-right);
+		/* #endif */
+		/* #ifndef H5 */
+		left: 0;
+		right: 0;
+		/* #endif */
+
+	}
+
+	.uni-navbar--shadow {
+		box-shadow: 0 1px 6px #ccc;
+	}
+
+	.uni-navbar--border {
+		border-bottom-width: 1rpx;
+		border-bottom-style: solid;
+		border-bottom-color: #eee;
+	}
+
+	.uni-ellipsis-1 {
+		overflow: hidden;
+		/* #ifndef APP-NVUE */
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		text-overflow: ellipsis;
+		/* #endif */
+	}
+
+	// 暗主题配置
+	.uni-dark {}
+</style>
diff --git a/src/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue b/src/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue
new file mode 100644
index 00000000..30367a04
--- /dev/null
+++ b/src/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue
@@ -0,0 +1,27 @@
+<template>
+	<view :style="{ height: statusBarHeight }" class="uni-status-bar">
+		<slot />
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'UniStatusBar',
+		data() {
+			return {
+				statusBarHeight: 20
+			}
+		},
+		mounted() {
+			this.statusBarHeight = uni.getWindowInfo().statusBarHeight + 'px'
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.uni-status-bar {
+		// width: 750rpx;
+		height: 20px;
+		// height: var(--status-bar-height);
+	}
+</style>
diff --git a/src/uni_modules/uni-nav-bar/package.json b/src/uni_modules/uni-nav-bar/package.json
new file mode 100644
index 00000000..a69ed4f1
--- /dev/null
+++ b/src/uni_modules/uni-nav-bar/package.json
@@ -0,0 +1,89 @@
+{
+  "id": "uni-nav-bar",
+  "displayName": "uni-nav-bar 自定义导航栏",
+  "version": "1.3.5",
+  "description": "自定义导航栏组件，主要用于头部导航。",
+  "keywords": [
+    "uni-ui",
+    "导航",
+    "导航栏",
+    "自定义导航栏"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-nav-bar/readme.md b/src/uni_modules/uni-nav-bar/readme.md
new file mode 100644
index 00000000..3934b327
--- /dev/null
+++ b/src/uni_modules/uni-nav-bar/readme.md
@@ -0,0 +1,15 @@
+
+
+## NavBar 导航栏
+> **组件名：uni-nav-bar**
+> 代码块： `uNavBar`
+
+导航栏组件，主要用于头部导航。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-nav-bar)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
+
+
+
diff --git a/src/uni_modules/uni-notice-bar/changelog.md b/src/uni_modules/uni-notice-bar/changelog.md
new file mode 100644
index 00000000..9ee75a01
--- /dev/null
+++ b/src/uni_modules/uni-notice-bar/changelog.md
@@ -0,0 +1,16 @@
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-notice-bar](https://uniapp.dcloud.io/component/uniui/uni-notice-bar)
+## 1.1.1（2021-11-09） 
+- 新增 提供组件设计资源，组件样式调整
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.9（2021-05-12）
+- 新增 组件示例地址
+## 1.0.8（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.7（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.6（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue b/src/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue
new file mode 100644
index 00000000..5aa1c566
--- /dev/null
+++ b/src/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue
@@ -0,0 +1,395 @@
+<template>
+	<view v-if="show" class="uni-noticebar" :style="{ backgroundColor: backgroundColor }" @click="onClick">
+		<uni-icons v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound"
+			:color="color" size="22" />
+		<view ref="textBox" class="uni-noticebar__content-wrapper"
+			:class="{'uni-noticebar__content-wrapper--scrollable':scrollable, 'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)}">
+			<view :id="elIdBox" class="uni-noticebar__content"
+				:class="{'uni-noticebar__content--scrollable':scrollable, 'uni-noticebar__content--single':!scrollable && (single || moreText)}">
+				<text :id="elId" ref="animationEle" class="uni-noticebar__content-text"
+					:class="{'uni-noticebar__content-text--scrollable':scrollable,'uni-noticebar__content-text--single':!scrollable && (single || showGetMore)}"
+					:style="{color:color, width:wrapWidth+'px', 'animationDuration': animationDuration, '-webkit-animationDuration': animationDuration ,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}">{{text}}</text>
+			</view>
+		</view>
+		<view v-if="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more uni-cursor-point"
+			@click="clickMore">
+			<text v-if="moreText.length > 0" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text>
+			<uni-icons v-else type="right" :color="moreColor" size="16" />
+		</view>
+		<view class="uni-noticebar-close uni-cursor-point" v-if="(showClose === true || showClose === 'true') && (showGetMore === false || showGetMore === 'false')">
+			<uni-icons
+				type="closeempty" :color="color" size="16" @click="close" />
+		</view>
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = weex.requireModule('dom');
+	const animation = weex.requireModule('animation');
+	// #endif
+
+	/**
+	 * NoticeBar 自定义导航栏
+	 * @description 通告栏组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=30
+	 * @property {Number} speed 文字滚动的速度，默认100px/秒
+	 * @property {String} text 显示文字
+	 * @property {String} backgroundColor 背景颜色
+	 * @property {String} color 文字颜色
+	 * @property {String} moreColor 查看更多文字的颜色
+	 * @property {String} moreText 设置“查看更多”的文本
+	 * @property {Boolean} single = [true|false] 是否单行
+	 * @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行
+	 * @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标
+	 * @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮
+	 * @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行
+	 * @event {Function} click 点击 NoticeBar 触发事件
+	 * @event {Function} close 关闭 NoticeBar 触发事件
+	 * @event {Function} getmore 点击”查看更多“时触发事件
+	 */
+
+	export default {
+		name: 'UniNoticeBar',
+		emits: ['click', 'getmore', 'close'],
+		props: {
+			text: {
+				type: String,
+				default: ''
+			},
+			moreText: {
+				type: String,
+				default: ''
+			},
+			backgroundColor: {
+				type: String,
+				default: '#FFF9EA'
+			},
+			speed: {
+				// 默认1s滚动100px
+				type: Number,
+				default: 100
+			},
+			color: {
+				type: String,
+				default: '#FF9A43'
+			},
+			moreColor: {
+				type: String,
+				default: '#FF9A43'
+			},
+			single: {
+				// 是否单行
+				type: [Boolean, String],
+				default: false
+			},
+			scrollable: {
+				// 是否滚动，添加后控制单行效果取消
+				type: [Boolean, String],
+				default: false
+			},
+			showIcon: {
+				// 是否显示左侧icon
+				type: [Boolean, String],
+				default: false
+			},
+			showGetMore: {
+				// 是否显示右侧查看更多
+				type: [Boolean, String],
+				default: false
+			},
+			showClose: {
+				// 是否显示左侧关闭按钮
+				type: [Boolean, String],
+				default: false
+			}
+		},
+		data() {
+			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
+			const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
+			return {
+				textWidth: 0,
+				boxWidth: 0,
+				wrapWidth: '',
+				webviewHide: false,
+				// #ifdef APP-NVUE
+				stopAnimation: false,
+				// #endif
+				elId: elId,
+				elIdBox: elIdBox,
+				show: true,
+				animationDuration: 'none',
+				animationPlayState: 'paused',
+				animationDelay: '0s'
+			}
+		},
+		mounted() {
+			// #ifdef APP-PLUS
+			var pages = getCurrentPages();
+			var page = pages[pages.length - 1];
+			var currentWebview = page.$getAppWebview();
+			currentWebview.addEventListener('hide', () => {
+				this.webviewHide = true
+			})
+			currentWebview.addEventListener('show', () => {
+				this.webviewHide = false
+			})
+			// #endif
+			this.$nextTick(() => {
+				this.initSize()
+			})
+		},
+		// #ifdef APP-NVUE
+		beforeDestroy() {
+			this.stopAnimation = true
+		},
+		// #endif
+		methods: {
+			initSize() {
+				if (this.scrollable) {
+					// #ifndef APP-NVUE
+					let query = [],
+						boxWidth = 0,
+						textWidth = 0;
+					let textQuery = new Promise((resolve, reject) => {
+						uni.createSelectorQuery()
+							// #ifndef MP-ALIPAY
+							.in(this)
+							// #endif
+							.select(`#${this.elId}`)
+							.boundingClientRect()
+							.exec(ret => {
+								this.textWidth = ret[0].width
+								resolve()
+							})
+					})
+					let boxQuery = new Promise((resolve, reject) => {
+						uni.createSelectorQuery()
+							// #ifndef MP-ALIPAY
+							.in(this)
+							// #endif
+							.select(`#${this.elIdBox}`)
+							.boundingClientRect()
+							.exec(ret => {
+								this.boxWidth = ret[0].width
+								resolve()
+							})
+					})
+					query.push(textQuery)
+					query.push(boxQuery)
+					Promise.all(query).then(() => {
+						this.animationDuration = `${this.textWidth / this.speed}s`
+						this.animationDelay = `-${this.boxWidth / this.speed}s`
+						setTimeout(() => {
+							this.animationPlayState = 'running'
+						}, 1000)
+					})
+					// #endif
+					// #ifdef APP-NVUE
+					dom.getComponentRect(this.$refs['animationEle'], (res) => {
+						let winWidth = uni.getWindowInfo().windowWidth
+						this.textWidth = res.size.width
+						animation.transition(this.$refs['animationEle'], {
+							styles: {
+								transform: `translateX(-${winWidth}px)`
+							},
+							duration: 0,
+							timingFunction: 'linear',
+							delay: 0
+						}, () => {
+							if (!this.stopAnimation) {
+								animation.transition(this.$refs['animationEle'], {
+									styles: {
+										transform: `translateX(-${this.textWidth}px)`
+									},
+									timingFunction: 'linear',
+									duration: (this.textWidth - winWidth) / this.speed * 1000,
+									delay: 1000
+								}, () => {
+									if (!this.stopAnimation) {
+										this.loopAnimation()
+									}
+								});
+							}
+						});
+					})
+					// #endif
+				}
+				// #ifdef APP-NVUE
+				if (!this.scrollable && (this.single || this.moreText)) {
+					dom.getComponentRect(this.$refs['textBox'], (res) => {
+						this.wrapWidth = res.size.width
+					})
+				}
+				// #endif
+			},
+			loopAnimation() {
+				// #ifdef APP-NVUE
+				animation.transition(this.$refs['animationEle'], {
+					styles: {
+						transform: `translateX(0px)`
+					},
+					duration: 0
+				}, () => {
+					if (!this.stopAnimation) {
+						animation.transition(this.$refs['animationEle'], {
+							styles: {
+								transform: `translateX(-${this.textWidth}px)`
+							},
+							duration: this.textWidth / this.speed * 1000,
+							timingFunction: 'linear',
+							delay: 0
+						}, () => {
+							if (!this.stopAnimation) {
+								this.loopAnimation()
+							}
+						});
+					}
+				});
+				// #endif
+			},
+			clickMore() {
+				this.$emit('getmore')
+			},
+			close() {
+				this.show = false;
+				this.$emit('close')
+			},
+			onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-noticebar {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		width: 100%;
+		box-sizing: border-box;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		padding: 10px 12px;
+		margin-bottom: 10px;
+	}
+
+	.uni-cursor-point {
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-noticebar-close {
+		margin-left: 8px;
+		margin-right: 5px;
+	}
+
+	.uni-noticebar-icon {
+		margin-right: 5px;
+	}
+
+	.uni-noticebar__content-wrapper {
+		flex: 1;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	.uni-noticebar__content-wrapper--single {
+		/* #ifndef APP-NVUE */
+		line-height: 18px;
+		/* #endif */
+	}
+
+	.uni-noticebar__content-wrapper--single,
+	.uni-noticebar__content-wrapper--scrollable {
+		flex-direction: row;
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-noticebar__content-wrapper--scrollable {
+		position: relative;
+		height: 18px;
+	}
+
+	/* #endif */
+
+	.uni-noticebar__content--scrollable {
+		/* #ifdef APP-NVUE */
+		flex: 0;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		flex: 1;
+		display: block;
+		overflow: hidden;
+		/* #endif */
+	}
+
+	.uni-noticebar__content--single {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex: none;
+		width: 100%;
+		justify-content: center;
+		/* #endif */
+	}
+
+	.uni-noticebar__content-text {
+		font-size: 14px;
+		line-height: 18px;
+		/* #ifndef APP-NVUE */
+		word-break: break-all;
+		/* #endif */
+	}
+
+	.uni-noticebar__content-text--single {
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		display: block;
+		width: 100%;
+		white-space: nowrap;
+		/* #endif */
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.uni-noticebar__content-text--scrollable {
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		padding-left: 750rpx;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		position: absolute;
+		display: block;
+		height: 18px;
+		line-height: 18px;
+		white-space: nowrap;
+		padding-left: 100%;
+		animation: notice 10s 0s linear infinite both;
+		animation-play-state: paused;
+		/* #endif */
+	}
+
+	.uni-noticebar__more {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		flex-direction: row;
+		flex-wrap: nowrap;
+		align-items: center;
+		padding-left: 5px;
+	}
+
+	.uni-noticebar__more-text {
+		font-size: 14px;
+	}
+
+	@keyframes notice {
+		100% {
+			transform: translate3d(-100%, 0, 0);
+		}
+	}
+</style>
diff --git a/src/uni_modules/uni-notice-bar/package.json b/src/uni_modules/uni-notice-bar/package.json
new file mode 100644
index 00000000..97719a0f
--- /dev/null
+++ b/src/uni_modules/uni-notice-bar/package.json
@@ -0,0 +1,90 @@
+{
+  "id": "uni-notice-bar",
+  "displayName": "uni-notice-bar 通告栏",
+  "version": "1.2.0",
+  "description": "NoticeBar 通告栏组件，常用于展示公告信息，可设为滚动公告",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "通告栏",
+    "公告",
+    "跑马灯"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/src/uni_modules/uni-notice-bar/readme.md b/src/uni_modules/uni-notice-bar/readme.md
new file mode 100644
index 00000000..fb2ede24
--- /dev/null
+++ b/src/uni_modules/uni-notice-bar/readme.md
@@ -0,0 +1,13 @@
+
+
+## NoticeBar 通告栏
+> **组件名：uni-notice-bar**
+> 代码块： `uNoticeBar`
+
+
+通告栏组件 。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-notice-bar)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/src/uni_modules/uni-number-box/changelog.md b/src/uni_modules/uni-number-box/changelog.md
new file mode 100644
index 00000000..5925c32a
--- /dev/null
+++ b/src/uni_modules/uni-number-box/changelog.md
@@ -0,0 +1,25 @@
+## 1.2.1（2021-11-22）
+- 修复 vue3中某些scss变量无法找到的问题
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-number-box](https://uniapp.dcloud.io/component/uniui/uni-number-box)
+## 1.1.2（2021-11-09） 
+- 新增 提供组件设计资源，组件样式调整
+## 1.1.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-05-12）
+- 新增 组件示例地址
+## 1.0.6（2021-04-20）
+- 修复 uni-number-box 浮点数运算不精确的 bug
+- 修复 uni-number-box change 事件触发不正确的 bug
+- 新增 uni-number-box v-model 双向绑定
+## 1.0.5（2021-02-05）
+- 调整为uni_modules目录规范
+
+## 1.0.7（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增 支持 v-model
+- 新增 支持 focus、blur 事件
+- 新增 支持 PC 端
diff --git a/src/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue b/src/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue
new file mode 100644
index 00000000..8d255fbb
--- /dev/null
+++ b/src/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue
@@ -0,0 +1,220 @@
+<template>
+	<view class="uni-numbox">
+		<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" :style="{color}">-</text>
+		</view>
+		<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number"
+			v-model="inputValue" :style="{background, color}" />
+		<view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" :style="{color}">+</text>
+		</view>
+	</view>
+</template>
+<script>
+	/**
+	 * NumberBox 数字输入框
+	 * @description 带加减按钮的数字输入框
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=31
+	 * @property {Number} value 输入框当前值
+	 * @property {Number} min 最小值
+	 * @property {Number} max 最大值
+	 * @property {Number} step 每次点击改变的间隔大小
+	 * @property {String} background 背景色
+	 * @property {String} color 字体颜色（前景色）
+	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
+	 * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
+	 * @event {Function} focus 输入框聚焦时触发的事件，参数为 event 对象
+	 * @event {Function} blur 输入框失焦时触发的事件，参数为 event 对象
+	 */
+
+	export default {
+		name: "UniNumberBox",
+		emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
+		props: {
+			value: {
+				type: [Number, String],
+				default: 1
+			},
+			modelValue: {
+				type: [Number, String],
+				default: 1
+			},
+			min: {
+				type: Number,
+				default: 0
+			},
+			max: {
+				type: Number,
+				default: 100
+			},
+			step: {
+				type: Number,
+				default: 1
+			},
+			background: {
+				type: String,
+				default: '#f5f5f5'
+			},
+			color: {
+				type: String,
+				default: '#333'
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				inputValue: 0
+			};
+		},
+		watch: {
+			value(val) {
+				this.inputValue = +val;
+			},
+			modelValue(val) {
+				this.inputValue = +val;
+			}
+		},
+		created() {
+			if (this.value === 1) {
+				this.inputValue = +this.modelValue;
+			}
+			if (this.modelValue === 1) {
+				this.inputValue = +this.value;
+			}
+		},
+		methods: {
+			_calcValue(type) {
+				if (this.disabled) {
+					return;
+				}
+				const scale = this._getDecimalScale();
+				let value = this.inputValue * scale;
+				let step = this.step * scale;
+				if (type === "minus") {
+					value -= step;
+					if (value < (this.min * scale)) {
+						return;
+					}
+					if (value > (this.max * scale)) {
+						value = this.max * scale
+					}
+				}
+
+				if (type === "plus") {
+					value += step;
+					if (value > (this.max * scale)) {
+						return;
+					}
+					if (value < (this.min * scale)) {
+						value = this.min * scale
+					}
+				}
+
+				this.inputValue = (value / scale).toFixed(String(scale).length - 1);
+				this.$emit("change", +this.inputValue);
+				// TODO vue2 兼容
+				this.$emit("input", +this.inputValue);
+				// TODO vue3 兼容
+				this.$emit("update:modelValue", +this.inputValue);
+			},
+			_getDecimalScale() {
+
+				let scale = 1;
+				// 浮点型
+				if (~~this.step !== this.step) {
+					scale = Math.pow(10, String(this.step).split(".")[1].length);
+				}
+				return scale;
+			},
+			_onBlur(event) {
+				this.$emit('blur', event)
+				let value = event.detail.value;
+				if (!value) {
+					// this.inputValue = 0;
+					return;
+				}
+				value = +value;
+				if (value > this.max) {
+					value = this.max;
+				} else if (value < this.min) {
+					value = this.min;
+				}
+				const scale = this._getDecimalScale();
+				this.inputValue = value.toFixed(String(scale).length - 1);
+				this.$emit("change", +this.inputValue);
+				this.$emit("input", +this.inputValue);
+			},
+			_onFocus(event) {
+				this.$emit('focus', event)
+			}
+		}
+	};
+</script>
+<style lang="scss" scoped>
+	$box-height: 26px;
+	$bg: #f5f5f5;
+	$br: 2px;
+	$color: #333;
+
+	.uni-numbox {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-numbox-btns {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		padding: 0 8px;
+		background-color: $bg;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-numbox__value {
+		margin: 0 2px;
+		background-color: $bg;
+		width: 40px;
+		height: $box-height;
+		text-align: center;
+		font-size: 14px;
+		border-left-width: 0;
+		border-right-width: 0;
+		color: $color;
+	}
+
+	.uni-numbox__minus {
+		border-top-left-radius: $br;
+		border-bottom-left-radius: $br;
+	}
+
+	.uni-numbox__plus {
+		border-top-right-radius: $br;
+		border-bottom-right-radius: $br;
+	}
+
+	.uni-numbox--text {
+		// fix nvue
+		line-height: 20px;
+
+		font-size: 20px;
+		font-weight: 300;
+		color: $color;
+	}
+
+	.uni-numbox .uni-numbox--disabled {
+		color: #c0c0c0 !important;
+		/* #ifdef H5 */
+		cursor: not-allowed;
+		/* #endif */
+	}
+</style>
diff --git a/src/uni_modules/uni-number-box/package.json b/src/uni_modules/uni-number-box/package.json
new file mode 100644
index 00000000..ad823368
--- /dev/null
+++ b/src/uni_modules/uni-number-box/package.json
@@ -0,0 +1,85 @@
+{
+  "id": "uni-number-box",
+  "displayName": "uni-number-box 数字输入框",
+  "version": "1.2.1",
+  "description": "NumberBox 带加减按钮的数字输入框组件，用户可以控制每次点击增加的数值，支持小数。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "数字输入框"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-number-box/readme.md b/src/uni_modules/uni-number-box/readme.md
new file mode 100644
index 00000000..affc56fa
--- /dev/null
+++ b/src/uni_modules/uni-number-box/readme.md
@@ -0,0 +1,13 @@
+
+
+## NumberBox 数字输入框
+> **组件名：uni-number-box**
+> 代码块： `uNumberBox`
+
+
+带加减按钮的数字输入框。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-number-box)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/src/uni_modules/uni-rate/changelog.md b/src/uni_modules/uni-rate/changelog.md
new file mode 100644
index 00000000..8a98a612
--- /dev/null
+++ b/src/uni_modules/uni-rate/changelog.md
@@ -0,0 +1,25 @@
+## 1.3.1（2022-02-25）
+- 修复 条件判断 `NaN` 错误的 bug
+## 1.3.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-rate](https://uniapp.dcloud.io/component/uniui/uni-rate)
+## 1.2.2（2021-09-10）
+- 优化 默认值修改为 0 颗星
+## 1.2.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.2.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.2（2021-05-12）
+- 新增 组件示例地址
+## 1.1.1（2021-04-21）
+- 修复 布局变化后 uni-rate  星星计算不准确的 bug
+- 优化 添加依赖 uni-icons, 导入 uni-rate 自动下载依赖
+## 1.1.0（2021-04-16）
+- 修复 uni-rate 属性 margin 值为 string 组件失效的 bug
+
+## 1.0.9（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.8（2021-02-05）
+- 调整为uni_modules目录规范
+- 支持 pc 端
diff --git a/src/uni_modules/uni-rate/components/uni-rate/uni-rate.vue b/src/uni_modules/uni-rate/components/uni-rate/uni-rate.vue
new file mode 100644
index 00000000..857f5f9c
--- /dev/null
+++ b/src/uni_modules/uni-rate/components/uni-rate/uni-rate.vue
@@ -0,0 +1,361 @@
+<template>
+	<view>
+		<view ref="uni-rate" class="uni-rate">
+			<view class="uni-rate__icon" :class="{'uni-cursor-not-allowed': disabled}"
+				:style="{ 'margin-right': marginNumber + 'px' }" v-for="(star, index) in stars" :key="index"
+				@touchstart.stop="touchstart" @touchmove.stop="touchmove" @mousedown.stop="mousedown"
+				@mousemove.stop="mousemove" @mouseleave="mouseleave">
+				<uni-icons :color="color" :size="size" :type="isFill ? 'star-filled' : 'star'" />
+				<!-- #ifdef APP-NVUE -->
+				<view :style="{ width: star.activeWitch.replace('%','')*size/100+'px'}" class="uni-rate__icon-on">
+					<uni-icons style="text-align: left;" :color="disabled?'#ccc':activeColor" :size="size"
+						type="star-filled" />
+				</view>
+				<!-- #endif -->
+				<!-- #ifndef APP-NVUE -->
+				<view :style="{ width: star.activeWitch}" class="uni-rate__icon-on">
+					<uni-icons :color="disabled?disabledColor:activeColor" :size="size" type="star-filled" />
+				</view>
+				<!-- #endif -->
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom');
+	// #endif
+	/**
+	 * Rate 评分
+	 * @description 评分组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=33
+	 * @property {Boolean} 	isFill = [true|false] 		星星的类型，是否为实心类型, 默认为实心
+	 * @property {String} 	color 						未选中状态的星星颜色，默认为 "#ececec"
+	 * @property {String} 	activeColor 				选中状态的星星颜色，默认为 "#ffca3e"
+	 * @property {String} 	disabledColor 				禁用状态的星星颜色，默认为 "#c0c0c0"
+	 * @property {Number} 	size 						星星的大小
+	 * @property {Number} 	value/v-model 				当前评分
+	 * @property {Number} 	max 						最大评分评分数量，目前一分一颗星
+	 * @property {Number} 	margin 						星星的间距，单位 px
+	 * @property {Boolean} 	disabled = [true|false] 	是否为禁用状态，默认为 false
+	 * @property {Boolean} 	readonly = [true|false] 	是否为只读状态，默认为 false
+	 * @property {Boolean} 	allowHalf = [true|false] 	是否实现半星，默认为 false
+	 * @property {Boolean} 	touchable = [true|false] 	是否支持滑动手势，默认为 true
+	 * @event {Function} change 						uniRate 的 value 改变时触发事件，e={value:Number}
+	 */
+
+	export default {
+		name: "UniRate",
+		props: {
+			isFill: {
+				// 星星的类型，是否镂空
+				type: [Boolean, String],
+				default: true
+			},
+			color: {
+				// 星星未选中的颜色
+				type: String,
+				default: "#ececec"
+			},
+			activeColor: {
+				// 星星选中状态颜色
+				type: String,
+				default: "#ffca3e"
+			},
+			disabledColor: {
+				// 星星禁用状态颜色
+				type: String,
+				default: "#c0c0c0"
+			},
+			size: {
+				// 星星的大小
+				type: [Number, String],
+				default: 24
+			},
+			value: {
+				// 当前评分
+				type: [Number, String],
+				default: 0
+			},
+			modelValue: {
+				// 当前评分
+				type: [Number, String],
+				default: 0
+			},
+			max: {
+				// 最大评分
+				type: [Number, String],
+				default: 5
+			},
+			margin: {
+				// 星星的间距
+				type: [Number, String],
+				default: 0
+			},
+			disabled: {
+				// 是否可点击
+				type: [Boolean, String],
+				default: false
+			},
+			readonly: {
+				// 是否只读
+				type: [Boolean, String],
+				default: false
+			},
+			allowHalf: {
+				// 是否显示半星
+				type: [Boolean, String],
+				default: false
+			},
+			touchable: {
+				// 是否支持滑动手势
+				type: [Boolean, String],
+				default: true
+			}
+		},
+		data() {
+			return {
+				valueSync: "",
+				userMouseFristMove: true,
+				userRated: false,
+				userLastRate: 1
+			};
+		},
+		watch: {
+			value(newVal) {
+				this.valueSync = Number(newVal);
+			},
+			modelValue(newVal) {
+				this.valueSync = Number(newVal);
+			},
+		},
+		computed: {
+			stars() {
+				const value = this.valueSync ? this.valueSync : 0;
+				const starList = [];
+				const floorValue = Math.floor(value);
+				const ceilValue = Math.ceil(value);
+				for (let i = 0; i < this.max; i++) {
+					if (floorValue > i) {
+						starList.push({
+							activeWitch: "100%"
+						});
+					} else if (ceilValue - 1 === i) {
+						starList.push({
+							activeWitch: (value - floorValue) * 100 + "%"
+						});
+					} else {
+						starList.push({
+							activeWitch: "0"
+						});
+					}
+				}
+				return starList;
+			},
+
+			marginNumber() {
+				return Number(this.margin)
+			}
+		},
+		created() {
+			this.valueSync = Number(this.value || this.modelValue);
+			this._rateBoxLeft = 0
+			this._oldValue = null
+		},
+		mounted() {
+			setTimeout(() => {
+				this._getSize()
+			}, 100)
+			// #ifdef H5
+			this.PC = this.IsPC()
+			// #endif
+		},
+		methods: {
+			touchstart(e) {
+				// #ifdef H5
+				if (this.IsPC()) return
+				// #endif
+				if (this.readonly || this.disabled) return
+				const {
+					clientX,
+					screenX
+				} = e.changedTouches[0]
+				// TODO 做一下兼容，只有 Nvue 下才有 screenX，其他平台式 clientX
+				this._getRateCount(clientX || screenX)
+			},
+			touchmove(e) {
+				// #ifdef H5
+				if (this.IsPC()) return
+				// #endif
+				if (this.readonly || this.disabled || !this.touchable) return
+				const {
+					clientX,
+					screenX
+				} = e.changedTouches[0]
+				this._getRateCount(clientX || screenX)
+			},
+
+			/**
+			 * 兼容 PC @tian
+			 */
+
+			mousedown(e) {
+				// #ifdef H5
+				if (!this.IsPC()) return
+				if (this.readonly || this.disabled) return
+				const {
+					clientX,
+				} = e
+				this.userLastRate = this.valueSync
+				this._getRateCount(clientX)
+				this.userRated = true
+				// #endif
+			},
+			mousemove(e) {
+				// #ifdef H5
+				if (!this.IsPC()) return
+				if (this.userRated) return
+				if (this.userMouseFristMove) {
+					console.log('---mousemove----', this.valueSync);
+					this.userLastRate = this.valueSync
+					this.userMouseFristMove = false
+				}
+				if (this.readonly || this.disabled || !this.touchable) return
+				const {
+					clientX,
+				} = e
+				this._getRateCount(clientX)
+				// #endif
+			},
+			mouseleave(e) {
+				// #ifdef H5
+				if (!this.IsPC()) return
+				if (this.readonly || this.disabled || !this.touchable) return
+				if (this.userRated) {
+					this.userRated = false
+					return
+				}
+				this.valueSync = this.userLastRate
+				// #endif
+			},
+			// #ifdef H5
+			IsPC() {
+				var userAgentInfo = navigator.userAgent;
+				var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
+				var flag = true;
+				for (let v = 0; v < Agents.length - 1; v++) {
+					if (userAgentInfo.indexOf(Agents[v]) > 0) {
+						flag = false;
+						break;
+					}
+				}
+				return flag;
+			},
+			// #endif
+
+			/**
+			 * 获取星星个数
+			 */
+			_getRateCount(clientX) {
+				this._getSize()
+				const size = Number(this.size)
+				if (isNaN(size)) {
+					return new Error('size 属性只能设置为数字')
+				}
+				const rateMoveRange = clientX - this._rateBoxLeft
+				let index = parseInt(rateMoveRange / (size + this.marginNumber))
+				index = index < 0 ? 0 : index;
+				index = index > this.max ? this.max : index;
+				const range = parseInt(rateMoveRange - (size + this.marginNumber) * index);
+				let value = 0;
+				if (this._oldValue === index && !this.PC) return;
+				this._oldValue = index;
+				if (this.allowHalf) {
+					if (range > (size / 2)) {
+						value = index + 1
+					} else {
+						value = index + 0.5
+					}
+				} else {
+					value = index + 1
+				}
+
+				value = Math.max(0.5, Math.min(value, this.max))
+				this.valueSync = value
+				this._onChange()
+			},
+
+			/**
+			 * 触发动态修改
+			 */
+			_onChange() {
+
+				this.$emit("input", this.valueSync);
+				this.$emit("update:modelValue", this.valueSync);
+				this.$emit("change", {
+					value: this.valueSync
+				});
+			},
+			/**
+			 * 获取星星距离屏幕左侧距离
+			 */
+			_getSize() {
+				// #ifndef APP-NVUE
+				uni.createSelectorQuery()
+					.in(this)
+					.select('.uni-rate')
+					.boundingClientRect()
+					.exec(ret => {
+						if (ret) {
+							this._rateBoxLeft = ret[0].left
+						}
+					})
+				// #endif
+				// #ifdef APP-NVUE
+				dom.getComponentRect(this.$refs['uni-rate'], (ret) => {
+					const size = ret.size
+					if (size) {
+						this._rateBoxLeft = size.left
+					}
+				})
+				// #endif
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.uni-rate {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		line-height: 1;
+		font-size: 0;
+		flex-direction: row;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-rate__icon {
+		position: relative;
+		line-height: 1;
+		font-size: 0;
+	}
+
+	.uni-rate__icon-on {
+		overflow: hidden;
+		position: absolute;
+		top: 0;
+		left: 0;
+		line-height: 1;
+		text-align: left;
+	}
+
+	.uni-cursor-not-allowed {
+		/* #ifdef H5 */
+		cursor: not-allowed !important;
+		/* #endif */
+	}
+</style>
diff --git a/src/uni_modules/uni-rate/package.json b/src/uni_modules/uni-rate/package.json
new file mode 100644
index 00000000..64e8e332
--- /dev/null
+++ b/src/uni_modules/uni-rate/package.json
@@ -0,0 +1,88 @@
+{
+  "id": "uni-rate",
+  "displayName": "uni-rate 评分",
+  "version": "1.3.1",
+  "description": "Rate 评分组件，可自定义评分星星图标的大小、间隔、评分数。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "评分"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/src/uni_modules/uni-rate/readme.md b/src/uni_modules/uni-rate/readme.md
new file mode 100644
index 00000000..eae7b5ce
--- /dev/null
+++ b/src/uni_modules/uni-rate/readme.md
@@ -0,0 +1,12 @@
+
+
+## Rate 评分
+> **组件名：uni-rate**
+> 代码块： `uRate`
+> 关联组件：`uni-icons`
+
+
+评分组件，多用于购买商品后，对商品进行评价等场景
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-rate)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-row/changelog.md b/src/uni_modules/uni-row/changelog.md
new file mode 100644
index 00000000..5b465bc6
--- /dev/null
+++ b/src/uni_modules/uni-row/changelog.md
@@ -0,0 +1,10 @@
+## 1.0.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-row](https://uniapp.dcloud.io/component/uniui/uni-row)
+## 0.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 0.0.4（2021-05-12）
+- 新增 组件示例地址
+## 0.0.3（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增uni-row组件
diff --git a/src/uni_modules/uni-row/components/uni-col/uni-col.vue b/src/uni_modules/uni-row/components/uni-col/uni-col.vue
new file mode 100644
index 00000000..84e2deb4
--- /dev/null
+++ b/src/uni_modules/uni-row/components/uni-col/uni-col.vue
@@ -0,0 +1,317 @@
+<template>
+	<!-- #ifndef APP-NVUE -->
+	<view :class="['uni-col', sizeClass, pointClassList]" :style="{
+		paddingLeft:`${Number(gutter)}rpx`,
+		paddingRight:`${Number(gutter)}rpx`,
+	}">
+		<slot></slot>
+	</view>
+	<!-- #endif -->
+	<!-- #ifdef APP-NVUE -->
+	<!-- 在nvue上，类名样式不生效，换为style -->
+	<!-- 设置right正值失效，设置 left 负值 -->
+	<view :class="['uni-col']" :style="{
+		paddingLeft:`${Number(gutter)}rpx`,
+		paddingRight:`${Number(gutter)}rpx`,
+		width:`${nvueWidth}rpx`,
+		position:'relative',
+		marginLeft:`${marginLeft}rpx`,
+		left:`${right === 0 ? left : -right}rpx`
+	}">
+		<slot></slot>
+	</view>
+	<!-- #endif -->
+</template>
+
+<script>
+	/**
+	 * Col	布局-列
+	 * @description	搭配uni-row使用，构建布局。
+	 * @tutorial	https://ext.dcloud.net.cn/plugin?id=3958
+	 *
+	 * @property	{span} type = Number 栅格占据的列数
+	 * 						默认 24
+	 * @property	{offset} type = Number 栅格左侧的间隔格数
+	 * @property	{push} type = Number 栅格向右移动格数
+	 * @property	{pull} type = Number 栅格向左移动格数
+	 * @property	{xs} type = [Number, Object] <768px 响应式栅格数或者栅格属性对象
+	 * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+	 * @property	{sm} type = [Number, Object] ≥768px 响应式栅格数或者栅格属性对象
+	 * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+	 * @property	{md} type = [Number, Object] ≥992px 响应式栅格数或者栅格属性对象
+	 * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+	 * @property	{lg} type = [Number, Object] ≥1200px 响应式栅格数或者栅格属性对象
+	 * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+	 * @property	{xl} type = [Number, Object] ≥1920px 响应式栅格数或者栅格属性对象
+	 * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+	 */
+	const ComponentClass = 'uni-col';
+
+	// -1 默认值，因为在微信小程序端只给Number会有默认值0
+	export default {
+		name: 'uniCol',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现
+		},
+		// #endif
+		props: {
+			span: {
+				type: Number,
+				default: 24
+			},
+			offset: {
+				type: Number,
+				default: -1
+			},
+			pull: {
+				type: Number,
+				default: -1
+			},
+			push: {
+				type: Number,
+				default: -1
+			},
+			xs: [Number, Object],
+			sm: [Number, Object],
+			md: [Number, Object],
+			lg: [Number, Object],
+			xl: [Number, Object]
+		},
+		data() {
+			return {
+				gutter: 0,
+				sizeClass: '',
+				parentWidth: 0,
+				nvueWidth: 0,
+				marginLeft: 0,
+				right: 0,
+				left: 0
+			}
+		},
+		created() {
+			// 字节小程序中，在computed中读取$parent为undefined
+			let parent = this.$parent;
+
+			while (parent && parent.$options.componentName !== 'uniRow') {
+				parent = parent.$parent;
+			}
+
+			this.updateGutter(parent.gutter)
+			parent.$watch('gutter', (gutter) => {
+				this.updateGutter(gutter)
+			})
+
+			// #ifdef APP-NVUE
+			this.updateNvueWidth(parent.width)
+			parent.$watch('width', (width) => {
+				this.updateNvueWidth(width)
+			})
+			// #endif
+		},
+		computed: {
+			sizeList() {
+				let {
+					span,
+					offset,
+					pull,
+					push
+				} = this;
+
+				return {
+					span,
+					offset,
+					pull,
+					push
+				}
+			},
+			// #ifndef APP-NVUE
+			pointClassList() {
+				let classList = [];
+
+				['xs', 'sm', 'md', 'lg', 'xl'].forEach(point => {
+					const props = this[point];
+					if (typeof props === 'number') {
+						classList.push(`${ComponentClass}-${point}-${props}`)
+					} else if (typeof props === 'object' && props) {
+						Object.keys(props).forEach(pointProp => {
+							classList.push(
+								pointProp === 'span' ?
+								`${ComponentClass}-${point}-${props[pointProp]}` :
+								`${ComponentClass}-${point}-${pointProp}-${props[pointProp]}`
+							)
+						})
+					}
+				});
+
+				// 支付宝小程序使用 :class=[ ['a','b'] ]，渲染错误
+				return classList.join(' ');
+			}
+			// #endif
+		},
+		methods: {
+			updateGutter(parentGutter) {
+				parentGutter = Number(parentGutter);
+				if (!isNaN(parentGutter)) {
+					this.gutter = parentGutter / 2
+				}
+			},
+			// #ifdef APP-NVUE
+			updateNvueWidth(width) {
+				// 用于在nvue端，span，offset，pull，push的计算
+				this.parentWidth = width;
+				['span', 'offset', 'pull', 'push'].forEach(size => {
+					const curSize = this[size];
+					if ((curSize || curSize === 0) && curSize !== -1) {
+						let RPX = 1 / 24 * curSize * width
+						RPX = Number(RPX);
+						switch (size) {
+							case 'span':
+								this.nvueWidth = RPX
+								break;
+							case 'offset':
+								this.marginLeft = RPX
+								break;
+							case 'pull':
+								this.right = RPX
+								break;
+							case 'push':
+								this.left = RPX
+								break;
+						}
+					}
+				});
+			}
+			// #endif
+		},
+		watch: {
+			sizeList: {
+				immediate: true,
+				handler(newVal) {
+					// #ifndef APP-NVUE
+					let classList = [];
+					for (let size in newVal) {
+						const curSize = newVal[size];
+						if ((curSize || curSize === 0) && curSize !== -1) {
+							classList.push(
+								size === 'span' ?
+								`${ComponentClass}-${curSize}` :
+								`${ComponentClass}-${size}-${curSize}`
+							)
+						}
+					}
+					// 支付宝小程序使用 :class=[ ['a','b'] ]，渲染错误
+					this.sizeClass = classList.join(' ');
+					// #endif
+					// #ifdef APP-NVUE
+					this.updateNvueWidth(this.parentWidth);
+					// #endif
+				}
+			}
+		}
+	}
+</script>
+
+<style lang='scss' scoped>
+	/* breakpoints */
+	$--sm: 768px !default;
+	$--md: 992px !default;
+	$--lg: 1200px !default;
+	$--xl: 1920px !default;
+
+	$breakpoints: ('xs' : (max-width: $--sm - 1),
+	'sm' : (min-width: $--sm),
+	'md' : (min-width: $--md),
+	'lg' : (min-width: $--lg),
+	'xl' : (min-width: $--xl));
+
+	$layout-namespace: ".uni-";
+	$col: $layout-namespace+"col";
+
+	@function getSize($size) {
+		/* TODO 1/24 * $size * 100 * 1%; 使用计算后的值，为了解决 vue3 控制台报错 */
+		@return 0.04166666666 * $size * 100 * 1%;
+	}
+
+	@mixin res($key, $map:$breakpoints) {
+		@if map-has-key($map, $key) {
+			@media screen and #{inspect(map-get($map,$key))} {
+				@content;
+			}
+		}
+
+		@else {
+			@warn "Undeinfed point: `#{$key}`";
+		}
+	}
+
+	/* #ifndef APP-NVUE */
+	#{$col} {
+		float: left;
+		box-sizing: border-box;
+	}
+
+	#{$col}-0 {
+		/* #ifdef APP-NVUE */
+		width: 0;
+		height: 0;
+		margin-top: 0;
+		margin-right: 0;
+		margin-bottom: 0;
+		margin-left: 0;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		display: none;
+		/* #endif */
+	}
+
+	@for $i from 0 through 24 {
+		#{$col}-#{$i} {
+			width: getSize($i);
+		}
+
+		#{$col}-offset-#{$i} {
+			margin-left: getSize($i);
+		}
+
+		#{$col}-pull-#{$i} {
+			position: relative;
+			right: getSize($i);
+		}
+
+		#{$col}-push-#{$i} {
+			position: relative;
+			left: getSize($i);
+		}
+	}
+
+	@each $point in map-keys($breakpoints) {
+		@include res($point) {
+			#{$col}-#{$point}-0 {
+				display: none;
+			}
+
+			@for $i from 0 through 24 {
+				#{$col}-#{$point}-#{$i} {
+					width: getSize($i);
+				}
+
+				#{$col}-#{$point}-offset-#{$i} {
+					margin-left: getSize($i);
+				}
+
+				#{$col}-#{$point}-pull-#{$i} {
+					position: relative;
+					right: getSize($i);
+				}
+
+				#{$col}-#{$point}-push-#{$i} {
+					position: relative;
+					left: getSize($i);
+				}
+			}
+		}
+	}
+
+	/* #endif */
+</style>
diff --git a/src/uni_modules/uni-row/components/uni-row/uni-row.vue b/src/uni_modules/uni-row/components/uni-row/uni-row.vue
new file mode 100644
index 00000000..f8e85423
--- /dev/null
+++ b/src/uni_modules/uni-row/components/uni-row/uni-row.vue
@@ -0,0 +1,190 @@
+<template>
+	<view :class="[ 'uni-row', typeClass , justifyClass, alignClass, ]" :style="{
+		marginLeft:`${Number(marginValue)}rpx`,
+		marginRight:`${Number(marginValue)}rpx`,
+	}">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	const ComponentClass = 'uni-row';
+	const modifierSeparator = '--';
+	/**
+	 * Row	布局-行
+	 * @description	流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
+	 * @tutorial	https://ext.dcloud.net.cn/plugin?id=3958
+	 *
+	 * @property	{gutter} type = Number 栅格间隔
+	 * @property	{justify} type = String flex 布局下的水平排列方式
+	 * 						可选	start/end/center/space-around/space-between	start
+	 * 						默认值	start
+	 * @property	{align} type = String flex 布局下的垂直排列方式
+	 * 						可选	top/middle/bottom
+	 * 						默认值	top
+	 * @property	{width} type = String|Number nvue下需要自行配置宽度用于计算
+	 * 						默认值 750
+	 */
+
+
+	export default {
+		name: 'uniRow',
+		componentName: 'uniRow',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现，可使用flex布局
+		},
+		// #endif
+		props: {
+			type: String,
+			gutter: Number,
+			justify: {
+				type: String,
+				default: 'start'
+			},
+			align: {
+				type: String,
+				default: 'top'
+			},
+			// nvue如果使用span等属性，需要配置宽度
+			width: {
+				type: [String, Number],
+				default: 750
+			}
+		},
+		created() {
+			// #ifdef APP-NVUE
+			this.type = 'flex';
+			// #endif
+		},
+		computed: {
+			marginValue() {
+				// #ifndef APP-NVUE
+				if (this.gutter) {
+					return -(this.gutter / 2);
+				}
+				// #endif
+				return 0;
+			},
+			typeClass() {
+				return this.type === 'flex' ? `${ComponentClass + modifierSeparator}flex` : '';
+			},
+			justifyClass() {
+				return this.justify !== 'start' ? `${ComponentClass + modifierSeparator}flex-justify-${this.justify}` : ''
+			},
+			alignClass() {
+				return this.align !== 'top' ? `${ComponentClass + modifierSeparator}flex-align-${this.align}` : ''
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	$layout-namespace: ".uni-";
+	$row:$layout-namespace+"row";
+	$modifier-separator: "--";
+
+	@mixin utils-clearfix {
+		$selector: &;
+
+		@at-root {
+
+			/* #ifndef APP-NVUE */
+			#{$selector}::before,
+			#{$selector}::after {
+				display: table;
+				content: "";
+			}
+
+			#{$selector}::after {
+				clear: both;
+			}
+
+			/* #endif */
+		}
+
+	}
+
+	@mixin utils-flex ($direction: row) {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: $direction;
+	}
+
+	@mixin set-flex($state) {
+		@at-root &-#{$state} {
+			@content
+		}
+	}
+
+	#{$row} {
+		position: relative;
+		flex-direction: row;
+
+		/* #ifdef APP-NVUE */
+		flex: 1;
+		/* #endif */
+
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		/* #endif */
+
+		// 非nvue使用float布局
+		@include utils-clearfix;
+
+		// 在QQ、字节、百度小程序平台，编译后使用shadow dom，不可使用flex布局，使用float
+		@at-root {
+
+			/* #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU */
+			&#{$modifier-separator}flex {
+				@include utils-flex;
+				flex-wrap: wrap;
+				flex: 1;
+
+				&:before,
+				&:after {
+					/* #ifndef APP-NVUE */
+					display: none;
+					/* #endif */
+				}
+
+				@include set-flex(justify-center) {
+					justify-content: center;
+				}
+
+				@include set-flex(justify-end) {
+					justify-content: flex-end;
+				}
+
+				@include set-flex(justify-space-between) {
+					justify-content: space-between;
+				}
+
+				@include set-flex(justify-space-around) {
+					justify-content: space-around;
+				}
+
+				@include set-flex(align-middle) {
+					align-items: center;
+				}
+
+				@include set-flex(align-bottom) {
+					align-items: flex-end;
+				}
+			}
+
+			/* #endif */
+		}
+
+	}
+
+	// 字节、QQ配置后不生效
+	// 此处用法无法使用scoped
+	/* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */
+	:host {
+		display: block;
+	}
+
+	/* #endif */
+</style>
diff --git a/src/uni_modules/uni-row/package.json b/src/uni_modules/uni-row/package.json
new file mode 100644
index 00000000..3f52fa64
--- /dev/null
+++ b/src/uni_modules/uni-row/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-row",
+  "displayName": "uni-row 布局-行",
+  "version": "1.0.0",
+  "description": "流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "栅格",
+    "布局",
+    "layout"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-row/readme.md b/src/uni_modules/uni-row/readme.md
new file mode 100644
index 00000000..3c9c8b99
--- /dev/null
+++ b/src/uni_modules/uni-row/readme.md
@@ -0,0 +1,10 @@
+## Layout 布局
+
+> **组件名 uni-row、uni-col**
+> 代码块： `uRow`、`uCol`
+
+
+流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-row)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-scss/changelog.md b/src/uni_modules/uni-scss/changelog.md
new file mode 100644
index 00000000..b863bb0f
--- /dev/null
+++ b/src/uni_modules/uni-scss/changelog.md
@@ -0,0 +1,8 @@
+## 1.0.3（2022-01-21）
+- 优化 组件示例
+## 1.0.2（2021-11-22）
+- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
+## 1.0.1（2021-11-22）
+- 修复 vue3中scss语法兼容问题
+## 1.0.0（2021-11-18）
+- init
diff --git a/src/uni_modules/uni-scss/index.scss b/src/uni_modules/uni-scss/index.scss
new file mode 100644
index 00000000..1744a5f9
--- /dev/null
+++ b/src/uni_modules/uni-scss/index.scss
@@ -0,0 +1 @@
+@import './styles/index.scss';
diff --git a/src/uni_modules/uni-scss/manifest.json b/src/uni_modules/uni-scss/manifest.json
new file mode 100644
index 00000000..9f8baee3
--- /dev/null
+++ b/src/uni_modules/uni-scss/manifest.json
@@ -0,0 +1,95 @@
+{
+	"name" : "",
+	"appid" : "",
+	"description": "应用描述",
+	"versionName": "1.0.0",
+	"versionCode": "100",
+	"transformPx": false,
+	/* 5+App特有相关 */
+	"app-plus": {
+		"usingComponents": true,
+		"splashscreen": {
+			"alwaysShowBeforeRender": true,
+			"waiting": true,
+			"autoclose": true,
+			"delay": 0
+		},
+		"modules": {
+			"OAuth": {},
+			"Payment": {},
+			"Push": {},
+			"Share": {},
+			"Speech": {},
+			"VideoPlayer": {}
+		},
+		/* 应用发布信息 */
+		"distribute": {
+			/* android打包配置 */
+			"android": {
+				"permissions": [
+					"<uses-feature android:name=\"android.hardware.camera\"/>",
+					"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+					"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+					"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+					"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
+					"<uses-permission android:name=\"android.permission.ACCESS_MOCK_LOCATION\"/>",
+					"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
+					"<uses-permission android:name=\"android.permission.CAMERA\"/>",
+					"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+					"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+					"<uses-permission android:name=\"android.permission.GET_TASKS\"/>",
+					"<uses-permission android:name=\"android.permission.INTERNET\"/>",
+					"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
+					"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+					"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
+					"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+					"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.READ_SMS\"/>",
+					"<uses-permission android:name=\"android.permission.RECEIVE_BOOT_COMPLETED\"/>",
+					"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
+					"<uses-permission android:name=\"android.permission.SEND_SMS\"/>",
+					"<uses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\"/>",
+					"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+					"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+					"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
+					"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
+					"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
+					"<uses-permission android:name=\"android.permission.WRITE_SMS\"/>",
+					"<uses-permission android:name=\"android.permission.RECEIVE_USER_PRESENT\"/>"
+				]
+			},
+			/* ios打包配置 */
+			"ios": {
+				"UIBackgroundModes": ["audio"]
+			},
+			/* SDK配置 */
+			"sdkConfigs": {
+				"speech": {
+					"ifly": {}
+				}
+			},
+			"orientation": ["portrait-primary"]
+		}
+	},
+	/* 快应用特有相关 */
+	"quickapp": {},
+	/* 小程序特有相关 */
+	"mp-weixin": {
+		"appid": "",
+		"setting": {
+			"urlCheck": false
+		},
+		"usingComponents": true
+	},
+	"h5": {
+		"template": "template.h5.html",
+		"router": {
+			"mode": "history",
+			"base": "/h5/"
+		}
+	}
+}
diff --git a/src/uni_modules/uni-scss/package.json b/src/uni_modules/uni-scss/package.json
new file mode 100644
index 00000000..7cc0ccb7
--- /dev/null
+++ b/src/uni_modules/uni-scss/package.json
@@ -0,0 +1,82 @@
+{
+  "id": "uni-scss",
+  "displayName": "uni-scss 辅助样式",
+  "version": "1.0.3",
+  "description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
+  "keywords": [
+    "uni-scss",
+    "uni-ui",
+    "辅助样式"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "JS SDK",
+        "通用 SDK"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/src/uni_modules/uni-scss/readme.md b/src/uni_modules/uni-scss/readme.md
new file mode 100644
index 00000000..b7d1c25f
--- /dev/null
+++ b/src/uni_modules/uni-scss/readme.md
@@ -0,0 +1,4 @@
+`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-scss/styles/index.scss b/src/uni_modules/uni-scss/styles/index.scss
new file mode 100644
index 00000000..ffac4fec
--- /dev/null
+++ b/src/uni_modules/uni-scss/styles/index.scss
@@ -0,0 +1,7 @@
+@import './setting/_variables.scss';
+@import './setting/_border.scss';
+@import './setting/_color.scss';
+@import './setting/_space.scss';
+@import './setting/_radius.scss';
+@import './setting/_text.scss';
+@import './setting/_styles.scss';
diff --git a/src/uni_modules/uni-scss/styles/setting/_border.scss b/src/uni_modules/uni-scss/styles/setting/_border.scss
new file mode 100644
index 00000000..12a11c32
--- /dev/null
+++ b/src/uni_modules/uni-scss/styles/setting/_border.scss
@@ -0,0 +1,3 @@
+.uni-border {
+	border: 1px $uni-border-1 solid;
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-scss/styles/setting/_color.scss b/src/uni_modules/uni-scss/styles/setting/_color.scss
new file mode 100644
index 00000000..1ededd94
--- /dev/null
+++ b/src/uni_modules/uni-scss/styles/setting/_color.scss
@@ -0,0 +1,66 @@
+
+// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
+// @mixin get-styles($k,$c) {
+// 	@if $k == size or $k == weight{
+// 		font-#{$k}:#{$c}
+// 	}@else{
+// 		#{$k}:#{$c}
+// 	}
+// }
+$uni-ui-color:(
+	// 主色
+	primary: $uni-primary,
+	primary-disable: $uni-primary-disable,
+	primary-light: $uni-primary-light,
+	// 辅助色
+	success: $uni-success,
+	success-disable: $uni-success-disable,
+	success-light: $uni-success-light,
+	warning: $uni-warning,
+	warning-disable: $uni-warning-disable,
+	warning-light: $uni-warning-light,
+	error: $uni-error,
+	error-disable: $uni-error-disable,
+	error-light: $uni-error-light,
+	info: $uni-info,
+	info-disable: $uni-info-disable,
+	info-light: $uni-info-light,
+	// 中性色
+	main-color: $uni-main-color,
+	base-color: $uni-base-color,
+	secondary-color: $uni-secondary-color,
+	extra-color: $uni-extra-color,
+	// 背景色
+	bg-color: $uni-bg-color,
+	// 边框颜色
+	border-1: $uni-border-1,
+	border-2: $uni-border-2,
+	border-3: $uni-border-3,
+	border-4: $uni-border-4,
+	// 黑色
+	black:$uni-black,
+	// 白色
+	white:$uni-white,
+	// 透明
+	transparent:$uni-transparent
+) !default;
+@each $key, $child in $uni-ui-color {
+	.uni-#{"" + $key} {
+		color: $child;
+	}
+	.uni-#{"" + $key}-bg {
+		background-color: $child;
+	}
+}
+.uni-shadow-sm {
+	box-shadow: $uni-shadow-sm;
+}
+.uni-shadow-base {
+	box-shadow: $uni-shadow-base;
+}
+.uni-shadow-lg {
+	box-shadow: $uni-shadow-lg;
+}
+.uni-mask {
+	background-color:$uni-mask;
+}
diff --git a/src/uni_modules/uni-scss/styles/setting/_radius.scss b/src/uni_modules/uni-scss/styles/setting/_radius.scss
new file mode 100644
index 00000000..9a0428bb
--- /dev/null
+++ b/src/uni_modules/uni-scss/styles/setting/_radius.scss
@@ -0,0 +1,55 @@
+@mixin radius($r,$d:null ,$important: false){
+  $radius-value:map-get($uni-radius, $r) if($important, !important, null);
+  // Key exists within the $uni-radius variable
+  @if (map-has-key($uni-radius, $r) and  $d){
+		@if $d == t {
+				border-top-left-radius:$radius-value;
+				border-top-right-radius:$radius-value;
+		}@else if $d == r {
+				border-top-right-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == b {
+				border-bottom-left-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == l {
+				border-top-left-radius:$radius-value;
+				border-bottom-left-radius:$radius-value;
+		}@else if $d == tl {
+				border-top-left-radius:$radius-value;
+		}@else if $d == tr {
+				border-top-right-radius:$radius-value;
+		}@else if $d == br {
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == bl {
+				border-bottom-left-radius:$radius-value;
+		}
+  }@else{
+		border-radius:$radius-value;
+  }
+}
+
+@each $key, $child in $uni-radius {
+	@if($key){
+		.uni-radius-#{"" + $key} {
+				@include radius($key)
+		}
+	}@else{
+		.uni-radius {
+				@include radius($key)
+		}
+	}
+}
+
+@each $direction in t, r, b, l,tl, tr, br, bl {
+	@each $key, $child in $uni-radius {
+		@if($key){
+			.uni-radius-#{"" + $direction}-#{"" + $key} {
+				@include radius($key,$direction,false)
+			}
+		}@else{
+			.uni-radius-#{$direction} {
+				@include radius($key,$direction,false)
+			}
+		}
+	}
+}
diff --git a/src/uni_modules/uni-scss/styles/setting/_space.scss b/src/uni_modules/uni-scss/styles/setting/_space.scss
new file mode 100644
index 00000000..3c895289
--- /dev/null
+++ b/src/uni_modules/uni-scss/styles/setting/_space.scss
@@ -0,0 +1,56 @@
+
+@mixin fn($space,$direction,$size,$n) {
+	@if $n {
+		#{$space}-#{$direction}: #{$size*$uni-space-root}px
+	} @else {
+		 #{$space}-#{$direction}: #{-$size*$uni-space-root}px
+	}
+}
+@mixin get-styles($direction,$i,$space,$n){
+	@if $direction == t {
+		@include fn($space, top,$i,$n);
+	} 
+	@if $direction == r {
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == b {
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == l {
+	 @include fn($space, left,$i,$n);
+	} 
+	@if $direction == x {
+		@include fn($space, left,$i,$n);
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == y {
+		@include fn($space, top,$i,$n);
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == a {
+		@if $n {
+			#{$space}:#{$i*$uni-space-root}px;
+		} @else {
+			#{$space}:#{-$i*$uni-space-root}px;
+		}
+	} 
+}
+
+@each $orientation in m,p {
+	$space: margin;
+	@if $orientation == m {
+		$space: margin;
+	} @else {
+		$space: padding;
+	}
+	@for $i from 0 through 16 {
+		@each $direction in t, r, b, l, x, y, a {
+			.uni-#{$orientation}#{$direction}-#{$i} { 
+				@include  get-styles($direction,$i,$space,true);
+			} 
+			.uni-#{$orientation}#{$direction}-n#{$i} { 
+				@include  get-styles($direction,$i,$space,false);
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-scss/styles/setting/_styles.scss b/src/uni_modules/uni-scss/styles/setting/_styles.scss
new file mode 100644
index 00000000..689afec6
--- /dev/null
+++ b/src/uni_modules/uni-scss/styles/setting/_styles.scss
@@ -0,0 +1,167 @@
+/* #ifndef APP-NVUE */
+
+$-color-white:#fff;
+$-color-black:#000;
+@mixin base-style($color) {
+	color: #fff;
+	background-color: $color;
+	border-color: mix($-color-black, $color, 8%);
+	&:not([hover-class]):active {
+		background: mix($-color-black, $color, 10%);
+		border-color: mix($-color-black, $color, 20%);
+		color: $-color-white;
+		outline: none;
+	}
+}
+@mixin is-color($color) {
+	@include base-style($color);
+	&[loading] {
+		@include base-style($color);
+		&::before {
+			margin-right:5px;
+		}
+	}
+	&[disabled] {
+	  &,
+		&[loading],
+	  &:not([hover-class]):active {
+	    color: $-color-white;
+			border-color: mix(darken($color,10%), $-color-white);
+	    background-color: mix($color, $-color-white);
+	  }
+	}
+
+}
+@mixin base-plain-style($color) {
+	color:$color;
+	background-color: mix($-color-white, $color, 90%);
+	border-color: mix($-color-white, $color, 70%);
+	&:not([hover-class]):active {
+	  background: mix($-color-white, $color, 80%);
+	  color: $color;
+	  outline: none;
+		border-color: mix($-color-white, $color, 50%);
+	}
+}
+@mixin is-plain($color){
+	&[plain] {
+		@include base-plain-style($color);
+		&[loading] {
+			@include base-plain-style($color);
+			&::before {
+				margin-right:5px;
+			}
+		}
+		&[disabled] {
+		  &,
+		  &:active {
+		    color: mix($-color-white, $color, 40%);
+		    background-color: mix($-color-white, $color, 90%);
+				border-color: mix($-color-white, $color, 80%);
+		  }
+		}
+	}
+}
+
+
+.uni-btn {
+	margin: 5px;
+	color: #393939;
+	border:1px solid #ccc;
+	font-size: 16px;
+	font-weight: 200;
+	background-color: #F9F9F9;
+	// TODO 暂时处理边框隐藏一边的问题
+	overflow: visible;
+	&::after{
+		border: none;
+	}
+
+	&:not([type]),&[type=default] {
+		color: #999;
+		&[loading] {
+			background: none;
+			&::before {
+				margin-right:5px;
+			}
+		}
+
+
+
+		&[disabled]{
+			color: mix($-color-white, #999, 60%);
+		  &,
+			&[loading],
+		  &:active {
+				color: mix($-color-white, #999, 60%);
+		    background-color: mix($-color-white,$-color-black , 98%);
+				border-color: mix($-color-white,  #999, 85%);
+		  }
+		}
+
+		&[plain] {
+			color: #999;
+			background: none;
+			border-color: $uni-border-1;
+			&:not([hover-class]):active {
+				background: none;
+			  color: mix($-color-white, $-color-black, 80%);
+				border-color: mix($-color-white, $-color-black, 90%);
+			  outline: none;
+			}
+			&[disabled]{
+			  &,
+				&[loading],
+			  &:active {
+			    background: none;
+					color: mix($-color-white, #999, 60%);
+					border-color: mix($-color-white,  #999, 85%);
+			  }
+			}
+		}
+	}
+
+	&:not([hover-class]):active {
+	  color: mix($-color-white, $-color-black, 50%);
+	}
+
+	&[size=mini] {
+		font-size: 16px;
+		font-weight: 200;
+		border-radius: 8px;
+	}
+
+
+
+	&.uni-btn-small {
+		font-size: 14px;
+	}
+	&.uni-btn-mini {
+		font-size: 12px;
+	}
+
+	&.uni-btn-radius {
+		border-radius: 999px;
+	}
+	&[type=primary] {
+		@include is-color($uni-primary);
+		@include is-plain($uni-primary)
+	}
+	&[type=success] {
+		@include is-color($uni-success);
+		@include is-plain($uni-success)
+	}
+	&[type=error] {
+		@include is-color($uni-error);
+		@include is-plain($uni-error)
+	}
+	&[type=warning] {
+		@include is-color($uni-warning);
+		@include is-plain($uni-warning)
+	}
+	&[type=info] {
+		@include is-color($uni-info);
+		@include is-plain($uni-info)
+	}
+}
+/* #endif */
diff --git a/src/uni_modules/uni-scss/styles/setting/_text.scss b/src/uni_modules/uni-scss/styles/setting/_text.scss
new file mode 100644
index 00000000..a34d08f3
--- /dev/null
+++ b/src/uni_modules/uni-scss/styles/setting/_text.scss
@@ -0,0 +1,24 @@
+@mixin get-styles($k,$c) {
+	@if $k == size or $k == weight{
+		font-#{$k}:#{$c}
+	}@else{
+		#{$k}:#{$c}
+	}
+}
+
+@each $key, $child in $uni-headings {
+	/* #ifndef APP-NVUE */
+	.uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	.container .uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+}
diff --git a/src/uni_modules/uni-scss/styles/setting/_variables.scss b/src/uni_modules/uni-scss/styles/setting/_variables.scss
new file mode 100644
index 00000000..557d3d7c
--- /dev/null
+++ b/src/uni_modules/uni-scss/styles/setting/_variables.scss
@@ -0,0 +1,146 @@
+// @use "sass:math";
+@import  '../tools/functions.scss';
+// 间距基础倍数
+$uni-space-root: 2 !default;
+// 边框半径默认值
+$uni-radius-root:5px !default;
+$uni-radius: () !default;
+// 边框半径断点
+$uni-radius: map-deep-merge(
+  (
+    0: 0,
+		// TODO 当前版本暂时不支持 sm 属性
+    // 'sm': math.div($uni-radius-root, 2),
+    null: $uni-radius-root,
+    'lg': $uni-radius-root * 2,
+    'xl': $uni-radius-root * 6,
+    'pill': 9999px,
+    'circle': 50%
+  ),
+  $uni-radius
+);
+// 字体家族
+$body-font-family: 'Roboto', sans-serif !default;
+// 文本
+$heading-font-family: $body-font-family !default;
+$uni-headings: () !default;
+$letterSpacing: -0.01562em;
+$uni-headings: map-deep-merge(
+  (
+    'h1': (
+      size: 32px,
+			weight: 300,
+			line-height: 50px,
+			// letter-spacing:-0.01562em
+    ),
+    'h2': (
+      size: 28px,
+      weight: 300,
+      line-height: 40px,
+      // letter-spacing: -0.00833em
+    ),
+    'h3': (
+      size: 24px,
+      weight: 400,
+      line-height: 32px,
+      // letter-spacing: normal
+    ),
+    'h4': (
+      size: 20px,
+      weight: 400,
+      line-height: 30px,
+      // letter-spacing: 0.00735em
+    ),
+    'h5': (
+      size: 16px,
+      weight: 400,
+      line-height: 24px,
+      // letter-spacing: normal
+    ),
+    'h6': (
+      size: 14px,
+      weight: 500,
+      line-height: 18px,
+      // letter-spacing: 0.0125em
+    ),
+    'subtitle': (
+      size: 12px,
+      weight: 400,
+      line-height: 20px,
+      // letter-spacing: 0.00937em
+    ),
+    'body': (
+      font-size: 14px,
+			font-weight: 400,
+			line-height: 22px,
+			// letter-spacing: 0.03125em
+    ),
+    'caption': (
+      'size': 12px,
+      'weight': 400,
+      'line-height': 20px,
+      // 'letter-spacing': 0.03333em,
+      // 'text-transform': false
+    )
+  ),
+  $uni-headings
+);
+
+
+
+// 主色
+$uni-primary: #2979ff !default;
+$uni-primary-disable:lighten($uni-primary,20%) !default;
+$uni-primary-light: lighten($uni-primary,25%) !default;
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37 !default;
+$uni-success-disable:lighten($uni-success,20%) !default;
+$uni-success-light: lighten($uni-success,25%) !default;
+
+$uni-warning: #f3a73f !default;
+$uni-warning-disable:lighten($uni-warning,20%) !default;
+$uni-warning-light: lighten($uni-warning,25%) !default;
+
+$uni-error: #e43d33 !default;
+$uni-error-disable:lighten($uni-error,20%) !default;
+$uni-error-light: lighten($uni-error,25%) !default;
+
+$uni-info: #8f939c !default;
+$uni-info-disable:lighten($uni-info,20%) !default;
+$uni-info-light: lighten($uni-info,25%) !default;
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a !default; 			// 主要文字
+$uni-base-color: #6a6a6a !default;			// 常规文字
+$uni-secondary-color: #909399 !default;	// 次要文字
+$uni-extra-color: #c7c7c7 !default;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0 !default;
+$uni-border-2: #EDEDED !default;
+$uni-border-3: #DCDCDC !default;
+$uni-border-4: #B9B9B9 !default;
+
+// 常规色
+$uni-black: #000000 !default;
+$uni-white: #ffffff !default;
+$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
+
+// 背景色
+$uni-bg-color: #f7f7f7 !default;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px !default;
+$uni-spacing-base: 15px !default;
+$uni-spacing-lg: 30px !default;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
diff --git a/src/uni_modules/uni-scss/styles/tools/functions.scss b/src/uni_modules/uni-scss/styles/tools/functions.scss
new file mode 100644
index 00000000..ac6f63e5
--- /dev/null
+++ b/src/uni_modules/uni-scss/styles/tools/functions.scss
@@ -0,0 +1,19 @@
+// 合并 map
+@function map-deep-merge($parent-map, $child-map){
+	$result: $parent-map;
+	@each $key, $child in $child-map {
+		$parent-has-key: map-has-key($result, $key);
+		$parent-value: map-get($result, $key);
+		$parent-type: type-of($parent-value);
+		$child-type: type-of($child);
+		$parent-is-map: $parent-type == map;
+		$child-is-map: $child-type == map;
+			
+		@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
+			$result: map-merge($result, ( $key: $child ));
+		}@else {
+			$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
+		}
+	}
+	@return $result;
+};
diff --git a/src/uni_modules/uni-scss/theme.scss b/src/uni_modules/uni-scss/theme.scss
new file mode 100644
index 00000000..80ee62f7
--- /dev/null
+++ b/src/uni_modules/uni-scss/theme.scss
@@ -0,0 +1,31 @@
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+// 主色
+$uni-primary: #2979ff;
+// 辅助色
+$uni-success: #4cd964;
+// 警告色
+$uni-warning: #f0ad4e;
+// 错误色
+$uni-error: #dd524d;
+// 描述色
+$uni-info: #909399;
+// 中性色
+$uni-main-color: #303133;
+$uni-base-color: #606266;
+$uni-secondary-color: #909399;
+$uni-extra-color: #C0C4CC;
+// 背景色
+$uni-bg-color: #f5f5f5;
+// 边框颜色
+$uni-border-1: #DCDFE6;
+$uni-border-2: #E4E7ED;
+$uni-border-3: #EBEEF5;
+$uni-border-4: #F2F6FC;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);
diff --git a/src/uni_modules/uni-scss/variables.scss b/src/uni_modules/uni-scss/variables.scss
new file mode 100644
index 00000000..1c062d42
--- /dev/null
+++ b/src/uni_modules/uni-scss/variables.scss
@@ -0,0 +1,62 @@
+@import './styles/setting/_variables.scss';
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+
+// 主色
+$uni-primary: #2979ff;
+$uni-primary-disable:mix(#fff,$uni-primary,50%);
+$uni-primary-light: mix(#fff,$uni-primary,80%);
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37;
+$uni-success-disable:mix(#fff,$uni-success,50%);
+$uni-success-light: mix(#fff,$uni-success,80%);
+
+$uni-warning: #f3a73f;
+$uni-warning-disable:mix(#fff,$uni-warning,50%);
+$uni-warning-light: mix(#fff,$uni-warning,80%);
+
+$uni-error: #e43d33;
+$uni-error-disable:mix(#fff,$uni-error,50%);
+$uni-error-light: mix(#fff,$uni-error,80%);
+
+$uni-info: #8f939c;
+$uni-info-disable:mix(#fff,$uni-info,50%);
+$uni-info-light: mix(#fff,$uni-info,80%);
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a; 			// 主要文字
+$uni-base-color: #6a6a6a;			// 常规文字
+$uni-secondary-color: #909399;	// 次要文字
+$uni-extra-color: #c7c7c7;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0;
+$uni-border-2: #EDEDED;
+$uni-border-3: #DCDCDC;
+$uni-border-4: #B9B9B9;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);
+
+// 背景色
+$uni-bg-color: #f7f7f7;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px;
+$uni-spacing-base: 15px;
+$uni-spacing-lg: 30px;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4);
diff --git a/src/uni_modules/uni-search-bar/changelog.md b/src/uni_modules/uni-search-bar/changelog.md
new file mode 100644
index 00000000..b41fdd3b
--- /dev/null
+++ b/src/uni_modules/uni-search-bar/changelog.md
@@ -0,0 +1,33 @@
+## 1.2.3（2022-05-24）
+- 新增 readonly 属性，组件只读
+## 1.2.2（2022-05-06）
+- 修复  vue3 input 事件不生效的bug
+## 1.2.1（2022-05-06）
+- 修复 多余代码导致的bug
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-search-bar](https://uniapp.dcloud.io/component/uniui/uni-search-bar)
+## 1.1.2（2021-08-30）
+- 修复 value 属性与 modelValue 属性不兼容的Bug
+## 1.1.1（2021-08-24）
+- 新增 支持国际化
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.9（2021-05-12）
+- 新增 项目示例地址
+## 1.0.8（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.7（2021-04-15）
+- uni-ui 新增 uni-search-bar 的 focus 事件
+
+## 1.0.6（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.5（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增 支持双向绑定
+- 更改 input 事件的返回值，e={value:Number} --> e=value
+- 新增 支持图标插槽
+- 新增 支持 clear、blur 事件
+- 新增 支持 focus 属性
+- 去掉组件背景色
diff --git a/src/uni_modules/uni-search-bar/components/uni-search-bar/i18n/en.json b/src/uni_modules/uni-search-bar/components/uni-search-bar/i18n/en.json
new file mode 100644
index 00000000..dd083a53
--- /dev/null
+++ b/src/uni_modules/uni-search-bar/components/uni-search-bar/i18n/en.json
@@ -0,0 +1,4 @@
+{
+	"uni-search-bar.cancel": "cancel",
+	"uni-search-bar.placeholder": "Search enter content"
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-search-bar/components/uni-search-bar/i18n/index.js b/src/uni_modules/uni-search-bar/components/uni-search-bar/i18n/index.js
new file mode 100644
index 00000000..de7509c8
--- /dev/null
+++ b/src/uni_modules/uni-search-bar/components/uni-search-bar/i18n/index.js
@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/src/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hans.json b/src/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hans.json
new file mode 100644
index 00000000..d4e5c120
--- /dev/null
+++ b/src/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hans.json
@@ -0,0 +1,4 @@
+{
+	"uni-search-bar.cancel": "cancel",
+	"uni-search-bar.placeholder": "请输入搜索内容"
+}
diff --git a/src/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hant.json b/src/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hant.json
new file mode 100644
index 00000000..318b6ef1
--- /dev/null
+++ b/src/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hant.json
@@ -0,0 +1,4 @@
+{
+	"uni-search-bar.cancel": "cancel",
+	"uni-search-bar.placeholder": "請輸入搜索內容"
+}
diff --git a/src/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue b/src/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue
new file mode 100644
index 00000000..2befbcc7
--- /dev/null
+++ b/src/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue
@@ -0,0 +1,298 @@
+<template>
+	<view class="uni-searchbar">
+		<view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="uni-searchbar__box"
+			@click="searchClick">
+			<view class="uni-searchbar__box-icon-search">
+				<slot name="searchIcon">
+					<uni-icons color="#c0c4cc" size="18" type="search" />
+				</slot>
+			</view>
+			<input v-if="show || searchVal" :focus="showSync" :disabled="readonly" :placeholder="placeholderText" :maxlength="maxlength"
+				class="uni-searchbar__box-search-input" confirm-type="search" type="text" v-model="searchVal"
+				@confirm="confirm" @blur="blur" @focus="emitFocus" />
+			<text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
+			<view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='') &&!readonly"
+				class="uni-searchbar__box-icon-clear" @click="clear">
+				<slot name="clearIcon">
+					<uni-icons color="#c0c4cc" size="20" type="clear" />
+				</slot>
+			</view>
+		</view>
+		<text @click="cancel" class="uni-searchbar__cancel"
+			v-if="cancelButton ==='always' || show && cancelButton ==='auto'">{{cancelTextI18n}}</text>
+	</view>
+</template>
+
+<script>
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {
+		t
+	} = initVueI18n(messages)
+
+	/**
+	 * SearchBar 搜索栏
+	 * @description 搜索栏组件，通常用于搜索商品、文章等
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=866
+	 * @property {Number} radius 搜索栏圆角
+	 * @property {Number} maxlength 输入最大长度
+	 * @property {String} placeholder 搜索栏Placeholder
+	 * @property {String} clearButton = [always|auto|none] 是否显示清除按钮
+	 * 	@value always 一直显示
+	 * 	@value auto 输入框不为空时显示
+	 * 	@value none 一直不显示
+	 * @property {String} cancelButton = [always|auto|none] 是否显示取消按钮
+	 * 	@value always 一直显示
+	 * 	@value auto 输入框不为空时显示
+	 * 	@value none 一直不显示
+	 * @property {String} cancelText 取消按钮的文字
+	 * @property {String} bgColor 输入框背景颜色
+	 * @property {Boolean} focus 是否自动聚焦
+	 * @property {Boolean} readonly 组件只读，不能有任何操作，只做展示
+	 * @event {Function} confirm uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value，e={value:Number}
+	 * @event {Function} input uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value，e=value
+	 * @event {Function} cancel 点击取消按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+	 * @event {Function} clear 点击清除按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+	 * @event {Function} blur input失去焦点时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+	 */
+
+	export default {
+		name: "UniSearchBar",
+		emits: ['input', 'update:modelValue', 'clear', 'cancel', 'confirm', 'blur', 'focus'],
+		props: {
+			placeholder: {
+				type: String,
+				default: ""
+			},
+			radius: {
+				type: [Number, String],
+				default: 5
+			},
+			clearButton: {
+				type: String,
+				default: "auto"
+			},
+			cancelButton: {
+				type: String,
+				default: "auto"
+			},
+			cancelText: {
+				type: String,
+				default: '取消'
+			},
+			bgColor: {
+				type: String,
+				default: "#F8F8F8"
+			},
+			maxlength: {
+				type: [Number, String],
+				default: 100
+			},
+			value: {
+				type: [Number, String],
+				default: ""
+			},
+			modelValue: {
+				type: [Number, String],
+				default: ""
+			},
+			focus: {
+				type: Boolean,
+				default: false
+			},
+			readonly: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				show: false,
+				showSync: false,
+				searchVal: ''
+			}
+		},
+		computed: {
+			cancelTextI18n() {
+				return this.cancelText || t("uni-search-bar.cancel")
+			},
+			placeholderText() {
+				return this.placeholder || t("uni-search-bar.placeholder")
+			}
+		},
+		watch: {
+			// #ifndef VUE3
+			value: {
+				immediate: true,
+				handler(newVal) {
+					this.searchVal = newVal
+					if (newVal) {
+						this.show = true
+					}
+				}
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				immediate: true,
+				handler(newVal) {
+					this.searchVal = newVal
+					if (newVal) {
+						this.show = true
+					}
+				}
+			},
+			// #endif
+			focus: {
+				immediate: true,
+				handler(newVal) {
+					if (newVal) {
+						if(this.readonly) return
+						this.show = true;
+						this.$nextTick(() => {
+							this.showSync = true
+						})
+					}
+				}
+			},
+			searchVal(newVal, oldVal) {
+				this.$emit("input", newVal)
+				// #ifdef VUE3
+				this.$emit("update:modelValue", newVal)
+				// #endif
+			}
+		},
+		methods: {
+			searchClick() {
+				if(this.readonly) return
+				if (this.show) {
+					return
+				}
+				this.show = true;
+				this.$nextTick(() => {
+					this.showSync = true
+				})
+			},
+			clear() {
+				this.$emit("clear", {
+					value: this.searchVal
+				})
+				this.searchVal = ""
+			},
+			cancel() {
+				if(this.readonly) return
+				this.$emit("cancel", {
+					value: this.searchVal
+				});
+				this.searchVal = ""
+				this.show = false
+				this.showSync = false
+				// #ifndef APP-PLUS
+				uni.hideKeyboard()
+				// #endif
+				// #ifdef APP-PLUS
+				plus.key.hideSoftKeybord()
+				// #endif
+			},
+			confirm() {
+				// #ifndef APP-PLUS
+				uni.hideKeyboard();
+				// #endif
+				// #ifdef APP-PLUS
+				plus.key.hideSoftKeybord()
+				// #endif
+				this.$emit("confirm", {
+					value: this.searchVal
+				})
+			},
+			blur() {
+				// #ifndef APP-PLUS
+				uni.hideKeyboard();
+				// #endif
+				// #ifdef APP-PLUS
+				plus.key.hideSoftKeybord()
+				// #endif
+				this.$emit("blur", {
+					value: this.searchVal
+				})
+			},
+			emitFocus(e) {
+				this.$emit("focus", e.detail)
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	$uni-searchbar-height: 36px;
+
+	.uni-searchbar {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		position: relative;
+		padding: 5px;
+		// background-color: #fff;
+	}
+
+	.uni-searchbar__box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		box-sizing: border-box;
+		/* #endif */
+		overflow: hidden;
+		position: relative;
+		flex: 1;
+		// justify-content: center;
+		flex-direction: row;
+		align-items: center;
+		height: $uni-searchbar-height;
+		padding: 5px 8px 5px 0px;
+	}
+
+	.uni-searchbar__box-icon-search {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		// width: 32px;
+		padding: 0 8px;
+		justify-content: center;
+		align-items: center;
+		color: #B3B3B3;
+	}
+
+	.uni-searchbar__box-search-input {
+		flex: 1;
+		font-size: 14px;
+		color: #333;
+	}
+
+	.uni-searchbar__box-icon-clear {
+		align-items: center;
+		line-height: 24px;
+		padding-left: 8px;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-searchbar__text-placeholder {
+		font-size: 14px;
+		color: #B3B3B3;
+		margin-left: 5px;
+	}
+
+	.uni-searchbar__cancel {
+		padding-left: 10px;
+		line-height: $uni-searchbar-height;
+		font-size: 14px;
+		color: #333333;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+</style>
diff --git a/src/uni_modules/uni-search-bar/package.json b/src/uni_modules/uni-search-bar/package.json
new file mode 100644
index 00000000..9352c574
--- /dev/null
+++ b/src/uni_modules/uni-search-bar/package.json
@@ -0,0 +1,89 @@
+{
+  "id": "uni-search-bar",
+  "displayName": "uni-search-bar 搜索栏",
+  "version": "1.2.3",
+  "description": "搜索栏组件，通常用于搜索商品、文章等",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "搜索框",
+    "搜索栏"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-search-bar/readme.md b/src/uni_modules/uni-search-bar/readme.md
new file mode 100644
index 00000000..253092f0
--- /dev/null
+++ b/src/uni_modules/uni-search-bar/readme.md
@@ -0,0 +1,14 @@
+
+
+## SearchBar 搜索栏
+
+> **组件名：uni-search-bar**
+> 代码块： `uSearchBar`
+
+
+搜索栏组件
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-search-bar)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/src/uni_modules/uni-segmented-control/changelog.md b/src/uni_modules/uni-segmented-control/changelog.md
new file mode 100644
index 00000000..a44385d7
--- /dev/null
+++ b/src/uni_modules/uni-segmented-control/changelog.md
@@ -0,0 +1,9 @@
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-segmented-control](https://uniapp.dcloud.io/component/uniui/uni-segmented-control)
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.5（2021-05-12）
+- 新增 项目示例地址
+## 1.0.4（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue b/src/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue
new file mode 100644
index 00000000..044a4951
--- /dev/null
+++ b/src/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue
@@ -0,0 +1,145 @@
+<template>
+	<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]"
+		:style="{ borderColor: styleType === 'text' ? '' : activeColor }" class="segmented-control">
+		<view v-for="(item, index) in values" :class="[ styleType === 'text' ? '': 'segmented-control__item--button',
+		index === currentIndex&&styleType === 'button' ? 'segmented-control__item--button--active': '',
+		index === 0&&styleType === 'button' ? 'segmented-control__item--button--first': '',
+			index === values.length - 1&&styleType === 'button' ? 'segmented-control__item--button--last': '' ]" :key="index"
+			:style="{ backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?activeColor:'transparent' }"
+			class="segmented-control__item" @click="_onClick(index)">
+			<view>
+				<text :style="{color:
+				    index === currentIndex
+				      ? styleType === 'text'
+				        ? activeColor
+				        : '#fff'
+				      : styleType === 'text'
+				        ? '#000'
+				        : activeColor}" class="segmented-control__text" :class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text': ''">{{ item }}</text>
+			</view>
+
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * SegmentedControl 分段器
+	 * @description 用作不同视图的显示
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=54
+	 * @property {Number} current 当前选中的tab索引值，从0计数
+	 * @property {String} styleType = [button|text] 分段器样式类型
+	 * 	@value button 按钮类型
+	 * 	@value text 文字类型
+	 * @property {String} activeColor 选中的标签背景色与边框颜色
+	 * @property {Array} values 选项数组
+	 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
+	 */
+
+	export default {
+		name: 'UniSegmentedControl',
+		emits: ['clickItem'],
+		props: {
+			current: {
+				type: Number,
+				default: 0
+			},
+			values: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			activeColor: {
+				type: String,
+				default: '#2979FF'
+			},
+			styleType: {
+				type: String,
+				default: 'button'
+			}
+		},
+		data() {
+			return {
+				currentIndex: 0
+			}
+		},
+		watch: {
+			current(val) {
+				if (val !== this.currentIndex) {
+					this.currentIndex = val
+				}
+			}
+		},
+		created() {
+			this.currentIndex = this.current
+		},
+		methods: {
+			_onClick(index) {
+				if (this.currentIndex !== index) {
+					this.currentIndex = index
+					this.$emit('clickItem', {
+						currentIndex: index
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.segmented-control {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		box-sizing: border-box;
+		/* #endif */
+		flex-direction: row;
+		height: 36px;
+		overflow: hidden;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.segmented-control__item {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		box-sizing: border-box;
+		/* #endif */
+		position: relative;
+		flex: 1;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.segmented-control__item--button {
+		border-style: solid;
+		border-top-width: 1px;
+		border-bottom-width: 1px;
+		border-right-width: 1px;
+		border-left-width: 0;
+	}
+
+	.segmented-control__item--button--first {
+		border-left-width: 1px;
+		border-top-left-radius: 5px;
+		border-bottom-left-radius: 5px;
+	}
+
+	.segmented-control__item--button--last {
+		border-top-right-radius: 5px;
+		border-bottom-right-radius: 5px;
+	}
+
+	.segmented-control__item--text {
+		border-bottom-style: solid;
+		border-bottom-width: 2px;
+		padding: 6px 0;
+	}
+
+	.segmented-control__text {
+		font-size: 14px;
+		line-height: 20px;
+		text-align: center;
+	}
+</style>
diff --git a/src/uni_modules/uni-segmented-control/package.json b/src/uni_modules/uni-segmented-control/package.json
new file mode 100644
index 00000000..6cae41db
--- /dev/null
+++ b/src/uni_modules/uni-segmented-control/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-segmented-control",
+  "displayName": "uni-segmented-control 分段器",
+  "version": "1.2.0",
+  "description": "分段器由至少 2 个分段控件组成，用作不同视图的显示",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "分段器",
+    "segement",
+    "顶部选择"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-segmented-control/readme.md b/src/uni_modules/uni-segmented-control/readme.md
new file mode 100644
index 00000000..3527b03f
--- /dev/null
+++ b/src/uni_modules/uni-segmented-control/readme.md
@@ -0,0 +1,13 @@
+
+
+## SegmentedControl 分段器
+> **组件名：uni-segmented-control**
+> 代码块： `uSegmentedControl`
+
+
+用作不同视图的显示
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-segmented-control)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/src/uni_modules/uni-steps/changelog.md b/src/uni_modules/uni-steps/changelog.md
new file mode 100644
index 00000000..cb9d3679
--- /dev/null
+++ b/src/uni_modules/uni-steps/changelog.md
@@ -0,0 +1,16 @@
+## 1.1.1（2021-11-22）
+- 修复 vue3中某些scss变量无法找到的问题
+## 1.1.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-steps](https://uniapp.dcloud.io/component/uniui/uni-steps)
+## 1.0.8（2021-05-12）
+- 新增 项目示例地址
+## 1.0.7（2021-05-06）
+- 修复 uni-steps 横向布局时，多行文字高度不合理的 bug
+## 1.0.6（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.5（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.4（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-steps/components/uni-steps/uni-steps.vue b/src/uni_modules/uni-steps/components/uni-steps/uni-steps.vue
new file mode 100644
index 00000000..a6c8f287
--- /dev/null
+++ b/src/uni_modules/uni-steps/components/uni-steps/uni-steps.vue
@@ -0,0 +1,269 @@
+<template>
+	<view class="uni-steps">
+		<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
+			<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
+				<view v-for="(item,index) in options" :key="index"
+					:class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
+					<text :style="{color:index === active?activeColor:deactiveColor}"
+						:class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
+					<text :style="{color: deactiveColor}"
+						:class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
+				</view>
+			</view>
+			<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
+				<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']"
+					v-for="(item,index) in options" :key="index">
+					<view
+						:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
+						:style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}">
+					</view>
+					<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']"
+						v-if="index === active">
+						<uni-icons :color="activeColor" :type="activeIcon" size="14"></uni-icons>
+					</view>
+					<view v-else :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']"
+						:style="{backgroundColor:index<active?activeColor:deactiveColor}"></view>
+					<view
+						:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
+						:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}">
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Steps 步骤条
+	 * @description 评分组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=34
+	 * @property {Number} active 当前步骤
+	 * @property {String} direction = [row|column] 当前步骤
+	 * 	@value row 横向
+	 * 	@value column 纵向
+	 * @property {String} activeColor 选中状态的颜色
+	 * @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
+	 */
+
+	export default {
+		name: 'UniSteps',
+		props: {
+			direction: {
+				// 排列方向 row column
+				type: String,
+				default: 'row'
+			},
+			activeColor: {
+				// 激活状态颜色
+				type: String,
+				default: '#2979FF'
+			},
+			deactiveColor: {
+				// 未激活状态颜色
+				type: String,
+				default: '#B7BDC6'
+			},
+			active: {
+				// 当前步骤
+				type: Number,
+				default: 0
+			},
+			activeIcon: {
+				// 当前步骤
+				type: String,
+				default: 'checkbox-filled'
+			},
+			options: {
+				type: Array,
+				default () {
+					return []
+				}
+			} // 数据
+		},
+		data() {
+			return {}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-primary: #2979ff !default;
+	$uni-border-color:#EDEDED;
+	.uni-steps {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		width: 100%;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		flex: 1;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-steps__row {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-steps__column {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row-reverse;
+	}
+
+	.uni-steps__row-text-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: flex-end;
+		margin-bottom: 8px;
+	}
+
+	.uni-steps__column-text-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		flex: 1;
+	}
+
+	.uni-steps__row-text {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: column;
+	}
+
+	.uni-steps__column-text {
+		padding: 6px 0px;
+		border-bottom-style: solid;
+		border-bottom-width: 1px;
+		border-bottom-color: $uni-border-color;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-steps__row-title {
+		font-size: 14px;
+		line-height: 16px;
+		text-align: center;
+	}
+
+	.uni-steps__column-title {
+		font-size: 14px;
+		text-align: left;
+		line-height: 18px;
+	}
+
+	.uni-steps__row-desc {
+		font-size: 12px;
+		line-height: 14px;
+		text-align: center;
+	}
+
+	.uni-steps__column-desc {
+		font-size: 12px;
+		text-align: left;
+		line-height: 18px;
+	}
+
+	.uni-steps__row-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-steps__column-container {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		width: 30px;
+		flex-direction: column;
+	}
+
+	.uni-steps__row-line-item {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		flex-direction: row;
+		flex: 1;
+		height: 14px;
+		line-height: 14px;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.uni-steps__column-line-item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		flex: 1;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.uni-steps__row-line {
+		flex: 1;
+		height: 1px;
+		background-color: #B7BDC6;
+	}
+
+	.uni-steps__column-line {
+		width: 1px;
+		background-color: #B7BDC6;
+	}
+
+	.uni-steps__row-line--after {
+		transform: translateX(1px);
+	}
+
+	.uni-steps__column-line--after {
+		flex: 1;
+		transform: translate(0px, 1px);
+	}
+
+	.uni-steps__row-line--before {
+		transform: translateX(-1px);
+	}
+
+	.uni-steps__column-line--before {
+		height: 6px;
+		transform: translate(0px, -13px);
+	}
+
+	.uni-steps__row-circle {
+		width: 5px;
+		height: 5px;
+		border-radius: 50%;
+		background-color: #B7BDC6;
+		margin: 0px 3px;
+	}
+
+	.uni-steps__column-circle {
+		width: 5px;
+		height: 5px;
+		border-radius: 50%;
+		background-color: #B7BDC6;
+		margin: 4px 0px 5px 0px;
+	}
+
+	.uni-steps__row-check {
+		margin: 0px 6px;
+	}
+
+	.uni-steps__column-check {
+		height: 14px;
+		line-height: 14px;
+		margin: 2px 0px;
+	}
+</style>
diff --git a/src/uni_modules/uni-steps/package.json b/src/uni_modules/uni-steps/package.json
new file mode 100644
index 00000000..c687b40a
--- /dev/null
+++ b/src/uni_modules/uni-steps/package.json
@@ -0,0 +1,89 @@
+{
+  "id": "uni-steps",
+  "displayName": "uni-steps 步骤条",
+  "version": "1.1.1",
+  "description": "步骤条组件，提供横向和纵向两种布局格式。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "步骤条",
+    "时间轴"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-steps/readme.md b/src/uni_modules/uni-steps/readme.md
new file mode 100644
index 00000000..da7a4bfa
--- /dev/null
+++ b/src/uni_modules/uni-steps/readme.md
@@ -0,0 +1,13 @@
+
+
+## Steps 步骤条
+> **组件名：uni-steps**
+> 代码块： `uSteps`
+
+
+步骤条，常用于显示进度
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-steps)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/src/uni_modules/uni-swiper-dot/changelog.md b/src/uni_modules/uni-swiper-dot/changelog.md
new file mode 100644
index 00000000..85cf54d2
--- /dev/null
+++ b/src/uni_modules/uni-swiper-dot/changelog.md
@@ -0,0 +1,12 @@
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-swiper-dot](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.6（2021-05-12）
+- 新增 示例地址
+- 修复 示例项目缺少组件的Bug
+## 1.0.5（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增 clickItem 事件，支持指示点控制轮播
+- 新增 支持 pc 可用
diff --git a/src/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue b/src/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
new file mode 100644
index 00000000..e66b6c7a
--- /dev/null
+++ b/src/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
@@ -0,0 +1,218 @@
+<template>
+	<view class="uni-swiper__warp">
+		<slot />
+		<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/2 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
+			 :key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
+		</view>
+		<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item" />
+		</view>
+		<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{
+		    'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item " />
+		</view>
+		<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
+			<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text>
+		</view>
+		<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+	/**
+	 * SwiperDod 轮播图指示点
+	 * @description 自定义轮播图指示点
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=284
+	 * @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`
+	 * @property {String} mode = [default|round|nav|indexes] 指示点的类型
+	 * 	@value defualt 默认指示点
+	 * 	@value round 圆形指示点
+	 * 	@value nav 条形指示点
+	 * 	@value indexes 索引指示点
+	 * @property {String} field mode 为 nav 时，显示的内容字段（mode = nav 时必填）
+	 * @property {String} info 轮播图的数据，通过数组长度决定指示点个数
+	 * @property {Object} dotsStyles 指示点样式
+	 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
+	 */
+
+	export default {
+		name: 'UniSwiperDot',
+		emits:['clickItem'],
+		props: {
+			info: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			current: {
+				type: Number,
+				default: 0
+			},
+			dotsStyles: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 类型 ：default(默认) indexes long nav
+			mode: {
+				type: String,
+				default: 'default'
+			},
+			// 只在 nav 模式下生效，变量名称
+			field: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				dots: {
+					width: 6,
+					height: 6,
+					bottom: 10,
+					color: '#fff',
+					backgroundColor: 'rgba(0, 0, 0, .3)',
+					border: '1px rgba(0, 0, 0, .3) solid',
+					selectedBackgroundColor: '#333',
+					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
+				}
+			}
+		},
+		watch: {
+			dotsStyles(newVal) {
+				this.dots = Object.assign(this.dots, this.dotsStyles)
+			},
+			mode(newVal) {
+				if (newVal === 'indexes') {
+					this.dots.width = 14
+					this.dots.height = 14
+				} else {
+					this.dots.width = 6
+					this.dots.height = 6
+				}
+			}
+
+		},
+		created() {
+			if (this.mode === 'indexes') {
+				this.dots.width = 12
+				this.dots.height = 12
+			}
+			this.dots = Object.assign(this.dots, this.dotsStyles)
+		},
+		methods: {
+			clickItem(index) {
+				this.$emit('clickItem', index)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-swiper__warp {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: column;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.uni-swiper__dots-box {
+		position: absolute;
+		bottom: 10px;
+		left: 0;
+		right: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-swiper__dots-item {
+		width: 8px;
+		border-radius: 100px;
+		margin-left: 6px;
+		background-color: rgba(0, 0, 0, 0.4);
+		/* #ifndef APP-NVUE */
+		cursor: pointer;
+		/* #endif */
+		/* #ifdef H5 */
+		// border-width: 5px 0;
+		// border-style: solid;
+		// border-color: transparent;
+		// background-clip: padding-box;
+		/* #endif */
+		// transition: width 0.2s linear;  不要取消注释，不然会不能变色
+	}
+
+	.uni-swiper__dots-item:first-child {
+		margin: 0;
+	}
+
+	.uni-swiper__dots-default {
+		border-radius: 100px;
+	}
+
+	.uni-swiper__dots-long {
+		border-radius: 50px;
+	}
+
+	.uni-swiper__dots-bar {
+		border-radius: 50px;
+	}
+
+	.uni-swiper__dots-nav {
+		bottom: 0px;
+		// height: 26px;
+		padding: 8px 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		background-color: rgba(0, 0, 0, 0.2);
+	}
+
+	.uni-swiper__dots-nav-item {
+		/* overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; */
+		font-size: 14px;
+		color: #fff;
+		margin: 0 15px;
+	}
+
+	.uni-swiper__dots-indexes {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		// flex: 1;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-swiper__dots-indexes-text {
+		color: #fff;
+		font-size: 12px;
+		line-height: 14px;
+	}
+</style>
diff --git a/src/uni_modules/uni-swiper-dot/package.json b/src/uni_modules/uni-swiper-dot/package.json
new file mode 100644
index 00000000..f2dd8d2a
--- /dev/null
+++ b/src/uni_modules/uni-swiper-dot/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-swiper-dot",
+  "displayName": "uni-swiper-dot 轮播图指示点",
+  "version": "1.2.0",
+  "description": "自定义轮播图指示点组件",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "轮播图指示点",
+    "dot",
+    "swiper"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-swiper-dot/readme.md b/src/uni_modules/uni-swiper-dot/readme.md
new file mode 100644
index 00000000..7d397e2c
--- /dev/null
+++ b/src/uni_modules/uni-swiper-dot/readme.md
@@ -0,0 +1,11 @@
+
+
+## SwiperDot 轮播图指示点
+> **组件名：uni-swiper-dot**
+> 代码块： `uSwiperDot`
+
+
+自定义轮播图指示点
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/uni-tag/changelog.md b/src/uni_modules/uni-tag/changelog.md
new file mode 100644
index 00000000..c0c5839b
--- /dev/null
+++ b/src/uni_modules/uni-tag/changelog.md
@@ -0,0 +1,21 @@
+## 2.1.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-tag](https://uniapp.dcloud.io/component/uniui/uni-tag)
+## 2.0.0（2021-11-09）
+- 新增 提供组件设计资源，组件样式调整
+- 移除 插槽
+- 移除 type 属性的 royal 选项
+## 1.1.1（2021-08-11）
+- type 不是 default 时，size 为 small 字体大小显示不正确
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-06-18）
+- 修复 uni-tag 在字节跳动小程序上 css 类名编译错误的 bug
+## 1.0.6（2021-06-04）
+- 修复 未定义 sass 变量 "$uni-color-royal" 的bug
+## 1.0.5（2021-05-10）
+- 修复 royal 类型无效的bug
+- 修复 uni-tag 宽度不自适应的bug
+- 新增 uni-tag 支持属性 custom-style 自定义样式
+## 1.0.4（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-tag/components/uni-tag/uni-tag.vue b/src/uni_modules/uni-tag/components/uni-tag/uni-tag.vue
new file mode 100644
index 00000000..418c9550
--- /dev/null
+++ b/src/uni_modules/uni-tag/components/uni-tag/uni-tag.vue
@@ -0,0 +1,252 @@
+<template>
+	<text class="uni-tag" v-if="text" :class="classes" :style="customStyle" @click="onClick">{{text}}</text>
+</template>
+
+<script>
+	/**
+	 * Tag 标签
+	 * @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=35
+	 * @property {String} text 标签内容
+	 * @property {String} size = [default|small|mini] 大小尺寸
+	 * 	@value default 正常
+	 * 	@value small 小尺寸
+	 * 	@value mini 迷你尺寸
+	 * @property {String} type = [default|primary|success｜warning｜error]  颜色类型
+	 * 	@value default 灰色
+	 * 	@value primary 蓝色
+	 * 	@value success 绿色
+	 * 	@value warning 黄色
+	 * 	@value error 红色
+	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
+	 * @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
+	 * @property {Boolean} circle = [true|false] 是否为圆角
+	 * @event {Function} click 点击 Tag 触发事件
+	 */
+
+	export default {
+		name: "UniTag",
+		emits: ['click'],
+		props: {
+			type: {
+				// 标签类型default、primary、success、warning、error、royal
+				type: String,
+				default: "default"
+			},
+			size: {
+				// 标签大小 normal, small
+				type: String,
+				default: "normal"
+			},
+			// 标签内容
+			text: {
+				type: String,
+				default: ""
+			},
+			disabled: {
+				// 是否为禁用状态
+				type: [Boolean, String],
+				default: false
+			},
+			inverted: {
+				// 是否为空心
+				type: [Boolean, String],
+				default: false
+			},
+			circle: {
+				// 是否为圆角样式
+				type: [Boolean, String],
+				default: false
+			},
+			mark: {
+				// 是否为标记样式
+				type: [Boolean, String],
+				default: false
+			},
+			customStyle: {
+				type: String,
+				default: ''
+			}
+		},
+		computed: {
+			classes() {
+				const {
+					type,
+					disabled,
+					inverted,
+					circle,
+					mark,
+					size,
+					isTrue
+				} = this
+				const classArr = [
+					'uni-tag--' + type,
+					'uni-tag--' + size,
+					isTrue(disabled) ? 'uni-tag--disabled' : '',
+					isTrue(inverted) ? 'uni-tag--' + type + '--inverted' : '',
+					isTrue(circle) ? 'uni-tag--circle' : '',
+					isTrue(mark) ? 'uni-tag--mark' : '',
+					// type === 'default' ? 'uni-tag--default' : 'uni-tag-text',
+					isTrue(inverted) ? 'uni-tag--inverted uni-tag-text--' + type : '',
+					size === 'small' ? 'uni-tag-text--small' : ''
+				]
+				// 返回类的字符串，兼容字节小程序
+				return classArr.join(' ')
+			}
+		},
+		methods: {
+			isTrue(value) {
+				return value === true || value === 'true'
+			},
+			onClick() {
+				if (this.isTrue(this.disabled)) return
+				this.$emit("click");
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	$uni-primary: #2979ff !default;
+	$uni-success: #18bc37 !default;
+	$uni-warning: #f3a73f !default;
+	$uni-error: #e43d33 !default;
+	$uni-info: #8f939c !default;
+
+
+	$tag-default-pd: 4px 7px;
+	$tag-small-pd: 2px 5px;
+	$tag-mini-pd: 1px 3px;
+
+	.uni-tag {
+		line-height: 14px;
+		font-size: 12px;
+		font-weight: 200;
+		padding: $tag-default-pd;
+		color: #fff;
+		border-radius: 3px;
+		background-color: $uni-info;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: $uni-info;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+
+		// size attr
+		&--default {
+			font-size: 12px;
+		}
+
+		&--default--inverted {
+			color: $uni-info;
+			border-color: $uni-info;
+		}
+
+		&--small {
+			padding: $tag-small-pd;
+			font-size: 12px;
+			border-radius: 2px;
+		}
+
+		&--mini {
+			padding: $tag-mini-pd;
+			font-size: 12px;
+			border-radius: 2px;
+		}
+
+		// type attr
+		&--primary {
+			background-color: $uni-primary;
+			border-color: $uni-primary;
+			color: #fff;
+		}
+
+		&--success {
+			color: #fff;
+			background-color: $uni-success;
+			border-color: $uni-success;
+		}
+
+		&--warning {
+			color: #fff;
+			background-color: $uni-warning;
+			border-color: $uni-warning;
+		}
+
+		&--error {
+			color: #fff;
+			background-color: $uni-error;
+			border-color: $uni-error;
+		}
+
+		&--primary--inverted {
+			color: $uni-primary;
+			border-color: $uni-primary;
+		}
+
+		&--success--inverted {
+			color: $uni-success;
+			border-color: $uni-success;
+		}
+
+		&--warning--inverted {
+			color: $uni-warning;
+			border-color: $uni-warning;
+		}
+
+		&--error--inverted {
+			color: $uni-error;
+			border-color: $uni-error;
+		}
+
+		&--inverted {
+			background-color: #fff;
+		}
+
+		// other attr
+		&--circle {
+			border-radius: 15px !important;
+		}
+
+		&--mark {
+			border-top-left-radius: 0 !important;
+			border-bottom-left-radius: 0 !important;
+			border-top-right-radius: 15px !important;
+			border-bottom-right-radius: 15px !important;
+		}
+
+		&--disabled {
+			opacity: 0.5;
+			/* #ifdef H5 */
+			cursor: not-allowed;
+			/* #endif */
+		}
+	}
+
+
+	.uni-tag-text {
+		color: #fff;
+		font-size: 14px;
+
+		&--primary {
+			color: $uni-primary;
+		}
+
+		&--success {
+			color: $uni-success;
+		}
+
+		&--warning {
+			color: $uni-warning;
+		}
+
+		&--error {
+			color: $uni-error;
+		}
+
+		&--small {
+			font-size: 12px;
+		}
+	}
+</style>
diff --git a/src/uni_modules/uni-tag/package.json b/src/uni_modules/uni-tag/package.json
new file mode 100644
index 00000000..18780886
--- /dev/null
+++ b/src/uni_modules/uni-tag/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-tag",
+  "displayName": "uni-tag 标签",
+  "version": "2.1.0",
+  "description": "Tag 组件，用于展示1个或多个文字标签，可点击切换选中、不选中的状态。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "",
+    "tag",
+    "标签"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-tag/readme.md b/src/uni_modules/uni-tag/readme.md
new file mode 100644
index 00000000..6e78ff5e
--- /dev/null
+++ b/src/uni_modules/uni-tag/readme.md
@@ -0,0 +1,13 @@
+
+
+## Tag 标签
+> **组件名：uni-tag**
+> 代码块： `uTag`
+
+
+用于展示1个或多个文字标签，可点击切换选中、不选中的状态 。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-tag)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/src/uni_modules/uni-title/changelog.md b/src/uni_modules/uni-title/changelog.md
new file mode 100644
index 00000000..76262165
--- /dev/null
+++ b/src/uni_modules/uni-title/changelog.md
@@ -0,0 +1,10 @@
+## 1.1.1（2022-05-19）
+- 修改组件描述
+## 1.1.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-title](https://uniapp.dcloud.io/component/uniui/uni-title)
+## 1.0.2（2021-05-12）
+- 新增 示例地址
+- 修复 示例项目缺少组件的Bug
+## 1.0.1（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/src/uni_modules/uni-title/components/uni-title/uni-title.vue b/src/uni_modules/uni-title/components/uni-title/uni-title.vue
new file mode 100644
index 00000000..bf4f9265
--- /dev/null
+++ b/src/uni_modules/uni-title/components/uni-title/uni-title.vue
@@ -0,0 +1,171 @@
+<template>
+	<view class="uni-title__box" :style="{'align-items':textAlign}">
+		<text class="uni-title__base" :class="['uni-'+type]" :style="{'color':color}">{{title}}</text>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Title 标题
+	 * @description 标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=1066
+	 * @property {String} type = [h1|h2|h3|h4|h5] 标题类型
+	 * 	@value h1 一级标题
+	 * 	@value h2 二级标题
+	 * 	@value h3 三级标题
+	 * 	@value h4 四级标题
+	 * 	@value h5 五级标题
+	 * @property {String} title 标题内容
+	 * @property {String} align = [left|center|right] 对齐方式
+	 * 	@value left 做对齐
+	 * 	@value center 居中对齐
+	 * 	@value right 右对齐
+	 * @property {String} color 字体颜色
+	 * @property {Boolean} stat = [true|false] 是否开启统计功能呢，如不填写type值，默认为开启，填写 type 属性，默认为关闭
+	 */
+	export default {
+		name:"UniTitle",
+		props: {
+			type: {
+				type: String,
+				default: ''
+			},
+			title: {
+				type: String,
+				default: ''
+			},
+			align: {
+				type: String,
+				default: 'left'
+			},
+			color: {
+				type: String,
+				default: '#333333'
+			},
+			stat: {
+				type: [Boolean, String],
+				default: ''
+			}
+		},
+		data() {
+			return {
+
+			};
+		},
+		computed: {
+			textAlign() {
+				let align = 'center';
+				switch (this.align) {
+					case 'left':
+						align = 'flex-start'
+						break;
+					case 'center':
+						align = 'center'
+						break;
+					case 'right':
+						align = 'flex-end'
+						break;
+				}
+				return align
+			}
+		},
+		watch: {
+			title(newVal) {
+				if (this.isOpenStat()) {
+					// 上报数据
+					if (uni.report) {
+						uni.report('title', this.title)
+					}
+				}
+			}
+		},
+		mounted() {
+			if (this.isOpenStat()) {
+				// 上报数据
+				if (uni.report) {
+					uni.report('title', this.title)
+				}
+			}
+		},
+		methods: {
+			isOpenStat() {
+				if (this.stat === '') {
+					this.isStat = false
+				}
+				let stat_type = (typeof(this.stat) === 'boolean' && this.stat) || (typeof(this.stat) === 'string' && this.stat !==
+					'')
+				if (this.type === "") {
+					this.isStat = true
+					if (this.stat.toString() === 'false') {
+						this.isStat = false
+					}
+				}
+
+				if (this.type !== '') {
+					this.isStat = true
+					if (stat_type) {
+						this.isStat = true
+					} else {
+						this.isStat = false
+					}
+				}
+				return this.isStat
+			}
+		}
+	}
+</script>
+
+<style>
+	/* .uni-title {
+
+	} */
+	.uni-title__box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: center;
+		padding: 8px 0;
+		flex: 1;
+	}
+
+	.uni-title__base {
+		font-size: 15px;
+		color: #333;
+		font-weight: 500;
+	}
+
+	.uni-h1 {
+		font-size: 20px;
+		color: #333;
+		font-weight: bold;
+	}
+
+	.uni-h2 {
+		font-size: 18px;
+		color: #333;
+		font-weight: bold;
+	}
+
+	.uni-h3 {
+		font-size: 16px;
+		color: #333;
+		font-weight: bold;
+		/* font-weight: 400; */
+	}
+
+	.uni-h4 {
+		font-size: 14px;
+		color: #333;
+		font-weight: bold;
+		/* font-weight: 300; */
+	}
+
+	.uni-h5 {
+		font-size: 12px;
+		color: #333;
+		font-weight: bold;
+		/* font-weight: 200; */
+	}
+</style>
diff --git a/src/uni_modules/uni-title/package.json b/src/uni_modules/uni-title/package.json
new file mode 100644
index 00000000..2249f5a1
--- /dev/null
+++ b/src/uni_modules/uni-title/package.json
@@ -0,0 +1,88 @@
+{
+  "id": "uni-title",
+  "displayName": "uni-title 章节标题",
+  "version": "1.1.1",
+  "description": "章节标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "标题",
+    "章节",
+    "章节标题",
+    ""
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-title/readme.md b/src/uni_modules/uni-title/readme.md
new file mode 100644
index 00000000..0e60b1b9
--- /dev/null
+++ b/src/uni_modules/uni-title/readme.md
@@ -0,0 +1,14 @@
+
+
+## Title 标题
+> **组件名：uni-title**
+> 代码块： `uTitle`
+
+
+章节标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题 。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-title)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
+
diff --git a/src/uni_modules/uni-tooltip/changelog.md b/src/uni_modules/uni-tooltip/changelog.md
new file mode 100644
index 00000000..00f1572d
--- /dev/null
+++ b/src/uni_modules/uni-tooltip/changelog.md
@@ -0,0 +1,10 @@
+## 0.2.1（2022-05-09）
+- 修复 content 为空时仍然弹出的bug
+## 0.2.0（2022-05-07）
+**注意：破坏性更新**
+- 更新 text 属性变更为 content
+- 更新 移除 width 属性
+## 0.1.1（2022-04-27）
+- 修复 组件根 text 嵌套组件 warning
+## 0.1.0（2022-04-21）
+- 初始化
diff --git a/src/uni_modules/uni-tooltip/components/uni-tooltip/uni-tooltip.vue b/src/uni_modules/uni-tooltip/components/uni-tooltip/uni-tooltip.vue
new file mode 100644
index 00000000..ffbb6fa5
--- /dev/null
+++ b/src/uni_modules/uni-tooltip/components/uni-tooltip/uni-tooltip.vue
@@ -0,0 +1,68 @@
+<template>
+	<view class="uni-tooltip">
+		<slot></slot>
+		<view v-if="content || $slots.content" class="uni-tooltip-popup">
+			<slot name="content">
+				{{content}}
+			</slot>
+		</view>
+	</view>
+</template>
+
+
+<script>
+	/**
+	 * Tooltip 提示文字
+	 * @description 常用于展示鼠标 hover 时的提示信息。
+	 * @tutorial https://uniapp.dcloud.io/component/uniui/uni-tooltip
+	 * @property {String} content   弹出层显示的内容
+	 * @property {String}  placement出现位置, 目前只支持 left
+	 */
+
+
+	export default {
+		name: "uni-tooltip",
+		data() {
+			return {
+
+			};
+		},
+		props: {
+			content: {
+				type: String,
+				default: ''
+			},
+
+			placement: {
+				type: String,
+				default: 'bottom'
+			},
+		}
+	}
+</script>
+
+<style>
+	.uni-tooltip {
+		position: relative;
+		cursor: pointer;
+	}
+
+	.uni-tooltip-popup {
+		z-index: 1;
+		display: none;
+		position: absolute;
+		left: 0;
+		background-color: #333;
+		border-radius: 8px;
+		color: #fff;
+		font-size: 12px;
+		text-align: left;
+		line-height: 16px;
+		padding: 12px;
+	}
+
+
+	.uni-tooltip:hover .uni-tooltip-popup {
+		display: block;
+	}
+</style>
diff --git a/src/uni_modules/uni-tooltip/package.json b/src/uni_modules/uni-tooltip/package.json
new file mode 100644
index 00000000..b626efb8
--- /dev/null
+++ b/src/uni_modules/uni-tooltip/package.json
@@ -0,0 +1,83 @@
+{
+  "id": "uni-tooltip",
+  "displayName": "uni-tooltip",
+  "version": "0.2.1",
+  "description": "Tooltip 提示文字",
+  "keywords": [
+    "uni-tooltip",
+    "uni-ui",
+    "tooltip",
+    "tip",
+    "文字提示"
+],
+  "repository": "",
+"engines": {
+  },
+  "dcloudext": {
+    "category": [
+        "前端组件",
+        "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无 ",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-tooltip/readme.md b/src/uni_modules/uni-tooltip/readme.md
new file mode 100644
index 00000000..faafa2ec
--- /dev/null
+++ b/src/uni_modules/uni-tooltip/readme.md
@@ -0,0 +1,8 @@
+## Badge 数字角标
+> **组件名：uni-tooltip**
+> 代码块： `uTooltip`
+
+数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景，
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-tooltip)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
diff --git a/src/uni_modules/uni-transition/changelog.md b/src/uni_modules/uni-transition/changelog.md
new file mode 100644
index 00000000..b1a824b8
--- /dev/null
+++ b/src/uni_modules/uni-transition/changelog.md
@@ -0,0 +1,20 @@
+## 1.3.1（2021-11-23）
+- 修复 init 方法初始化问题
+## 1.3.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition)
+## 1.2.1（2021-09-27）
+- 修复 init 方法不生效的 Bug
+## 1.2.0（2021-07-30）
+- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.1（2021-05-12）
+- 新增 示例地址
+- 修复 示例项目缺少组件的 Bug
+## 1.1.0（2021-04-22）
+- 新增 通过方法自定义动画
+- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
+- 优化 动画触发逻辑，使动画更流畅
+- 优化 支持单独的动画类型
+- 优化 文档示例
+## 1.0.2（2021-02-05）
+- 调整为 uni_modules 目录规范
diff --git a/src/uni_modules/uni-transition/components/uni-transition/createAnimation.js b/src/uni_modules/uni-transition/components/uni-transition/createAnimation.js
new file mode 100644
index 00000000..5f54365e
--- /dev/null
+++ b/src/uni_modules/uni-transition/components/uni-transition/createAnimation.js
@@ -0,0 +1,128 @@
+// const defaultOption = {
+// 	duration: 300,
+// 	timingFunction: 'linear',
+// 	delay: 0,
+// 	transformOrigin: '50% 50% 0'
+// }
+// #ifdef APP-NVUE
+const nvueAnimation = uni.requireNativePlugin('animation')
+// #endif
+class MPAnimation {
+	constructor(options, _this) {
+		this.options = options
+		this.animation = uni.createAnimation(options)
+		this.currentStepAnimates = {}
+		this.next = 0
+		this.$ = _this
+
+	}
+
+	_nvuePushAnimates(type, args) {
+		let aniObj = this.currentStepAnimates[this.next]
+		let styles = {}
+		if (!aniObj) {
+			styles = {
+				styles: {},
+				config: {}
+			}
+		} else {
+			styles = aniObj
+		}
+		if (animateTypes1.includes(type)) {
+			if (!styles.styles.transform) {
+				styles.styles.transform = ''
+			}
+			let unit = ''
+			if(type === 'rotate'){
+				unit = 'deg'
+			}
+			styles.styles.transform += `${type}(${args+unit}) `
+		} else {
+			styles.styles[type] = `${args}`
+		}
+		this.currentStepAnimates[this.next] = styles
+	}
+	_animateRun(styles = {}, config = {}) {
+		let ref = this.$.$refs['ani'].ref
+		if (!ref) return
+		return new Promise((resolve, reject) => {
+			nvueAnimation.transition(ref, {
+				styles,
+				...config
+			}, res => {
+				resolve()
+			})
+		})
+	}
+
+	_nvueNextAnimate(animates, step = 0, fn) {
+		let obj = animates[step]
+		if (obj) {
+			let {
+				styles,
+				config
+			} = obj
+			this._animateRun(styles, config).then(() => {
+				step += 1
+				this._nvueNextAnimate(animates, step, fn)
+			})
+		} else {
+			this.currentStepAnimates = {}
+			typeof fn === 'function' && fn()
+			this.isEnd = true
+		}
+	}
+
+	step(config = {}) {
+		// #ifndef APP-NVUE
+		this.animation.step(config)
+		// #endif
+		// #ifdef APP-NVUE
+		this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
+		this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
+		this.next++
+		// #endif
+		return this
+	}
+
+	run(fn) {
+		// #ifndef APP-NVUE
+		this.$.animationData = this.animation.export()
+		this.$.timer = setTimeout(() => {
+			typeof fn === 'function' && fn()
+		}, this.$.durationTime)
+		// #endif
+		// #ifdef APP-NVUE
+		this.isEnd = false
+		let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
+		if(!ref) return
+		this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
+		this.next = 0
+		// #endif
+	}
+}
+
+
+const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
+	'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
+	'translateZ'
+]
+const animateTypes2 = ['opacity', 'backgroundColor']
+const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
+animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
+	MPAnimation.prototype[type] = function(...args) {
+		// #ifndef APP-NVUE
+		this.animation[type](...args)
+		// #endif
+		// #ifdef APP-NVUE
+		this._nvuePushAnimates(type, args)
+		// #endif
+		return this
+	}
+})
+
+export function createAnimation(option, _this) {
+	if(!_this) return
+	clearTimeout(_this.timer)
+	return new MPAnimation(option, _this)
+}
diff --git a/src/uni_modules/uni-transition/components/uni-transition/uni-transition.vue b/src/uni_modules/uni-transition/components/uni-transition/uni-transition.vue
new file mode 100644
index 00000000..2d570302
--- /dev/null
+++ b/src/uni_modules/uni-transition/components/uni-transition/uni-transition.vue
@@ -0,0 +1,299 @@
+<template>
+	<view
+		v-if="isShow"
+		ref="ani"
+		:animation="animationData"
+		:class="customClass"
+		:style="transformStyles"
+		@click="onClick"
+	>
+		<slot></slot>
+	</view>
+	  <!-- #ifdef MP -->
+  <view v-else style="display: none">
+    <slot></slot>
+  </view>
+  <!-- #endif -->
+</template>
+
+<script>
+import { createAnimation } from './createAnimation';
+
+/**
+ * Transition 过渡动画
+ * @description 简单过渡动画组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=985
+ * @property {Boolean} show = [false|true] 控制组件显示或隐藏
+ * @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
+ *  @value fade 渐隐渐出过渡
+ *  @value slide-top 由上至下过渡
+ *  @value slide-right 由右至左过渡
+ *  @value slide-bottom 由下至上过渡
+ *  @value slide-left 由左至右过渡
+ *  @value zoom-in 由小到大过渡
+ *  @value zoom-out 由大到小过渡
+ * @property {Number} duration 过渡动画持续时间
+ * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
+ */
+export default {
+	name: 'uniTransition',
+	emits: ['click', 'change'],
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
+		modeClass: {
+			type: [Array, String],
+			default() {
+				return 'fade';
+			}
+		},
+		duration: {
+			type: Number,
+			default: 300
+		},
+		styles: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		customClass: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			isShow: false,
+			transform: '',
+			opacity: 1,
+			animationData: {},
+			durationTime: 300,
+			config: {}
+		};
+	},
+	watch: {
+		show: {
+			handler(newVal) {
+				if (newVal) {
+					this.open();
+				} else {
+					// 避免上来就执行 close,导致动画错乱
+					if (this.isShow) {
+						this.close();
+					}
+				}
+			},
+			immediate: true
+		}
+	},
+	computed: {
+		// 生成样式数据
+		stylesObject() {
+			let styles = {
+				...this.styles,
+				'transition-duration': this.duration / 1000 + 's'
+			};
+			let transform = '';
+			for (let i in styles) {
+				let line = this.toLine(i);
+				transform += line + ':' + styles[i] + ';';
+			}
+			return transform;
+		},
+		// 初始化动画条件
+		transformStyles() {
+			return (
+				'transform:' +
+				this.transform +
+				';' +
+				'opacity:' +
+				this.opacity +
+				';' +
+				this.stylesObject
+			);
+		}
+	},
+	created() {
+		// 动画默认配置
+		this.config = {
+			duration: this.duration,
+			timingFunction: 'ease',
+			transformOrigin: '50% 50%',
+			delay: 0
+		};
+		this.durationTime = this.duration;
+	},
+	methods: {
+		/**
+		 *  ref 触发 初始化动画
+		 */
+		init(obj = {}) {
+			if (obj.duration) {
+				this.durationTime = obj.duration;
+			}
+			this.animation = createAnimation(Object.assign(this.config, obj), this);
+		},
+		/**
+		 * 点击组件触发回调
+		 */
+		onClick() {
+			this.$emit('click', {
+				detail: this.isShow
+			});
+		},
+		/**
+		 * ref 触发 动画分组
+		 * @param {Object} obj
+		 */
+		step(obj, config = {}) {
+			if (!this.animation) return;
+			for (let i in obj) {
+				try {
+					if (typeof obj[i] === 'object') {
+						this.animation[i](...obj[i]);
+					} else {
+						this.animation[i](obj[i]);
+					}
+				} catch (e) {
+					console.error(`方法 ${i} 不存在`);
+				}
+			}
+			this.animation.step(config);
+			return this;
+		},
+		/**
+		 *  ref 触发 执行动画
+		 */
+		run(fn) {
+			if (!this.animation) return;
+			this.animation.run(fn);
+		},
+		// 开始过度动画
+		open() {
+			clearTimeout(this.timer);
+			this.transform = '';
+			this.isShow = true;
+			let { opacity, transform } = this.styleInit(false);
+			if (typeof opacity !== 'undefined') {
+				this.opacity = opacity;
+			}
+			this.transform = transform;
+			// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
+			this.$nextTick(() => {
+				// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
+				this.timer = setTimeout(() => {
+					this.animation = createAnimation(this.config, this);
+					this.tranfromInit(false).step();
+					this.animation.run();
+					this.$emit('change', {
+						detail: this.isShow
+					});
+				}, 20);
+			});
+		},
+		// 关闭过度动画
+		close(type) {
+			if (!this.animation) return;
+			this.tranfromInit(true)
+				.step()
+				.run(() => {
+					this.isShow = false;
+					this.animationData = null;
+					this.animation = null;
+					let { opacity, transform } = this.styleInit(false);
+					this.opacity = opacity || 1;
+					this.transform = transform;
+					this.$emit('change', {
+						detail: this.isShow
+					});
+				});
+		},
+		// 处理动画开始前的默认样式
+		styleInit(type) {
+			let styles = {
+				transform: ''
+			};
+			let buildStyle = (type, mode) => {
+				if (mode === 'fade') {
+					styles.opacity = this.animationType(type)[mode];
+				} else {
+					styles.transform += this.animationType(type)[mode] + ' ';
+				}
+			};
+			if (typeof this.modeClass === 'string') {
+				buildStyle(type, this.modeClass);
+			} else {
+				this.modeClass.forEach(mode => {
+					buildStyle(type, mode);
+				});
+			}
+			return styles;
+		},
+		// 处理内置组合动画
+		tranfromInit(type) {
+			let buildTranfrom = (type, mode) => {
+				let aniNum = null;
+				if (mode === 'fade') {
+					aniNum = type ? 0 : 1;
+				} else {
+					aniNum = type ? '-100%' : '0';
+					if (mode === 'zoom-in') {
+						aniNum = type ? 0.8 : 1;
+					}
+					if (mode === 'zoom-out') {
+						aniNum = type ? 1.2 : 1;
+					}
+					if (mode === 'slide-right') {
+						aniNum = type ? '100%' : '0';
+					}
+					if (mode === 'slide-bottom') {
+						aniNum = type ? '100%' : '0';
+					}
+				}
+				this.animation[this.animationMode()[mode]](aniNum);
+			};
+			if (typeof this.modeClass === 'string') {
+				buildTranfrom(type, this.modeClass);
+			} else {
+				this.modeClass.forEach(mode => {
+					buildTranfrom(type, mode);
+				});
+			}
+
+			return this.animation;
+		},
+		animationType(type) {
+			return {
+				fade: type ? 1 : 0,
+				'slide-top': `translateY(${type ? '0' : '-100%'})`,
+				'slide-right': `translateX(${type ? '0' : '100%'})`,
+				'slide-bottom': `translateY(${type ? '0' : '100%'})`,
+				'slide-left': `translateX(${type ? '0' : '-100%'})`,
+				'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
+				'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
+			};
+		},
+		// 内置动画类型与实际动画对应字典
+		animationMode() {
+			return {
+				fade: 'opacity',
+				'slide-top': 'translateY',
+				'slide-right': 'translateX',
+				'slide-bottom': 'translateY',
+				'slide-left': 'translateX',
+				'zoom-in': 'scale',
+				'zoom-out': 'scale'
+			};
+		},
+		// 驼峰转中横线
+		toLine(name) {
+			return name.replace(/([A-Z])/g, '-$1').toLowerCase();
+		}
+	}
+};
+</script>
+
+<style></style>
diff --git a/src/uni_modules/uni-transition/package.json b/src/uni_modules/uni-transition/package.json
new file mode 100644
index 00000000..d15fdf01
--- /dev/null
+++ b/src/uni_modules/uni-transition/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-transition",
+  "displayName": "uni-transition 过渡动画",
+  "version": "1.3.1",
+  "description": "元素的简单过渡动画",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "动画",
+    "过渡",
+    "过渡动画"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/uni-transition/readme.md b/src/uni_modules/uni-transition/readme.md
new file mode 100644
index 00000000..2f8a77e1
--- /dev/null
+++ b/src/uni_modules/uni-transition/readme.md
@@ -0,0 +1,11 @@
+
+
+## Transition 过渡动画
+> **组件名：uni-transition**
+> 代码块： `uTransition`
+
+
+元素过渡动画
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/src/uni_modules/z-paging/types/comps.d.ts b/src/uni_modules/z-paging/types/comps.d.ts
new file mode 100644
index 00000000..1b2cd45a
--- /dev/null
+++ b/src/uni_modules/z-paging/types/comps.d.ts
@@ -0,0 +1,11 @@
+declare module 'vue' {
+  export interface GlobalComponents {
+    ['z-paging']: typeof import('./comps/z-paging')['ZPaging']
+    ['z-paging-swiper']: typeof import('./comps/z-paging-swiper')['ZPagingSwiper']
+    ['z-paging-swiper-item']: typeof import('./comps/z-paging-swiper-item')['ZPagingSwiperItem']
+    ['z-paging-empty-view']: typeof import('./comps/z-paging-empty-view')['ZPagingEmptyView']
+    ['z-paging-cell']: typeof import('./comps/z-paging-cell')['ZPagingCell']
+  }
+}
+
+export {}
diff --git a/src/uni_modules/z-paging/types/comps/_common.d.ts b/src/uni_modules/z-paging/types/comps/_common.d.ts
new file mode 100644
index 00000000..03cb1055
--- /dev/null
+++ b/src/uni_modules/z-paging/types/comps/_common.d.ts
@@ -0,0 +1,9 @@
+export interface AllowedComponentProps {
+  class?: unknown;
+  style?: unknown;
+}
+
+export interface VNodeProps {
+  key?: string | number | symbol;
+  ref?: unknown;
+}
diff --git a/src/uni_modules/z-paging/types/comps/z-paging-cell.d.ts b/src/uni_modules/z-paging/types/comps/z-paging-cell.d.ts
new file mode 100644
index 00000000..3be9e329
--- /dev/null
+++ b/src/uni_modules/z-paging/types/comps/z-paging-cell.d.ts
@@ -0,0 +1,29 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+// ****************************** Props ******************************
+declare interface ZPagingCellProps {
+  /**
+   * z-paging-cell样式
+   */
+  cellStyle?: Record<string, any>
+}
+
+// ****************************** Slots ******************************
+declare interface ZPagingCellSlots {
+  // ******************** 主体布局Slot ********************
+  /**
+   * 默认插入的view
+   */
+  ['default']?: () => any
+}
+
+declare interface _ZPagingCell {
+  new (): {
+    $props: AllowedComponentProps &
+      VNodeProps &
+      ZPagingCellProps
+    $slots: ZPagingCellSlots
+  }
+}
+
+export declare const ZPagingCell: _ZPagingCell
diff --git a/src/uni_modules/z-paging/types/comps/z-paging-empty-view.d.ts b/src/uni_modules/z-paging/types/comps/z-paging-empty-view.d.ts
new file mode 100644
index 00000000..b180d0da
--- /dev/null
+++ b/src/uni_modules/z-paging/types/comps/z-paging-empty-view.d.ts
@@ -0,0 +1,95 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+// ****************************** Props ******************************
+declare interface ZPagingEmptyViewProps {
+  /**
+   * 空数据图片是否铺满z-paging，默认为是。若设置为否，则为填充满z-paging的剩余部分
+   * @default false
+   * @since 2.0.3
+   */
+  emptyViewFixed?: boolean;
+
+  /**
+   * 空数据图描述文字
+   * @default "没有数据哦~"
+   */
+  emptyViewText?: string;
+
+  /**
+   * 空数据图图片，默认使用z-paging内置的图片
+   * - 建议使用绝对路径，开头不要添加"@"，请以"/"开头
+   */
+  emptyViewImg?: string;
+
+  /**
+   * 空数据图点击重新加载文字
+   * @default "重新加载"
+   * @since 1.6.7
+   */
+  emptyViewReloadText?: string;
+
+  /**
+   * 空数据图样式，可设置空数据view的top等
+   * - 如果空数据图不是fixed布局，则此处是`margin-top`
+   */
+  emptyViewStyle?: Record<string, any>;
+
+  /**
+   * 空数据图img样式
+   */
+  emptyViewImgStyle?: Record<string, any>;
+
+  /**
+   * 空数据图描述文字样式
+   */
+  emptyViewTitleStyle?: Record<string, any>;
+
+  /**
+   * 空数据图重新加载按钮样式
+   * @since 1.6.7
+   */
+  emptyViewReloadStyle?: Record<string, any>;
+
+  /**
+   * 是否显示空数据图重新加载按钮(无数据时)
+   * @default false
+   * @since 1.6.7
+   */
+  showEmptyViewReload?: boolean;
+
+  /**
+   * 是否是加载失败
+   * @default false
+   */
+  isLoadFailed?: boolean;
+
+  /**
+   * 空数据图中布局的单位
+   * @default 'rpx'
+   * @since 2.6.7
+   */
+  unit?: 'rpx' | 'px';
+
+  // ****************************** Events ******************************
+  /**
+   * 点击了重新加载按钮
+   */
+  onReload?: () => void
+
+  /**
+   * 点击了空数据view
+   * @since 2.3.3
+   */
+  onViewClick?: () => void
+}
+
+declare interface _ZPagingEmptyView {
+  new (): {
+    $props: AllowedComponentProps &
+      VNodeProps &
+      ZPagingEmptyViewProps
+  }
+}
+
+export declare const ZPagingEmptyView: _ZPagingEmptyView
+
diff --git a/src/uni_modules/z-paging/types/comps/z-paging-swiper-item.d.ts b/src/uni_modules/z-paging/types/comps/z-paging-swiper-item.d.ts
new file mode 100644
index 00000000..57ffc9ec
--- /dev/null
+++ b/src/uni_modules/z-paging/types/comps/z-paging-swiper-item.d.ts
@@ -0,0 +1,95 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+// ****************************** Props ******************************
+declare interface ZPagingSwiperItemProps {
+  /**
+   * 当前组件的index，也就是当前组件是swiper中的第几个
+   * @default 0
+   */
+  tabIndex?: number
+
+  /**
+   * 当前swiper切换到第几个index
+   * @default 0
+   */
+  currentIndex?: number
+
+  /**
+   * 是否使用虚拟列表。使用页面滚动或nvue时，不支持虚拟列表。在nvue中z-paging内置了list组件，效果与虚拟列表类似，并且可以提供更好的性能。
+   * @default false
+   */
+  useVirtualList?: boolean
+
+  /**
+   * 虚拟列表cell高度模式，默认为`fixed`，也就是每个cell高度完全相同，将以第一个cell高度为准进行计算。
+   * @default 'fixed'
+   */
+  cellHeightMode?: 'fixed' | 'dynamic'
+
+  /**
+   * 预加载的列表可视范围(列表高度)页数。此数值越大，则虚拟列表中加载的dom越多，内存消耗越大(会维持在一个稳定值)，但增加预加载页面数量可缓解快速滚动短暂白屏问题。
+   * @default 12
+   */
+  preloadPage?: number | string
+
+  /**
+   * 虚拟列表列数，默认为1。常用于每行有多列的情况，例如每行有2列数据，需要将此值设置为2。
+   * @default 1
+   * @since 2.2.8
+   */
+  virtualListCol?: number | string
+
+  /**
+   * 虚拟列表scroll取样帧率，默认为80，过低容易出现白屏问题，过高容易出现卡顿问题
+   * @default 80
+   */
+  virtualScrollFps?: number | string
+
+  /**
+   * 是否在z-paging内部循环渲染列表(使用内置列表)。
+   * @default false
+   */
+  useInnerList?: boolean
+
+  /**
+   * 内置列表cell的key名称(仅nvue有效，在nvue中开启use-inner-list时必须填此项)
+   * @since 2.2.7
+   */
+  cellKeyName?: string
+
+  /**
+   * innerList样式
+   */
+  innerListStyle?: Record<string, any>
+}
+
+// ****************************** Methods ******************************
+declare interface _ZPagingSwiperItemRef {
+  /**
+   * 重新加载分页数据，pageNo恢复为默认值，相当于下拉刷新的效果
+   *
+   * @param [animate=false] 是否展示下拉刷新动画
+   */
+  reload: (animate?: boolean) => void;
+
+  /**
+   * 请求结束
+   * - 当通过complete传进去的数组长度小于pageSize时，则判定为没有更多了
+   *
+   * @param [data] 请求结果数组
+   * @param [success=true] 是否请求成功
+   */
+  complete: (data?: any[] | false, success?: boolean) => void;
+}
+
+declare interface _ZPagingSwiperItem {
+  new (): {
+    $props: AllowedComponentProps &
+      VNodeProps &
+      ZPagingSwiperItemProps
+  }
+}
+
+export declare const ZPagingSwiperItem: _ZPagingSwiperItem
+
+export declare const ZPagingSwiperItemRef: _ZPagingSwiperItemRef
diff --git a/src/uni_modules/z-paging/types/comps/z-paging-swiper.d.ts b/src/uni_modules/z-paging/types/comps/z-paging-swiper.d.ts
new file mode 100644
index 00000000..f211019d
--- /dev/null
+++ b/src/uni_modules/z-paging/types/comps/z-paging-swiper.d.ts
@@ -0,0 +1,89 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+// ****************************** Props ******************************
+declare interface ZPagingSwiperProps {
+  /**
+   * 是否使用fixed布局，若使用fixed布局，则z-paging-swiper的父view无需固定高度，z-paging高度默认铺满屏幕，页面中的view请放z-paging-swiper标签内，需要固定在顶部的view使用slot="top"包住，需要固定在底部的view使用slot="bottom"包住。
+   * @default true
+   */
+  fixed?: boolean
+
+  /**
+   * 是否开启底部安全区域适配
+   * @default false
+   */
+  safeAreaInsetBottom?: boolean
+
+  /**
+   * z-paging-swiper样式
+   */
+  swiperStyle?: Record<string, any>
+}
+
+
+// ****************************** Slots ******************************
+declare interface ZPagingSwiperSlots {
+  // ******************** 主体布局Slot ********************
+  /**
+   * 默认插入的view
+   */
+  ['default']?: () => any
+
+  /**
+   * 可以将自定义导航栏、tab-view等需要固定的(不需要跟着滚动的)元素放入slot="top"的view中。
+   * 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="top"。需要固定在顶部的view请勿设置position: fixed;
+   * @since 1.5.5
+   */
+  ['top']?: () => any
+
+  /**
+   * 可以将需要固定在底部的(不需要跟着滚动的)元素放入slot="bottom"的view中。
+   * 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="bottom"。需要固定在底部的view请勿设置position: fixed;
+   * @since 1.6.2
+   */
+  ['bottom']?: () => any
+
+  /**
+   * 可以将需要固定在左侧的(不需要跟着滚动的)元素放入slot="left"的view中。
+   * 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="left"。需要固定在左侧的view请勿设置position: fixed;
+   * @since 2.2.3
+   */
+  ['left']?: () => any
+
+  /**
+   * 可以将需要固定在左侧的(不需要跟着滚动的)元素放入slot="right"的view中。
+   * 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="right"。需要固定在右侧的view请勿设置position: fixed;
+   * @since 2.2.3
+   */
+  ['right']?: () => any
+}
+
+// ****************************** Methods ******************************
+declare interface _ZPagingSwiperRef {
+  /**
+   * 更新slot="left"和slot="right"宽度，当slot="left"或slot="right"宽度动态改变后调用
+   *
+   * @since 2.3.5
+   */
+  updateLeftAndRightWidth: () => void;
+
+  /**
+   * 更新fixed模式下z-paging-swiper的布局，在onShow时候调用，以修复在iOS+h5+tabbar+fixed+底部有安全区域的设备中从tabbar页面跳转到无tabbar页面后返回，底部有一段空白区域的问题
+   *
+   * @since 2.6.5
+   */
+  updateFixedLayout: () => void;
+}
+
+declare interface _ZPagingSwiper {
+  new (): {
+    $props: AllowedComponentProps &
+      VNodeProps &
+      ZPagingSwiperProps
+    $slots: ZPagingSwiperSlots
+  }
+}
+
+export declare const ZPagingSwiper: _ZPagingSwiper
+
+export declare const ZPagingSwiperRef: _ZPagingSwiperRef
diff --git a/src/uni_modules/z-paging/types/comps/z-paging.d.ts b/src/uni_modules/z-paging/types/comps/z-paging.d.ts
new file mode 100644
index 00000000..5833a54d
--- /dev/null
+++ b/src/uni_modules/z-paging/types/comps/z-paging.d.ts
@@ -0,0 +1,2083 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+type _Arrayable<T> = T | T[];
+
+/**
+ * i18n配置信息
+ */
+type _I18nText = Partial<Record<'en' | 'zh-Hans' | 'zh-Hant', string>>;
+
+declare global {
+  namespace ZPagingEnums {
+    /**
+     * query的触发来源：user-pull-down:用户主动下拉刷新 reload:通过reload触发 refresh:通过refresh触发 load-more:通过滚动到底部加载更多或点击底部加载更多触发
+     */
+    type QueryFrom = 'user-pull-down' | 'reload' | 'refresh' | 'load-more';
+
+    /**
+     * 下拉刷新状态：default:默认状态 release-to-refresh:松手立即刷新 loading:刷新中 complete:刷新结束 go-f2:松手进入二楼
+     */
+    type RefresherStatus = 'default' | 'release-to-refresh' | 'loading' | 'complete' | 'go-f2';
+
+    /**
+     * 下拉进入二楼状态：	go:二楼开启 close:二楼关闭
+     */
+    type GoF2Status = 'go' | 'close';
+
+    /**
+     * 底部加载更多状态：default:默认状态 loading:加载中 no-more:没有更多数据 fail:加载失败
+     */
+    type LoadMoreStatus = 'default' | 'loading' | 'no-more' | 'fail';
+
+    /**
+     * 列表触摸的方向，top代表用户将列表向上移动(scrollTop不断减小)，bottom代表用户将列表向下移动(scrollTop不断增大)
+     */
+    type TouchDirection = 'top' | 'bottom';
+  }
+
+  namespace ZPagingParams {
+    /**
+     * z-paging返回数据
+     *
+     * @since 2.5.3
+     */
+    interface ReturnData<T> {
+      /**
+       * 总列表
+       */
+      totalList: T[];
+      /**
+       * 是否没有更多数据
+       */
+      noMore: boolean;
+    }
+
+    /**
+     * 嵌套父容器信息 [list组件](https://uniapp.dcloud.net.cn/component/list.html)
+     *
+     * @since 2.0.4
+     */
+    interface SetSpecialEffectsArgs {
+      /**
+       * 和list同时滚动的组件id，应为外层的scroller
+       */
+      id?: string;
+      /**
+       * 要吸顶的header顶部距离scroller顶部的距离
+       * - Android暂不支持
+       *
+       * @default 0
+       */
+      headerHeight?: number;
+    }
+
+    /**
+     * touchmove信息
+     */
+    interface RefresherTouchmoveInfo {
+      /** 下拉的距离 */
+      pullingDistance: number;
+      /** 前后两次回调滑动距离的差值 */
+      dy: number;
+      /** refresh组件高度 */
+      viewHeight: number;
+      /** pullingDistance/viewHeight的比值 */
+      rate: number;
+    }
+
+    /**
+     * 默认事件处理
+     */
+    type DefaultEventHandler = (value: boolean) => void;
+
+    /**
+     * 使用虚拟列表或内置列表时点击了cell的信息
+     */
+    interface InnerCellClickInfo {
+      /** 当前点击的item */
+      item: any;
+      /** 当前点击的index */
+      index: number;
+    }
+
+    /**
+     * 键盘的高度信息
+     */
+    interface KeyboardHeightInfo {
+      /** 键盘的高度 */
+      height: number;
+    }
+
+    /**
+     * 列表滚动信息(vue)
+     */
+    interface ScrollInfo {
+      detail: {
+          scrollLeft: number;
+          scrollTop: number;
+          scrollHeight: number;
+          scrollWidth: number;
+          deltaX: number;
+          deltaY: number;
+      }
+    }
+    /**
+     * 列表滚动信息(nvue)
+     */
+    interface ScrollInfoN {
+        contentSize: {
+            width: number;
+            height: number;
+        };
+        contentOffset: {
+            x: number;
+            y: number;
+        };
+        isDragging: boolean;
+    }
+
+    /**
+     * 滚动结束时触发事件信息
+     */
+    interface ScrollendEvent {
+      contentSize: {
+          width: number;
+          height: number;
+      };
+      contentOffset: {
+          x: number;
+          y: number;
+      };
+      isDragging: boolean;
+    }
+
+    /**
+     * 下拉刷新Slot的props
+     */
+    interface RefresherSlotProps {
+      /** 下拉刷新状态：default:默认状态 release-to-refresh:松手立即刷新 loading:刷新中 complete:刷新结束 go-f2:松手进入二楼 */
+      refresherStatus: ZPagingEnums.RefresherStatus; 
+    }
+
+    /**
+     * 空数据图Slot的props
+     */
+    interface EmptySlotProps {
+      /** 是否加载失败: 加载失败，false: 加载成功) */
+      isLoadFailed: boolean; 
+    }
+
+    /**
+     * 虚拟列表&内置列表中cell Slot的props
+     */
+    interface InnerListCellSlotProps {
+      /** 当前item */
+      item: any; 
+      /** 当前index */
+      index: number; 
+    }
+
+    /**
+     * 聊天记录加载中Slot的props
+     */
+    interface ChatLoadingSlotProps {
+      /** 底部加载更多状态：default:默认状态 loading:加载中 no-more:没有更多数据 fail:加载失败 */
+      loadingMoreStatus: ZPagingEnums.LoadMoreStatus; 
+    }
+  }
+
+  /**
+     * 虚拟列表数据项
+     *
+     * @since 2.7.7
+     */
+  type ZPagingVirtualItem<T> = T & {
+    /**
+     * 元素真实索引
+     */
+    zp_index: number;
+  };
+}
+
+// ****************************** Props ******************************
+declare interface ZPagingProps {
+  // ******************** 数据&布局配置 ********************
+  /**
+   * 父组件v-model所绑定的list的值
+   * @default []
+   */
+  value?: any[]
+
+  /**
+   * 自定义初始的pageNo(从第几页开始)
+   * @default 1
+   */
+  defaultPageNo?: number
+
+  /**
+   * 自定义pageSize(每页显示多少条)
+   * - 必须和后端的pageSize一致，例如后端分页的pageSize为15，此属性必须改为15
+   * @default 10
+   */
+  defaultPageSize?: number
+
+  /**
+   * z-paging是否使用fixed布局
+   * - 若使用fixed布局，则z-paging的父view无需固定高度，z-paging高度默认铺满屏幕，页面中的view请放在z-paging标签内，需要固定在顶部的view使用slot="top"包住，需要固定在底部的view使用slot="bottom"包住
+   * @default true
+   * @since 1.5.6
+   */
+  fixed?: boolean
+
+  /**
+   * 是否开启底部安全区域适配
+   * @default false
+   * @since 1.6.1
+   */
+  safeAreaInsetBottom?: boolean
+
+  /**
+   * 开启底部安全区域适配后，是否使用placeholder形式实现。
+   * - 为否时滚动区域会自动避开底部安全区域，也就是所有滚动内容都不会挡住底部安全区域，若设置为是，则滚动时滚动内容会挡住底部安全区域，但是当滚动到底部时才会避开底部安全区域
+   * @default false
+   * @since 2.2.7
+   */
+  useSafeAreaPlaceholder?: boolean
+
+  /**
+   * 使用页面滚动，默认为否。当设置为是时，则使用页面的滚动而非此组件内部的scroll-view的滚动。
+   * @default false
+   */
+  usePageScroll?: boolean
+
+  /**
+   * 使用页面滚动时，是否在不满屏时自动填充满屏幕
+   * @default true
+   * @since 2.0.6
+   */
+  autoFullHeight?: boolean
+
+  /**
+   * loading(下拉刷新、上拉加载更多)的主题样式，支持black，white
+   * @default 'black'
+   */
+  defaultThemeStyle?: 'black' | 'white'
+
+  /**
+   * 设置z-paging的style，部分平台(如微信小程序)无法直接修改组件的style，可使用此属性代替。
+   */
+  pagingStyle?: Record<string, any>
+
+  /**
+   * z-paging的高度，优先级低于paging-style中设置的height
+   * - 传字符串，如100px、100rpx、100%
+   */
+  height?: string
+
+  /**
+   * z-paging的宽度，优先级低于paging-style中设置的width
+   * - 传字符串，如100px、100rpx、100%
+   */
+  width?: string
+
+  /**
+   * z-paging的最大宽度，优先级低于paging-style中设置的max-width
+   * - 默认为空，也就是铺满窗口宽度，若设置了特定值则会自动添加margin: 0 auto
+   */
+  maxWidth?: string
+
+  /**
+   * z-paging的背景色(为css中的background，因此也可以设置渐变，背景图片等)，优先级低于paging-style中设置的background-color。
+   * - 传字符串，如"#ffffff"
+   */
+  bgColor?: string
+
+  /**
+   * 是否监听列表触摸方向改变
+   * @default false
+   * @since 2.3.0
+   */
+  watchTouchDirectionChange?: boolean
+
+  /**
+   * 调用complete后延迟处理的时间，单位为毫秒，优先级高于min-delay
+   * @default 0
+   * @since 1.9.6
+   */
+  delay?: number | string
+
+  /**
+   * 触发@query后最小延迟处理的时间，单位为毫秒，优先级低于delay
+   * @default 0
+   * @since 2.0.9
+   */
+  minDelay?: number | string
+
+  /**
+   * 请求失败是否触发reject
+   * @default true
+   * @since 2.6.1
+   */
+  callNetworkReject?: boolean
+
+  /**
+   * z-paging中默认布局的单位
+   * @default rpx
+   * @since 2.6.7
+   */
+  unit?: 'rpx' | 'px'
+
+  /**
+   * 自动拼接complete中传过来的数组
+   * - 若设置为false，则complete中传过来的数组会直接覆盖list
+   * @default true
+   * @since 1.8.8
+   */
+  concat?: boolean
+
+  /**
+   * 为保证数据一致，设置当前tab切换时的标识key，并在complete中传递相同key，若二者不一致，则complete将不会生效
+   * @since 1.6.4
+   */
+  dataKey?: number | string | Record<string, any>
+
+  /**
+   * 【极简写法】自动注入的list名，可自动修改父view(包含ref="paging")中对应name的list值
+   * - z-paging标签必须设置ref="paging"
+   * @since 1.8.5
+   */
+  autowireListName?: string
+
+  /**
+   * 【极简写法】自动注入的query名，可自动调用父view(包含ref="paging")中的query方法
+   * - z-paging标签必须设置ref="paging"
+   * @since 1.8.5
+   */
+  autowireQueryName?: string
+
+  /**
+   * 获取分页数据Function，功能与@query类似。若设置了fetch则@query将不再触发。
+   * @since 2.7.8
+   */
+  fetch?: (...args: any[]) => any;
+
+  /**
+   * fetch的附加参数，fetch配置后有效
+   * @since 2.7.8
+   */
+  fetchParams?: Record<string, any>
+
+  // ******************** reload相关配置 ********************
+  /**
+   * z-paging mounted 后自动调用 reload 方法 (mounted 后自动调用接口)
+   * @default true
+   * @since 2.4.3
+   */
+  auto?: boolean
+
+  /**
+   * reload 时自动滚动到顶部
+   * - 如果reload时list被清空导致占位消失，也可能会自动返回到顶部，因此如果是这种情况还需要将autoCleanListWhenReload设置为false
+   * @default true
+   */
+  autoScrollToTopWhenReload?: boolean
+
+  /**
+   * reload时立即自动清空原list若立即自动清空，则在reload之后、请求回调之前页面是空白的
+   * @default true
+   */
+  autoCleanListWhenReload?: boolean
+
+  /**
+   * 列表刷新时自动显示下拉刷新 view
+   * @default false
+   * @since 1.7.2
+   */
+  showRefresherWhenReload?: boolean
+
+  /**
+   * 列表刷新时自动显示加载更多view，且为加载中状态 (仅初始设置有效，不可动态修改)
+   * @default false
+   * @since 1.7.2
+   */
+  showLoadingMoreWhenReload?: boolean
+
+  /**
+   * 组件 created 时立即触发 reload (可解决一些情况下先看到页面再看到 loading 的问题)
+   * - auto 为 true 时有效。为否时将在 mounted+nextTick 后触发 reload
+   * @default false
+   * @since 2.2.3
+   */
+  createdReload?: boolean
+
+  // ******************** 下拉刷新配置 ********************
+  /**
+   * 是否开启下拉刷新
+   * @default true
+   */
+  refresherEnabled?: boolean
+
+  /**
+   * 设置自定义下拉刷新阈值，默认单位为px。支持传100、"100px"或"100rpx"
+   * - nvue无效
+   * @default '80rpx'
+   */
+  refresherThreshold?: number | string
+
+  /**
+   * 是否开启下拉刷新状态栏占位，适用于隐藏导航栏时，下拉刷新需要避开状态栏高度的情况
+   * @default false
+   * @since 2.6.1
+   */
+  useRefresherStatusBarPlaceholder?: boolean
+
+  /**
+   * 是否只使用下拉刷新
+   * - 设置为true后将关闭mounted自动请求数据、关闭滚动到底部加载更多，强制隐藏空数据图
+   * @default false
+   */
+  refresherOnly?: boolean
+
+  /**
+   * 是否使用自定义的下拉刷新，默认为是，即使用z-paging的下拉刷新
+   * - 设置为false即代表使用uni scroll-view自带的下拉刷新，h5、App、微信小程序以外的平台不支持uni scroll-view自带的下拉刷新
+   * @default true
+   */
+  useCustomRefresher?: boolean
+
+  /**
+   * 用户下拉刷新时是否触发reload方法
+   * @default true
+   */
+  reloadWhenRefresh?: boolean
+
+  /**
+   * 下拉刷新的主题样式，支持black，white
+   * @default 'black'
+   */
+  refresherThemeStyle?: string
+
+  /**
+   * 自定义下拉刷新中左侧图标的样式
+   */
+  refresherImgStyle?: Record<string, any>
+
+  /**
+   * 自定义下拉刷新中右侧状态描述文字的样式
+   */
+  refresherTitleStyle?: Record<string, any>
+
+  /**
+   * 自定义下拉刷新中右侧最后更新时间文字的样式
+   * - show-refresher-update-time为true时有效
+   */
+  refresherUpdateTimeStyle?: Record<string, any>
+
+  /**
+   * 是否实时监听下拉刷新中进度，并通过@refresherTouchmove传递给父组件
+   * @default false
+   * @since 2.1.0
+   */
+  watchRefresherTouchmove?: boolean
+
+  /**
+   * 是否显示最后更新时间
+   * @default false
+   * @since 1.6.7
+   */
+  showRefresherUpdateTime?: boolean
+
+  /**
+   * 自定义下拉刷新默认状态下的文字
+   * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置
+   * @default '继续下拉刷新'
+   */
+  refresherDefaultText?: string | _I18nText
+
+  /**
+   * 自定义下拉刷新松手立即刷新状态下的文字
+   * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置
+   * @default '松开立即刷新'
+   */
+  refresherPullingText?: string | _I18nText
+
+  /**
+   * 自定义下拉刷新刷新中状态下的文字
+   * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置
+   * @default '正在刷新...'
+   */
+  refresherRefreshingText?: string | _I18nText
+
+  /**
+   * 自定义下拉刷新刷新结束状态下的文字
+   * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置
+   * @default '刷新成功'
+   * @since 2.0.6
+   */
+  refresherCompleteText?: string | _I18nText
+
+  /**
+   * 自定义下拉刷新默认状态下的图片
+   */
+  refresherDefaultImg?: string
+
+  /**
+   * 自定义下拉刷新松手立即刷新状态下的图片
+   */
+  refresherPullingImg?: string
+
+  /**
+   * 自定义下拉刷新刷新中状态下的图片
+   */
+  refresherRefreshingImg?: string
+
+  /**
+   * 自定义下拉刷新刷新结束状态下的图片
+   */
+  refresherCompleteImg?: string
+
+  /**
+   * 自定义下拉刷新刷新中状态下是否展示旋转动画
+   * @default true
+   * @since 2.5.8
+   */
+  refresherRefreshingAnimated?: boolean
+
+  /**
+   * 是否开启自定义下拉刷新刷新结束回弹动画效果
+   * @default true
+   */
+  refresherEndBounceEnabled?: boolean
+
+  /**
+   * 设置系统下拉刷新默认样式，支持设置 black，white，none
+   * @default 'black'
+   */
+  refresherDefaultStyle?: string
+
+  /**
+   * 设置自定义下拉刷新区域背景颜色
+   * @default '#FFFFFF00'
+   */
+  refresherBackground?: string
+
+  /**
+   * 设置固定的自定义下拉刷新区域背景颜色
+   * @default '#FFFFFF00'
+   */
+  refresherFixedBackground?: string
+
+  /**
+   * 设置固定的自定义下拉刷新区域高度
+   * @default 0
+   */
+  refresherFixedBacHeight?: number | string
+
+  /**
+   * 设置自定义下拉刷新默认状态下回弹动画时间，单位为毫秒
+   * @default 100
+   * @since 2.3.1
+   */
+  refresherDefaultDuration?: number | string
+
+  /**
+   * 自定义下拉刷新结束以后延迟收回的时间，单位为毫秒
+   * @default 0
+   * @since 2.0.6
+   */
+  refresherCompleteDelay?: number | string
+
+  /**
+   * 自定义下拉刷新结束收回动画时间，单位为毫秒
+   * @default 300
+   * @since 2.0.6
+   */
+  refresherCompleteDuration?: number | string
+
+  /**
+   * 下拉刷新时下拉到“松手立即刷新”状态时是否使手机短振动
+   * @default false
+   * @since 2.4.7
+   */
+  refresherVibrate?: boolean
+
+  /**
+   * 自定义下拉刷新刷新中状态是否允许列表滚动
+   * @default true
+   */
+  refresherRefreshingScrollable?: boolean
+
+  /**
+   * 自定义下拉刷新结束状态下是否允许列表滚动
+   * @default false
+   * @since 2.1.1
+   */
+  refresherCompleteScrollable?: boolean
+
+  /**
+   * 设置自定义下拉刷新下拉超出阈值后继续下拉位移衰减的比例
+   * @default 0.65
+   */
+  refresherOutRate?: number
+
+  /**
+   * 是否开启下拉进入二楼功能
+   * @default false
+   * @since 2.7.7
+   */
+  refresherF2Enabled?: boolean
+
+  /**
+   * 下拉进入二楼阈值
+   * @default '200rpx'
+   * @since 2.7.7
+   */
+  refresherF2Threshold?: number | string
+
+  /**
+   * 下拉进入二楼动画时间，单位为毫秒
+   * @default 200
+   * @since 2.7.7
+   */
+  refresherF2Duration?: number | string
+
+  /**
+   * 下拉进入二楼状态松手后是否弹出二楼
+   * @default true
+   * @since 2.7.7
+   */
+  showRefresherF2?: boolean
+
+  /**
+   * 设置自定义下拉刷新下拉时实际下拉位移与用户下拉距离的比值
+   * @default 0.75
+   * @since 2.3.7
+   */
+  refresherPullRate?: number
+
+  /**
+   * 自定义下拉刷新下拉帧率，默认为40，过高可能会出现抖动问题
+   * @default 40
+   */
+  refresherFps?: number | string
+
+  /**
+   * 自定义下拉刷新允许触发的最大下拉角度，默认为40度
+   * - 值小于0或大于90时，代表不受角度限
+   * @default 40
+   * @since 2.5.8
+   */
+  refresherMaxAngle?: number | string
+
+  /**
+   * 自定义下拉刷新的角度由未达到最大角度变到达到最大角度时，是否继续下拉刷新手势
+   * @default false
+   */
+  refresherAngleEnableChangeContinued?: boolean
+
+  /**
+   * 下拉刷新时是否禁止下拉刷新view跟随用户触摸竖直移动
+   * @default false
+   * @since 2.5.8
+   */
+  refresherNoTransform?: boolean
+
+  // ******************** 底部加载更多配置 ********************
+  /**
+   * 是否启用加载更多数据(含滑动到底部加载更多数据和点击加载更多数据)
+   * @default true
+   */
+  loadingMoreEnabled?: boolean
+
+  /**
+   * 距底部/右边多远时，触发 scrolltolower 事件，默认单位为px
+   * - 支持传100、"100px"或"100rpx"
+   * @default '100rpx'
+   */
+  lowerThreshold?: number | string
+
+  /**
+   * 是否启用滑动到底部加载更多数据
+   * @default true
+   */
+  toBottomLoadingMoreEnabled?: boolean
+
+  /**
+   * 底部加载更多的主题样式，支持black，white
+   * @default 'black'
+   */
+  loadingMoreThemeStyle?: string
+
+  /**
+   * 自定义底部加载更多样式；如：{'background':'red'} 
+   * - 此属性无法修改文字样式，修改文字样式请使用loading-more-title-custom-style
+   */
+  loadingMoreCustomStyle?: Record<string, any>
+
+  /**
+   * 自定义底部加载更多文字样式；如：{'color':'red'}
+   * @since 2.1.7
+   */
+  loadingMoreTitleCustomStyle?: Record<string, any>
+
+  /**
+   * 自定义底部加载更多加载中动画样式
+   */
+  loadingMoreLoadingIconCustomStyle?: Record<string, any>
+
+  /**
+   * 自定义底部加载更多加载中动画图标类型
+   * - 可选flower或circle，默认为flower (nvue不支持)
+   * @default 'flower'
+   */
+  loadingMoreLoadingIconType?: 'flower' | 'circle'
+
+  /**
+   * 自定义底部加载更多加载中动画图标图片
+   * - 若设置则使用自定义的动画图标，loading-more-loading-icon-type将无效 (nvue无效)
+   */
+  loadingMoreLoadingIconCustomImage?: string
+
+  /**
+   * 底部加载更多加载中view是否展示旋转动画
+   * - loading-more-loading-icon-custom-image有值时有效，nvue无效
+   * @default true
+   * @since 1.9.4
+   */
+  loadingMoreLoadingAnimated?: boolean
+
+  /**
+   * 滑动到底部"默认"文字
+   * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置
+   * @default '点击加载更多'
+   */
+  loadingMoreDefaultText?: string | _I18nText
+
+  /**
+   * 滑动到底部"加载中"文字 
+   * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置
+   * @default '正在加载...'
+   */
+  loadingMoreLoadingText?: string | _I18nText
+
+  /**
+   * 滑动到底部"没有更多"文字 
+   * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置
+   * @default '没有更多了'
+   */
+  loadingMoreNoMoreText?: string | _I18nText
+
+  /**
+   * 滑动到底部"加载失败"文字 
+   * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置
+   * @default '加载失败，点击重新加载'
+   */
+  loadingMoreFailText?: string | _I18nText
+
+  /**
+   * 当没有更多数据且分页内容未超出z-paging时是否隐藏没有更多数据的view 
+   * - nvue不支持，nvue中请使用hide-no-more-by-limit控制
+   * @default false
+   * @since 2.4.3
+   */
+  hideNoMoreInside?: boolean
+
+  /**
+   * 当没有更多数据且分页数组长度少于这个值时，隐藏没有更多数据的view
+   * - 默认为0，代表不限制。此属性优先级高于`hide-no-more-inside`
+   * @default 0
+   * @since 2.4.3
+   */
+  hideNoMoreByLimit?: number
+
+  /**
+   * 当分页未满一屏时，是否自动加载更多 (nvue无效)
+   * @default false
+   * @since 2.0.0
+   */
+  insideMore?: boolean
+
+  /**
+   * 滑动到底部状态为默认状态时，以加载中的状态展示
+   * - 若设置为是，可避免滚动到底部看到默认状态然后立刻变为加载中状态的问题，但分页数量未超过一屏时，不会显示【点击加载更多】
+   * @default false
+   * @since 2.2.0
+   */
+  loadingMoreDefaultAsLoading?: boolean
+
+  /**
+   * 是否显示没有更多数据的view
+   * @default true
+   */
+  showLoadingMoreNoMoreView?: boolean
+
+  /**
+   * 是否显示默认的加载更多text
+   * @default true
+   */
+  showDefaultLoadingMoreText?: boolean
+
+  /**
+   * 是否显示没有更多数据的分割线，默认为是
+   * @default true
+   */
+  showLoadingMoreNoMoreLine?: boolean
+
+  /**
+   * 自定义底部没有更多数据的分割线样式
+   */
+  loadingMoreNoMoreLineCustomStyle?: Record<string, any>
+
+  // ******************** 空数据与加载失败配置 ********************
+  /**
+   * 是否强制隐藏空数据图
+   * @default false
+   */
+  hideEmptyView?: boolean
+
+  /**
+   * 空数据图片是否铺满z-paging
+   * - 默认为否，即填充满z-paging内列表(滚动区域)部分。若设置为否，则为填铺满整个z-paging
+   * @default false
+   * @since 2.0.3
+   */
+  emptyViewFixed?: boolean
+
+  /**
+   * 空数据图片是否垂直居中
+   * - 默认为是，若设置为否即为从空数据容器顶部开始显示 (empty-view-fixed为false时有效)
+   * @default true
+   * @since 2.0.6
+   */
+  emptyViewCenter?: boolean
+
+  /**
+   * 空数据图描述文字 
+   * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置
+   * @default '没有数据哦~'
+   */
+  emptyViewText?: string | _I18nText
+
+  /**
+   * 空数据图图片，默认使用z-paging内置的图片
+   * - 建议使用绝对路径，开头不要添加"@"，请以"/"开头
+   */
+  emptyViewImg?: string
+
+  /**
+   * 空数据图“加载失败”图片，默认使用z-paging内置的图片
+   * - 建议使用绝对路径，开头不要添加"@"，请以"/"开头
+   * @since 1.6.7
+   */
+  emptyViewErrorImg?: string
+
+  /**
+   * 空数据图点击重新加载文字 
+   * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置
+   * @default '重新加载'
+   * @since 1.6.7
+   */
+  emptyViewReloadText?: string | _I18nText
+
+  /**
+   * 空数据图“加载失败”描述文字 
+   * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置
+   * @default '很抱歉，加载失败'
+   * @since 1.6.7
+   */
+  emptyViewErrorText?: string | _I18nText
+  /**
+   * 空数据图父view样式
+   */
+  emptyViewSuperStyle?: Record<string, any>
+
+  /**
+   * 空数据图样式，可设置空数据view的top等，如：:empty-view-style="{'top':'100rpx'}"
+   */
+  emptyViewStyle?: Record<string, any>
+
+  /**
+   * 空数据图img样式
+   */
+  emptyViewImgStyle?: Record<string, any>
+
+  /**
+   * 空数据图描述文字样式
+   */
+  emptyViewTitleStyle?: Record<string, any>
+
+  /**
+   * 空数据图重新加载按钮样式
+   * @since 1.6.7
+   */
+  emptyViewReloadStyle?: Record<string, any>
+
+  /**
+   * 是否显示空数据图重新加载按钮(无数据时)
+   * @default false
+   * @since 1.6.7
+   */
+  showEmptyViewReload?: boolean
+
+  /**
+   * 加载失败时是否显示空数据图重新加载按钮
+   * @default true
+   * @since 1.6.7
+   */
+  showEmptyViewReloadWhenError?: boolean
+
+  /**
+   * 加载中时是否自动隐藏空数据图
+   * @default true
+   */
+  autoHideEmptyViewWhenLoading?: boolean
+
+  /**
+   * 用户下拉列表触发下拉刷新加载中时是否自动隐藏空数据图
+   * @default true
+   * @since 2.0.9
+   */
+  autoHideEmptyViewWhenPull?: boolean
+
+  // ******************** 全屏Loading配置 ********************
+  /**
+   * 第一次加载后自动隐藏loading slot
+   * @default true
+   */
+  autoHideLoadingAfterFirstLoaded?: boolean
+
+  /**
+   * loading slot的父view是否铺满屏幕并固定
+   * - 设置为true后，插入的loading的父view会铺满全屏。注意：插入的loading需要设置height:100%（nvue为flex:1）才可铺满全屏。loading内的view从导航栏顶部开始，会被导航栏盖住，请妥善处理。
+   * @default false
+   * @since 2.0.9
+   */
+  loadingFullFixed?: boolean
+
+  /**
+   * 是否自动显示系统Loading：即uni.showLoading
+   * - 若开启则将在刷新列表时（调用reload、refresh时）显示。下拉刷新和滚动到底部加载更多不会显示。
+   * @default false
+   * @since 2.3.7
+   */
+  autoShowSystemLoading?: boolean
+
+  /**
+   * 显示系统Loading时显示的文字
+   * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置
+   * @default '加载中...'
+   * @since 2.3.7
+   */
+  systemLoadingText?: string | _I18nText
+
+  /**
+   * 显示系统Loading时是否显示透明蒙层，防止触摸穿透。H5、App、微信小程序、百度小程序有效。
+   * @default true
+   * @since 2.3.9
+   */
+  systemLoadingMask?: boolean
+
+  // ******************** 返回顶部按钮配 ********************
+  /**
+   * 自动显示点击返回顶部按钮
+   * @default false
+   */
+  autoShowBackToTop?: boolean
+
+  /**
+   * 点击返回顶部按钮显示/隐藏的阈值(滚动距离)，默认单位为px
+   * - 支持传100、"100px"或"100rpx"
+   * @default 400rpx
+   */
+  backToTopThreshold?: number | string
+
+  /**
+   * 点击返回顶部按钮的自定义图片地址
+   * - 建议使用绝对路径，开头不要添加"@"，请以"/"开头
+   * @default 'z-paging内置的图片'
+   */
+  backToTopImg?: string
+
+  /**
+   * 点击返回顶部按钮返回到顶部时是否展示过渡动画
+   * @default true
+   */
+  backToTopWithAnimate?: boolean
+
+  /**
+   * 点击返回顶部按钮与底部的距离，默认单位为px
+   * - 支持传100、"100px"或"100rpx"
+   * @default 160rpx
+   */
+  backToTopBottom?: number | string
+
+  /**
+   * 点击返回顶部按钮的自定义样式
+   */
+  backToTopStyle?: Record<string, any>
+
+  // ******************** 虚拟列表&内置列表配置 ********************
+  /**
+   * 是否使用虚拟列表
+   * - 使用页面滚动或nvue时，不支持虚拟列表。在nvue中z-paging内置了list组件，效果与虚拟列表类似，并且可以提供更好的性能
+   * @default false
+   */
+  useVirtualList?: boolean
+
+  /**
+   * 在使用虚拟列表时，是否使用兼容模式。兼容模式写法较繁琐，但可提供良好的兼容性。
+   * @default false
+   * @since 2.4.0
+   */
+  useCompatibilityMode?: boolean
+
+  /**
+   * 使用兼容模式时传递的附加数据，可选、非必须
+   * @since 2.4.0
+   */
+  extraData?: Record<string, any>
+
+  /**
+   * 虚拟列表cell高度模式，默认为fixed，也就是每个cell高度完全相同，将以第一个cell高度为准进行计算。
+   * @default 'fixed'
+   */
+  cellHeightMode?: 'fixed' | 'dynamic'
+
+  /**
+   * 预加载的列表可视范围(列表高度)页数。此数值越大，则虚拟列表中加载的dom越多，内存消耗越大(会维持在一个稳定值)，但增加预加载页面数量可缓解快速滚动短暂白屏问题。
+   * @default 12
+   */
+  preloadPage?: number | string
+
+  /**
+   * 固定的cell高度，`cell-height-mode=fixed`才有效，若设置了值，则不计算第一个cell高度而使用设置的cell高度。默认单位为px
+   * - 支持传100、"100px"或"100rpx"
+   * @since 2.7.8
+   */
+  fixedCellHeight?: number | string
+
+  /**
+   * 虚拟列表列数，默认为1。常用于每行有多列的情况，例如每行有2列数据，需要将此值设置为2。
+   * @default 1
+   * @since 2.2.8
+   */
+  virtualListCol?: number | string
+
+  /**
+   * 虚拟列表scroll取样帧率，默认为80，过低容易出现白屏问题，过高容易出现卡顿问题
+   * @default 80
+   */
+  virtualScrollFps?: number | string
+
+  /**
+   * 虚拟列表cell id的前缀，适用于一个页面有多个虚拟列表的情况，用以区分不同虚拟列表cell的id
+   * - 注意：请勿传数字或以数字开头的字符串。如设置为list1，则cell的id应为：list1-zp-id-${item.zp_index}
+   * @since 2.8.1
+   */
+  virtualCellIdPrefix?: string
+
+  /**
+   * 是否在z-paging内部循环渲染列表(使用内置列表)。
+   * @default false
+   */
+  useInnerList?: boolean
+
+  /**
+   * 强制关闭inner-list。适用于开启了虚拟列表后需要强制关闭inner-list的情况。
+   * @default false
+   * @since 2.2.7
+   */
+  forceCloseInnerList?: boolean
+
+  /**
+   * 虚拟列表是否使用swiper-item包裹，默认为否，此属性为了解决vue3+(微信小程序或QQ小程序)中，使用非内置列表写法时，若z-paging在swiper-item内存在无法获取slot插入的cell高度进而导致虚拟列表失败的问题
+   * - 仅vue3+(微信小程序或QQ小程序)+非内置列表写法虚拟列表有效，其他情况此属性设置任何值都无效，所以如果您在swiper-item内使用z-paging的非内置虚拟列表写法，将此属性设置为true即可
+   * @default false
+   * @since 2.8.6
+   */
+  virtualInSwiperSlot?: boolean
+
+  /**
+   * 内置列表cell的key名称(仅nvue有效，在nvue中开启use-inner-list时必须填此项)
+   * @since 2.2.7
+   */
+  cellKeyName?: string
+
+  /**
+   * innerList样式
+   */
+  innerListStyle?: Record<string, any>
+
+  /**
+   * innerCell样式
+   * @since 2.2.8
+   */
+  innerCellStyle?: Record<string, any>
+
+  // ******************** 本地分页配置 ********************
+  /**
+   * 本地分页时上拉加载更多延迟时间，单位为毫秒
+   * @default 200
+   */
+  localPagingLoadingTime?: number | string
+
+  // ******************** 聊天记录模式配置 ********************
+  /**
+   * 使用聊天记录模式，为保证良好的体验。
+   * @default false
+   */
+  useChatRecordMode?: boolean;
+
+  /**
+   * 使用聊天记录模式时是否自动隐藏键盘(在用户触摸列表时候自动隐藏键盘)
+   * @default true
+   * @since 2.3.4
+   */
+  autoHideKeyboardWhenChat?: boolean;
+
+  /**
+   * 使用聊天记录模式中键盘弹出时是否自动调整slot="bottom"高度
+   * @default true
+   * @since 2.7.4
+   */
+  autoAdjustPositionWhenChat?: boolean;
+
+  /**
+   * 使用聊天记录模式中键盘弹出时是否自动滚动到底部
+   * @default false
+   * @since 2.7.4
+   */
+  autoToBottomWhenChat?: boolean;
+
+  /**
+   * 使用聊天记录模式中键盘弹出时占位高度偏移距离。默认0rpx。单位px
+   * @default "0px"
+   * @since 2.7.6
+   */
+  chatAdjustPositionOffset?: string;
+
+  /**
+   * 使用聊天记录模式中`reload`时是否显示`chatLoading`
+   * @default false
+   * @since 2.7.4
+   */
+  showChatLoadingWhenReload?: boolean;
+
+  /**
+   * `bottom`的背景色，默认透明，传字符串，如"#ffffff"
+   * @since 2.7.4
+   */
+  bottomBgColor?: string;
+
+  /**
+   * 在聊天记录模式中滑动到顶部状态为默认状态时，是否以加载中的状态展示
+   * @default true
+   * @since 2.7.5
+   */
+  chatLoadingMoreDefaultAsLoading?: boolean;
+
+  // ******************** scroll-view相关配置 ********************
+  /**
+   * 控制是否出现滚动条
+   * @default true
+   */
+  showScrollbar?: boolean;
+
+  /**
+   * 是否可以滚动，使用内置scroll-view和nvue时有效
+   * @default true
+   */
+  scrollable?: boolean;
+
+  /**
+   * 是否允许横向滚动
+   * @default false
+   * @since 2.0.6
+   */
+  scrollX?: boolean;
+
+  /**
+   * iOS设备上滚动到顶部时是否允许回弹效果
+   * - 关闭回弹效果后可使滚动到顶部后立即下拉可立即触发下拉刷新，但是有吸顶view时滚动到顶部时可能出现抖动
+   * @default false
+   */
+  scrollToTopBounceEnabled?: boolean;
+
+  /**
+   * iOS设备上滚动到底部时是否允许回弹效果。可能会导致使用scroll-view滚动时无法顺利滚动到底部
+   * @default true
+   */
+  scrollToBottomBounceEnabled?: boolean;
+
+  /**
+   * 在设置滚动条位置时使用动画过渡
+   * @default false
+   */
+  scrollWithAnimation?: boolean;
+
+  /**
+   * 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素。若在一些平台中无效，可以通过调用z-paging的scrollToxxx系列的方法实现。
+   */
+  scrollIntoView?: string;
+
+  /**
+   * iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部。仅支持app-nvue，微信小程序。
+   * @default true
+   */
+  enableBackToTop?: boolean;
+
+  // ******************** nvue独有配置 ********************
+  /**
+   * nvue中修改列表类型。
+   * @default "list"
+   */
+  nvueListIs?: 'list' | 'waterfall' | 'scroller';
+
+  /**
+   * waterfall 配置，仅在 nvue 中且 nvueListIs=waterfall 时有效。示例: {'column-gap': 20}。配置参数详情参见: https://uniapp.dcloud.io/component/waterfall
+   */
+  nvueWaterfallConfig?: Record<string, any>;
+
+  /**
+   * nvue 控制是否回弹效果，iOS 不支持动态修改。注意: 若禁用回弹效果，下拉刷新将失效。
+   * @default true
+   */
+  nvueBounce?: boolean;
+
+  /**
+   * nvue 中通过代码滚动到顶部/底部时，是否加快动画效果(无滚动动画时无效)。
+   * @default false
+   * @since 1.9.4
+   */
+  nvueFastScroll?: boolean;
+
+  /**
+   * nvue 中 list 的 id。
+   * @since 2.0.4
+   */
+  nvueListId?: string;
+
+  /**
+   * 是否隐藏 nvue 列表底部的 tagView，此 view 用于标识滚动到底部位置。
+   * - 若隐藏则滚动到底部功能将失效。
+   * - 在 nvue 中实现吸顶+swiper 功能时需将最外层 z-paging 的此属性设置为 true。
+   * @default false
+   * @since 2.0.4
+   */
+  hideNvueBottomTag?: boolean;
+
+  /**
+   * 设置 nvue 中是否按分页模式(类似竖向 swiper)显示 List。
+   * @default false
+   * @since 2.3.1
+   */
+  nvuePagingEnabled?: boolean;
+
+  /**
+   * nvue 中控制 onscroll 事件触发的频率。表示两次 onscroll 事件之间列表至少滚动了指定的像素值。单位: px。
+   * @since 2.3.5
+   */
+  offsetAccuracy?: number;
+
+  // ******************** 缓存配置 ********************
+  /**
+   * 是否使用缓存。若开启，将自动缓存第一页的数据。注意：默认仅会缓存组件首次加载时第一次请求到的数据，后续的下拉刷新操作不会更新缓存。
+   * - 必须设置 `cacheKey`，否则缓存无效。
+   * @default false
+   */
+  useCache?: boolean;
+
+  /**
+   * 使用缓存时缓存的 key，用于区分不同列表的缓存数据。
+   * - useCache为 true 时必须设置，否则缓存无效。
+   */
+  cacheKey?: string;
+
+  /**
+   * 缓存模式。
+   * - default: 仅缓存组件首次加载时第一次请求到的数据。
+   * - always: 总是缓存，每次列表刷新(如下拉刷新、调用 reload 等)都会更新缓存。
+   * @default "default"
+   */
+  cacheMode?: 'default' | 'always';
+
+  // ******************** z-index配置 ********************
+  /**
+   * slot="top" 的 view 的 z-index。
+   * - 仅使用页面滚动时有效。
+   * @default 99
+   */
+  topZIndex?: number;
+
+  /**
+   * z-paging 内容容器父 view 的 z-index。
+   * @default 1
+   */
+  superContentZIndex?: number;
+
+  /**
+   * z-paging 内容容器部分的 z-index。
+   * @default 1
+   */
+  contentZIndex?: number;
+
+  /**
+   * 空数据 view 的 z-index。
+   * @default 9
+   */
+  emptyViewZIndex?: number;
+
+  // ******************** 其他配置 ********************
+  /**
+   * z-paging 是否自动高度。
+   * - 自动高度时会自动铺满屏幕，不需要设置父 view 为 100% 等操作。
+   * - 注意：自动高度可能并不准确。
+   * @deprecated 建议使用 fixed 代替。
+   * @default false
+   */
+  autoHeight?: boolean;
+
+  /**
+   * z-paging 自动高度时的附加高度。
+   * - 添加单位 px 或 rpx，默认为 px。
+   * - 若需要减少高度，请传负数，如 "-10rpx" 或 "10.5px"。
+   * @deprecated 建议使用 fixed 代替。
+   * @default "0px"
+   */
+  autoHeightAddition?: number | string;
+
+
+  // ****************************** Events ******************************
+
+  // ******************** 数据处理相关事件 ********************
+  /**
+   * 父组件v-model所绑定的list的值改变时触发此事件
+   * @param value 列表数据
+   */
+  onInput?: (value: any[]) => any
+  
+  /**
+   * 下拉刷新或滚动到底部时会自动触发此方法。z-paging加载时也会触发(若要禁止，请设置:auto="false")。pageNo和pageSize会自动计算好，直接传给服务器即可。
+   * @param pageNo 当前第几页
+   * @param pageSize 每页多少条
+   * @param from query的触发来源：user-pull-down:用户主动下拉刷新 reload:通过reload触发 refresh:通过refresh触发 load-more:通过滚动到底部加载更多或点击底部加载更多触发
+   */
+  onQuery?: (pageNo: number, pageSize: number, from: ZPagingEnums.QueryFrom) => void
+
+  /**
+   * 分页渲染的数组改变时触发
+   * @param list 最终的分页数据数组
+   */
+  onListChange?: (list: any[]) => void
+
+  // ******************** 下拉刷新相关事件 ********************
+  /**
+   * 自定义下拉刷新状态改变
+   * - use-custom-refresher为false时无效
+   * @param status 下拉刷新状态：default:默认状态 release-to-refresh:松手立即刷新 loading:刷新中 complete:刷新结束 go-f2:松手进入二楼
+   */
+  onRefresherStatusChange?: (status: ZPagingEnums.RefresherStatus) => void
+
+  /**
+   * 自定义下拉刷新下拉开始
+   * - use-custom-refresher为false时无效
+   * @param y 当前触摸开始的屏幕点的y值(单位px)
+   */
+  onRefresherTouchstart?: (y: number) => void
+  
+  /**
+   * 自定义下拉刷新下拉拖动中
+   * - use-custom-refresher为false时无效
+   * - 在使用wxs的平台上，为减少wxs与js通信折损，只有在z-paging添加@refresherTouchmove时，wxs才会实时将下拉拖动事件传给js，在微信小程序和QQ小程序中，因$listeners无效，所以必须设置:watch-refresher-touchmove="true"方可使此事件被触发
+   * @param info touchmove信息
+   */
+  onRefresherTouchmove?: (info: ZPagingParams.RefresherTouchmoveInfo) => void
+
+  /**
+   * 自定义下拉刷新下拉结束
+   * - use-custom-refresher为false时无效
+   * @param y 当前触摸开始的屏幕点的y值(单位px)
+   */
+  onRefresherTouchend?: (y: number) => void
+
+  /**
+   * 下拉进入二楼状态改变
+   * - use-custom-refresher为false时无效
+   * @param y 当前触摸开始的屏幕点的y值(单位px)
+   * @since 2.7.7
+   */
+  onRefresherF2Change?: (status: ZPagingEnums.GoF2Status) => void
+
+  /**
+   * 自定义下拉刷新被触发
+   */
+  onRefresh?: () => void
+
+  /**
+   * 自定义下拉刷新被复位
+   */
+  onRestore?: () => void
+
+  // ******************** 底部加载更多相关事件 ********************
+  /**
+   * 自定义下拉刷新状态改变
+   * - use-custom-refresher为false时无效
+   * @param status 底部加载更多状态：default:默认状态 loading:加载中 no-more:没有更多数据 fail:加载失败
+   */
+  onLoadingStatusChange?: (status: ZPagingEnums.LoadMoreStatus) => void
+
+  // ******************** 空数据与加载失败相关事件 ********************
+  /**
+   * 点击了空数据图中的重新加载按钮
+   * @param handler 点击空数据图中重新加载后是否进行reload操作，默认为是。如果需要禁止reload事件，则调用handler(false)
+   * @since 1.8.0
+   */
+  onEmptyViewReload?: (handler: ZPagingParams.DefaultEventHandler) => void
+
+  /**
+   * 点击了空数据图view
+   * @since 2.3.3
+   */
+  onEmptyViewClick?: () => void
+
+  /**
+   * z-paging请求失败状态改变
+   * @param isLoadFailed 当前是否是请求失败状态，为true代表是，反之为否；默认状态为否
+   * @since 2.5.0
+   */
+  onIsLoadFailedChange?: (isLoadFailed: boolean) => void
+
+  // ******************** 返回顶部按钮相关事件 ********************
+  /**
+   * 点击了返回顶部按钮
+   * @param handler 点击返回顶部按钮后是否滚动到顶部，默认为是。如果需要禁止滚动到顶部事件，则调用handler(false)
+   * @since 2.6.1
+   */
+  onBackToTopClick?: (handler: ZPagingParams.DefaultEventHandler) => void
+
+  // ******************** 虚拟列表&内置列表相关事件 ********************
+  /**
+   * 虚拟列表当前渲染的数组改变时触发，在虚拟列表中只会渲染可见区域内+预加载页面的数据
+   * - nvue无效
+   * @param list 虚拟列表当前渲染的数组
+   * @since 2.2.7
+   */
+  onVirtualListChange?: (list: any[]) => void
+
+  /**
+   * 使用虚拟列表或内置列表时点击了cell
+   * - nvue无效
+   * @param list 虚拟列表当前渲染的数组
+   * @since 2.4.0
+   */
+  onInnerCellClick?: (info: ZPagingParams.InnerCellClickInfo) => void
+
+  /**
+   * 虚拟列表顶部占位高度改变
+   * - nvue无效
+   * @param height 虚拟列表顶部占位高度(单位：px)
+   * @since 2.7.12
+   */
+  onVirtualPlaceholderTopHeight?: (height: number) => void
+
+  // ******************** 聊天记录模式相关事件 ********************
+  /**
+   * 在聊天记录模式下，触摸列表隐藏了键盘
+   * - nvue无效
+   * @since 2.3.6
+   */
+  onHidedKeyboard?: () => void
+  
+  /**
+   * 键盘高度改变
+   * @param info 键盘高度信息
+   * @since 2.7.1
+   */
+  onKeyboardHeightChange?: (info: ZPagingParams.KeyboardHeightInfo) => void
+
+  /**
+   * z-paging列表滚动时触发
+   * @param event 滚动事件信息，vue使用_ScrollInfo，nvue使用_ScrollInfoN
+   */
+  onScroll?: (event: ZPagingParams.ScrollInfo | ZPagingParams.ScrollInfoN) => void
+
+  /**
+   * scrollTop改变时触发，使用点击返回顶部时需要获取scrollTop时可使用此事件
+   * @param scrollTop 
+   */
+  onScrollTopChange?: (scrollTop: number) => void
+
+  /**
+   * z-paging内置的scroll-view/list-view/waterfall滚动底部时触发
+   */
+  onScrolltolower?: () => void
+
+  /**
+   * z-paging内置的scroll-view/list-view/waterfall滚动顶部时触发
+   */
+  onScrolltoupper?: () => void
+
+  /**
+   * z-paging内置的list滚动结束时触发
+   * - 仅nvue有效
+   * @param event 滚动结束时触发事件信息
+   * @since 2.7.3
+   */
+  onScrollend?: (event: ZPagingParams.ScrollendEvent) => void
+
+  // ******************** 布局&交互相关事件 ********************
+  /**
+   * z-paging中内容高度改变时触发
+   * @param height 改变后的高度
+   * @since 2.1.3
+   */
+  onContentHeightChanged?: (height: number) => void
+
+  /**
+   * 监听列表触摸方向改变
+   * - nvue无效
+   * - 必须同时设置:watch-touch-direction-change="true"
+   * @param direction 列表触摸的方向，top代表用户将列表向上移动(scrollTop不断减小)，bottom代表用户将列表向下移动(scrollTop不断增大)
+   * @since 2.3.0
+   */
+  onTouchDirectionChange?: (direction: ZPagingEnums.TouchDirection) => void
+}
+
+
+// ****************************** Slots ******************************
+declare interface ZPagingSlots {
+  // ******************** 主体布局Slot ********************
+  /**
+   * 默认插入的列表view
+   */
+  ['default']?: () => any
+
+  /**
+   * 可以将自定义导航栏、tab-view等需要固定的(不需要跟着滚动的)元素放入slot="top"的view中。
+   * 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="top"。需要固定在顶部的view请勿设置position: fixed;
+   * @since 1.5.5
+   */
+  ['top']?: () => any
+
+  /**
+   * 可以将需要固定在底部的(不需要跟着滚动的)元素放入slot="bottom"的view中。
+   * 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="bottom"。需要固定在底部的view请勿设置position: fixed;
+   * @since 1.6.2
+   */
+  ['bottom']?: () => any
+
+  /**
+   * 可以将需要固定在左侧的(不需要跟着滚动的)元素放入slot="left"的view中。
+   * 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="left"。需要固定在左侧的view请勿设置position: fixed;
+   * @since 2.2.3
+   */
+  ['left']?: () => any
+
+  /**
+   * 可以将需要固定在左侧的(不需要跟着滚动的)元素放入slot="right"的view中。
+   * 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="right"。需要固定在右侧的view请勿设置position: fixed;
+   * @since 2.2.3
+   */
+  ['right']?: () => any
+
+  // ******************** 下拉刷新Slot ********************
+  /**
+   * 自定义下拉刷新view，设置后则不使用uni自带的下拉刷新view和z-paging自定义的下拉刷新view。此view的style必须设置为height:100%
+   * - 在非nvue中，自定义下拉刷新view的高度受refresher-threshold控制，因此如果它的高度不为默认的80rpx，则需要设置refresher-threshold="自定义下拉刷新view的高度"
+   * @param refresherStatus 下拉刷新状态：default:默认状态 release-to-refresh:松手立即刷新 loading:刷新中 complete:刷新结束 go-f2:松手进入二楼
+   */
+  ['refresher']?: (props: ZPagingParams.RefresherSlotProps) => any
+
+  /**
+   * 自定义结束状态下的下拉刷新view，若设置，当下拉刷新结束时，会替换当前状态下的下拉刷新view。
+   * - 注意：默认情况下您无法看到结束状态的下拉刷新view，除非您设置了refresher-complete-delay并且值足够大，例如：500
+   * @since 2.1.1
+   */
+  ['refresherComplete']?: () => any
+
+  /**
+   * 自定义松手显示二楼状态下的view
+   * @since 2.7.7
+   */
+  ['refresherF2']?: () => any
+
+  /**
+   * 自定义需要插入二楼的view
+   * @since 2.7.7
+   */
+  ['f2']?: () => any
+
+  // ******************** 底部加载更多Slot ********************
+  /**
+   * 自定义滑动到底部"默认"状态的view(即"点击加载更多view")
+   */
+  ['loadingMoreDefault']?: () => any
+
+  /**
+   * 自定义滑动到底部"加载中"状态的view
+   */
+  ['loadingMoreLoading']?: () => any
+
+  /**
+   * 自定义滑动到底部"没有更多数据"状态的view
+   */
+  ['loadingMoreNoMore']?: () => any
+
+  /**
+   * 自定义滑动到底部"加载失败"状态的view
+   */
+  ['loadingMoreFail']?: () => any
+
+  // ******************** 空数据图Slot ********************
+  /**
+   * 自定义空数据占位view
+   * @param isLoadFailed 是否加载失败：true: 加载失败，false: 加载成功
+   */
+  ['empty']?: (props: ZPagingParams.EmptySlotProps) => any
+
+  // ******************** 全屏Loading Slot ********************
+  /**
+   * 自定义页面reload时的加载view
+   * - 注意：这个slot默认仅会在第一次加载时显示，若需要每次reload时都显示，需要将auto-hide-loading-after-first-loaded设置为false
+   */
+  ['loading']?: () => any
+
+  // ******************** 返回顶部按钮Slot ********************
+  /**
+   * 自定义点击返回顶部view
+   * - 注意：此view受“【返回顶部按钮】配置”控制，且其父view默认宽高为76rpx
+   * @since 1.9.4
+   */
+  ['backToTop']?: () => any
+
+  // ******************** 虚拟列表&内置列表Slot ********************
+  /**
+   * 内置列表中的cell
+   * - use-virtual-list或use-inner-list为true时有效
+   * @param item 当前item
+   * @param index 当前index
+   * @since 2.2.5
+   */
+  ['cell']?: (props: ZPagingParams.InnerListCellSlotProps) => any
+
+  /**
+   * 内置列表中的header(在cell顶部且跟随列表滚动)
+   * - use-virtual-list或use-inner-list为true时有效
+   * @since 2.2.5
+   */
+  ['header']?: () => any
+
+  /**
+   * 内置列表中的footer(在cell顶部且跟随列表滚动)
+   * - use-virtual-list或use-inner-list为true时有效
+   * @since 2.2.5
+   */
+  ['footer']?: () => any
+
+  // ******************** 聊天记录模式Slot ********************
+  /**
+   * 使用聊天记录模式时自定义顶部加载更多view(除没有更多数据外)
+   * - use-chat-record-mode为true时有效
+   * @param loadingMoreStatus 底部加载更多状态：default:默认状态 loading:加载中 no-more:没有更多数据 fail:加载失败
+   */
+  ['chatLoading']?: (props: ZPagingParams.ChatLoadingSlotProps) => any
+
+  /**
+   * 使用聊天记录模式时自定义没有更多数据view
+   * - use-chat-record-mode为true时有效
+   * @since 2.7.5
+   */
+  ['chatNoMore']?: () => any
+}
+
+// ****************************** Methods ******************************
+declare interface _ZPagingRef<T = any> {
+  // ******************** 数据刷新&处理方法 ********************
+  /**
+   * 重新加载分页数据，pageNo恢复为默认值，相当于下拉刷新的效果
+   *
+   * @param [animate=false] 是否展示下拉刷新动画
+   */
+  reload: (animate?: boolean) => Promise< ZPagingParams.ReturnData<T>>;
+
+  /**
+   * 刷新列表数据，pageNo和pageSize不会重置，列表数据会重新从服务端获取
+   *
+   * @since 2.0.4
+   * @returns {Promise<ZPagingParams.ReturnData<T>>} Promise，当前最新分页结果：
+   * - resolve 操作成功
+   * - - `totalList` (T[]): 当前总列表
+   * - - `noMore` (boolean): 是否没有更多数据
+   * - reject 操作失败
+   */
+  refresh: () => Promise<ZPagingParams.ReturnData<T>>;
+
+  /**
+   * 刷新列表数据至指定页
+   *
+   * @since 2.5.9
+   * @param page 目标页数
+   * @returns {Promise<ZPagingParams.ReturnData<T>>} Promise，当前最新分页结果：
+   * - resolve 操作成功
+   * - - `totalList` (T[]): 当前总列表
+   * - - `noMore` (boolean): 是否没有更多数据
+   * - reject 操作失败
+   */
+  refreshToPage: (page: number) => Promise<ZPagingParams.ReturnData<T>>;
+
+  /**
+   * 请求结束
+   * - 当通过complete传进去的数组长度小于pageSize时，则判定为没有更多了
+   *
+   * @param [data] 请求结果数组
+   * @param [success=true] 是否请求成功
+   * @returns {Promise<ZPagingParams.ReturnData<T>>} Promise，当前最新分页结果：
+   * - resolve 操作成功
+   * - - `totalList` (T[]): 当前总列表
+   * - - `noMore` (boolean): 是否没有更多数据
+   * - reject 操作失败
+   */
+  complete: (data?: T[] | false, success?: boolean) => Promise<ZPagingParams.ReturnData<T>>;
+
+  /**
+   * 请求结束
+   * - 通过total判断是否有更多数据
+   *
+   * @since 2.0.6
+   * @param data 请求结果数组
+   * @param total 列表总长度
+   * @param [success=true] 是否请求成功
+   * @returns {Promise<ZPagingParams.ReturnData<T>>} Promise，当前最新分页结果：
+   * - resolve 操作成功
+   * - - `totalList` (T[]): 当前总列表
+   * - - `noMore` (boolean): 是否没有更多数据
+   * - reject 操作失败
+   */
+  completeByTotal: (data: T[], total: number, success?: boolean) => Promise<ZPagingParams.ReturnData<T>>;
+
+  /**
+   * 请求结束
+   * - 自行判断是否有更多数据
+   *
+   * @since 1.9.2
+   * @param data 请求结果数组
+   * @param noMore 是否没有更多数据
+   * @param [success=true] 是否请求成功
+   * @returns {Promise<ZPagingParams.ReturnData<T>>} Promise，当前最新分页结果：
+   * - resolve 操作成功
+   * - - `totalList` (T[]): 当前总列表
+   * - - `noMore` (boolean): 是否没有更多数据
+   * - reject 操作失败
+   */
+  completeByNoMore: (data: T[], noMore: boolean, success?: boolean) => Promise<ZPagingParams.ReturnData<T>>;
+
+  /**
+   * 请求失败
+   * - 通过方法传入请求失败原因，将请求失败原因传递给z-paging展示
+   *
+   * @since 2.6.3
+   * @param cause 请求失败原因
+   * @returns {Promise<ZPagingParams.ReturnData<T>>} Promise，当前最新分页结果：
+   * - resolve 操作成功
+   * - - `totalList` (T[]): 当前总列表
+   * - - `noMore` (boolean): 是否没有更多数据
+   * - reject 操作失败
+   */
+  completeByError: (cause: string) => Promise<ZPagingParams.ReturnData<T>>;
+
+  /**
+   * 请求结束
+   * - 保证数据一致
+   *
+   * @since 1.6.4
+   * @param data 请求结果数组
+   * @param key dataKey，需与:data-key绑定的一致
+   * @param [success=true] 是否请求成功
+   * @returns {Promise<ZPagingParams.ReturnData<T>>} Promise，当前最新分页结果：
+   * - resolve 操作成功
+   * - - `totalList` (T[]): 当前总列表
+   * - - `noMore` (boolean): 是否没有更多数据
+   * - reject 操作失败
+   */
+  completeByKey: (data: T[], key: string, success?: boolean) => Promise<ZPagingParams.ReturnData<T>>;
+
+  /**
+   * 清空分页数据，pageNo恢复为默认值
+   *
+   * @since 2.1.0
+   */
+  clear: () => void;
+
+  /**
+   * 从顶部添加数据，不会影响分页的pageNo和pageSize
+   *
+   * @param data 需要添加的数据，可以是一条数据或一组数据
+   * @param [scrollToTop=true] 是否滚动到顶部，不填默认为true
+   * @param [animate=true] 是否使用动画滚动到顶部
+   */
+  addDataFromTop: (data: _Arrayable<T>, scrollToTop?: boolean, animate?: boolean) => void;
+
+  /**
+   * 【不推荐】重新设置列表数据，调用此方法不会影响pageNo和pageSize，也不会触发请求
+   * - 适用场景：当需要删除列表中某一项时，将删除对应项后的数组通过此方法传递给z-paging
+   *
+   * @param data 修改后的列表数组
+   */
+  resetTotalData: (data: T[]) => void;
+
+  // ******************** 下拉刷新相关方法 ********************
+  /**
+   * 终止下拉刷新状态
+   *
+   * @since 2.1.0
+   */
+  endRefresh: () => void;
+
+  /**
+   * 手动更新自定义下拉刷新view高度
+   * - 常用于某些情况下使用slot="refresher"插入的view高度未能正确计算导致异常时手动更新其高度
+   *
+   * @since 2.6.1
+   */
+  updateCustomRefresherHeight: () => void;
+
+  /**
+   * 手动关闭二楼
+   *
+   * @since 2.7.7
+   */
+  closeF2: () => void;
+
+  // ******************** 底部加载更多相关方法 ********************
+  /**
+   * 手动触发上拉加载更多
+   * - 非必须，可依据具体需求使用，例如当z-paging未确定高度时，内部的scroll-view会无限增高，此时z-paging无法得知是否滚动到底部，您可以在页面的onReachBottom中手动调用此方法触发上拉加载更多
+   *
+   * @param [source] 触发加载更多的来源类型
+   */
+  doLoadMore: (source?: "click" | "toBottom") => void;
+
+  // ******************** 页面滚动&布局相关方法 ********************
+  /**
+   * 当使用页面滚动并且自定义下拉刷新时，请在页面的onPageScroll中调用此方法，告知z-paging当前的pageScrollTop，否则会导致在任意位置都可以下拉刷新
+   * - 若引入了mixins，则不需要调用此方法
+   *
+   * @param scrollTop 从page的onPageScroll中获取的scrollTop
+   */
+  updatePageScrollTop: (scrollTop: number) => void;
+
+  /**
+   * 在使用页面滚动并且设置了slot="top"时，默认初次加载会自动获取其高度，并使内部容器下移，当slot="top"的view高度动态改变时，在其高度需要更新时调用此方法
+   */
+  updatePageScrollTopHeight: () => void;
+
+  /**
+   * 在使用页面滚动并且设置了slot="bottom"时，默认初次加载会自动获取其高度，并使内部容器下移，当slot="bottom"的view高度动态改变时，在其高度需要更新时调用此方法
+   */
+  updatePageScrollBottomHeight: () => void;
+
+  /**
+   * 更新slot="left"和slot="right"宽度，当slot="left"或slot="right"宽度动态改变后调用
+   *
+   * @since 2.3.5
+   */
+  updateLeftAndRightWidth: () => void;
+
+  /**
+   * 更新fixed模式下z-paging的布局，在onShow时候调用，以修复在iOS+h5+tabbar+fixed+底部有安全区域的设备中从tabbar页面跳转到无tabbar页面后返回，底部有一段空白区域的问题
+   *
+   * @since 2.6.5
+   */
+  updateFixedLayout: () => void;
+
+  // ******************** 虚拟列表相关方法 ********************
+  /**
+   * 在使用动态高度虚拟列表时，若在列表数组中需要插入某个item，需要调用此方法
+   *
+   * @since 2.5.9
+   * @param item 插入的数据项
+   * @param index 插入的cell位置，若为2，则插入的item在原list的index=1之后，从0开始
+   */
+  doInsertVirtualListItem: (item: T, index: number) => void;
+
+  /**
+   * 在使用动态高度虚拟列表时，手动更新指定cell的缓存高度
+   * - 当cell高度在初始化之后再次改变时调用
+   *
+   * @since 2.4.0
+   * @param index 需要更新的cell在列表中的位置，从0开始
+   */
+  didUpdateVirtualListCell: (index: number) => void;
+
+  /**
+   * 在使用动态高度虚拟列表时，若删除了列表数组中的某个item，需要调用此方法以更新高度缓存数组
+   *
+   * @since 2.4.0
+   * @param index 需要更新的cell在列表中的位置，从0开始
+   */
+  didDeleteVirtualListCell: (index: number) => void;
+
+  /**
+   * 手动触发虚拟列表渲染更新，可用于解决例如修改了虚拟列表数组中元素，但展示未更新的情况
+   *
+   * @since 2.7.11
+   */
+  updateVirtualListRender: () => void;
+
+  // ******************** 本地分页相关方法 ********************
+  /**
+   * 设置本地分页，请求结束(成功或者失败)调用此方法，将请求的结果传递给z-paging作分页处理
+   * - 若调用了此方法，则上拉加载更多时内部会自动分页，不会触发@query所绑定的事件
+   *
+   * @param data 请求结果数组
+   * @param [success=true] 是否请求成功
+   * @returns {Promise<ZPagingParams.ReturnData<T>>} Promise，当前最新分页结果：
+   * - resolve 操作成功
+   * - - `totalList` (T[]): 当前总列表
+   * - - `noMore` (boolean): 是否没有更多数据
+   * - reject 操作失败
+   */
+  setLocalPaging: (data: T[], success?: boolean) => Promise<ZPagingParams.ReturnData<T>>;
+
+  // ******************** 聊天记录模式相关方法 ********************
+  /**
+   * 手动触发滚动到顶部加载更多，聊天记录模式时有效
+   */
+  doChatRecordLoadMore: () => void;
+
+  /**
+   * 添加聊天记录，use-chat-record-mode为true时有效
+   *
+   * @param data 需要添加的聊天数据，可以是一条数据或一组数据
+   * @param [scrollToBottom=true] 是否滚动到底部
+   * @param [animate=true] 是否使用动画滚动到底部
+   */
+  addChatRecordData: (data: _Arrayable<T>, scrollToBottom?: boolean, animate?: boolean) => void;
+
+  // ******************** 滚动到指定位置方法 ********************
+  /**
+   * 滚动到顶部
+   *
+   * @param [animate=true] 是否有动画效果
+   */
+  scrollToTop: (animate?: boolean) => void;
+
+  /**
+   * 滚动到底部
+   *
+   * @param [animate=true] 是否有动画效果
+   */
+  scrollToBottom: (animate?: boolean) => void;
+
+  /**
+   * 滚动到指定view
+   * - vue中有效，若此方法无效，请使用scrollIntoViewByNodeTop
+   *
+   * @param id 需要滚动到的view的id值，不包含"#"
+   * @param [offset=0] 偏移量，单位为px
+   * @param [animate=false] 是否有动画效果
+   */
+  scrollIntoViewById: (id: string, offset?: number, animate?: boolean) => void;
+
+  /**
+   * 滚动到指定view
+   * - vue中有效
+   *
+   * @since 1.7.4
+   * @param top 需要滚动的view的top值(通过uni.createSelectorQuery()获取)
+   * @param [offset=0] 偏移量，单位为px
+   * @param [animate=false] 是否有动画效果
+   */
+  scrollIntoViewByNodeTop: (top: number, offset?: number, animate?: boolean) => void;
+
+  /**
+   * y轴滚动到指定位置
+   * - vue中有效
+   * - 与scrollIntoViewByNodeTop的不同之处在于，scrollToY传入的是view相对于屏幕的top值，而scrollIntoViewByNodeTop传入的top值并非是固定的，通过uni.createSelectorQuery()获取到的top会因列表滚动而改变
+   *
+   * @since 2.1.0
+   * @param y 与顶部的距离，单位为px
+   * @param [offset=0] 偏移量，单位为px
+   * @param [animate=false] 是否有动画效果
+   */
+  scrollToY: (y: number, offset?: number, animate?: boolean) => void;
+
+  /**
+   * x轴滚动到指定位置
+   * - 非页面滚动且在vue中有效
+   *
+   * @since 2.8.5
+   * @param x 与左侧的距离，单位为px
+   * @param [offset=0] 偏移量，单位为px
+   * @param [animate=false] 是否有动画效果
+   */
+  scrollToX: (x: number, offset?: number, animate?: boolean) => void;
+
+  /**
+   * 滚动到指定view
+   * - nvue或虚拟列表中有效
+   * - 在nvue中的cell必须设置 :ref="`z-paging-${index}`"
+   *
+   * @param index 需要滚动到的view的index(第几个)
+   * @param [offset=0] 偏移量，单位为px
+   * @param [animate=false] 是否有动画效果
+   */
+  scrollIntoViewByIndex: (index: number, offset?: number, animate?: boolean) => void;
+
+  /**
+   * 滚动到指定view
+   * - nvue中有效
+   *
+   * @param view 需要滚动到的view(通过this.$refs.xxx获取)
+   * @param [offset=0] 偏移量，单位为px
+   * @param [animate=false] 是否有动画效果
+   */
+  scrollIntoViewByView: (view: any, offset?: number, animate?: boolean) => void;
+
+  /**
+   * 设置nvue List的specialEffects
+   *
+   * @since 2.0.4
+   * @param args 参见https://uniapp.dcloud.io/component/list?id=listsetspecialeffects
+   */
+  setSpecialEffects: (args: ZPagingParams.SetSpecialEffectsArgs) => void;
+
+  // ******************** nvue独有方法 ********************
+  /**
+   * 与{@link setSpecialEffects}相同
+   *
+   * @since 2.0.4
+   */
+  setListSpecialEffects: (args: ZPagingParams.SetSpecialEffectsArgs) => void;
+
+  // ******************** 缓存相关方法 ********************
+  /**
+   * 手动更新列表缓存数据，将自动截取v-model绑定的list中的前pageSize条覆盖缓存，请确保在list数据更新到预期结果后再调用此方法
+   *
+   * @since 2.3.9
+   */
+  updateCache: () => void;
+
+  // ******************** 获取版本号方法 ********************
+  /**
+   * 获取当前版本号
+   */
+  getVersion: () => string;
+}
+
+declare interface _ZPaging {
+  new (): {
+    $props: AllowedComponentProps &
+      VNodeProps &
+      ZPagingProps
+    $slots: ZPagingSlots
+  }
+}
+
+export declare const ZPaging: _ZPaging
+
+declare global {
+  interface ZPagingRef<T = any> extends _ZPagingRef<T> {}
+  // 兼容v2.8.1之前的旧版本
+  interface ZPagingInstance<T = any> extends _ZPagingRef<T> {}
+}
diff --git a/src/uni_modules/z-paging/types/index.d.ts b/src/uni_modules/z-paging/types/index.d.ts
new file mode 100644
index 00000000..7a2092db
--- /dev/null
+++ b/src/uni_modules/z-paging/types/index.d.ts
@@ -0,0 +1,24 @@
+/// <reference path="./comps.d.ts" />
+declare module 'z-paging' {
+  export function install() : void
+  /**
+   * z-paging全局配置
+   * - uni.$zp
+   *
+   * @since 2.6.5
+   */
+  interface $zp {
+    /**
+     * 全局配置
+     */
+    config : Record<string, any>;
+  }
+  global {
+    interface Uni {
+      $zp : $zp
+    }
+  }
+}
+
+declare type ZPagingSwiperRef = typeof import('./comps/z-paging-swiper')['ZPagingSwiperRef']
+declare type ZPagingSwiperItemRef = typeof import('./comps/z-paging-swiper-item')['ZPagingSwiperItemRef']
\ No newline at end of file
diff --git a/src/utils/textUtils.js b/src/utils/textUtils.js
new file mode 100644
index 00000000..f6231a0d
--- /dev/null
+++ b/src/utils/textUtils.js
@@ -0,0 +1,34 @@
+// sheep/utils/textUtils.js
+export function measureTextWidth(text, fontSize = 14, fontFamily = 'sans-serif') {
+  // 钉钉小程序没有 uni.createCanvasContext 方法
+  if (typeof uni === 'undefined' || typeof uni.createCanvasContext !== 'function') {
+    return estimateTextWidth(text, fontSize);
+  }
+
+  try {
+    const ctx = uni.createCanvasContext('tempCanvasForText');
+    ctx.setFontSize(fontSize);
+    ctx.font = `${fontSize}px ${fontFamily}`;
+    const metrics = ctx.measureText(text);
+    return metrics.width;
+  } catch (e) {
+    // 某些平台可能不支持 measureText，降级使用估算
+    return estimateTextWidth(text, fontSize);
+  }
+}
+
+// 简单估算中文和英文字符宽度
+function estimateTextWidth(text, fontSize = 14) {
+  let width = 0;
+  for (let i = 0; i < text.length; i++) {
+    const charCode = text.charCodeAt(i);
+    if (charCode >= 0x4e00 && charCode <= 0x9fff) {
+      // 中文字符
+      width += fontSize;
+    } else {
+      // 英文字符
+      width += fontSize * 0.5;
+    }
+  }
+  return width;
+}
diff --git a/vite.config.ts b/vite.config.ts
index bba19c90..0bfbb4b3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,8 +2,8 @@ import uni from '@dcloudio/vite-plugin-uni';
 import { loadEnv } from 'vite';
 import viteCompression from 'vite-plugin-compression';
 import path from 'path';
-// import uniReadPagesV3Plugin from '@/sheep/router/utils/uni-read-pages-v3';
-// import mpliveMainfestPlugin from '@/sheep/libs/mplive-manifest-plugin';
+// import uniReadPagesV3Plugin from './src/sheep/router/utils/uni-read-pages-v3';
+// import mpliveMainfestPlugin from './src/sheep/libs/mplive-manifest-plugin';
 
 // https://vitejs.dev/config/
 export default async (command: 'build' | 'serve', mode: string) => {
@@ -13,13 +13,13 @@ export default async (command: 'build' | 'serve', mode: string) => {
   return {
     envPrefix: 'SHOPRO_',
     plugins: [
-      Unocss(),
       uni(),
+      Unocss(),
       viteCompression({
         verbose: false,
       }),
       // uniReadPagesV3Plugin({
-      //   pagesJsonDir: path.resolve(__dirname, './pages.json'),
+      //   pagesJsonDir: path.resolve(__dirname, './src/pages.json'),
       //   includes: ['path', 'aliasPath', 'name', 'meta'],
       // }),
       // mpliveMainfestPlugin(env.SHOPRO_MPLIVE_ON),
diff --git a/yarn.lock b/yarn.lock
index f9dda382..62e5e23f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2664,9 +2664,9 @@ base64url@^3.0.1:
   integrity sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A==
 
 baseline-browser-mapping@^2.8.25:
-  version "2.8.26"
-  resolved "https://registry.npmmirror.com/baseline-browser-mapping/-/baseline-browser-mapping-2.8.26.tgz#2c7e2f840f0ae4d83782bdfe795229a43dfc3e59"
-  integrity sha512-73lC1ugzwoaWCLJ1LvOgrR5xsMLTqSKIEoMHVtL9E/HNk0PXtTM76ZIm84856/SF7Nv8mPZxKoBsgpm0tR1u1Q==
+  version "2.8.29"
+  resolved "https://registry.npmmirror.com/baseline-browser-mapping/-/baseline-browser-mapping-2.8.29.tgz#d8800b71399c783cb1bf2068c2bcc3b6cfd7892c"
+  integrity sha512-sXdt2elaVnhpDNRDz+1BDx1JQoJRuNk7oVlAlbGiFkLikHCAQiccexF/9e91zVi6RCgqspl04aP+6Cnl9zRLrA==
 
 binary-extensions@^2.0.0:
   version "2.3.0"
@@ -2717,7 +2717,7 @@ browserslist-to-esbuild@^2.1.1:
   dependencies:
     meow "^13.0.0"
 
-browserslist@^4.23.0, browserslist@^4.24.0, browserslist@^4.26.3, browserslist@^4.27.0:
+browserslist@^4.23.0, browserslist@^4.24.0, browserslist@^4.27.0, browserslist@^4.28.0:
   version "4.28.0"
   resolved "https://registry.npmmirror.com/browserslist/-/browserslist-4.28.0.tgz#9cefece0a386a17a3cd3d22ebf67b9deca1b5929"
   integrity sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==
@@ -2778,9 +2778,9 @@ call-bound@^1.0.2:
     get-intrinsic "^1.3.0"
 
 caniuse-lite@^1.0.30001754:
-  version "1.0.30001754"
-  resolved "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001754.tgz#7758299d9a72cce4e6b038788a15b12b44002759"
-  integrity sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==
+  version "1.0.30001755"
+  resolved "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001755.tgz#c01cfb1c30f5acf1229391666ec03492f4c332ff"
+  integrity sha512-44V+Jm6ctPj7R52Na4TLi3Zri4dWUljJd+RDm+j8LtNCc/ihLCT+X1TzoOAkRETEWqjuLnh9581Tl80FvK7jVA==
 
 centra@^2.7.0:
   version "2.7.0"
@@ -2892,16 +2892,16 @@ copy-text-to-clipboard@^3.0.1:
   integrity sha512-T6SqyLd1iLuqPA90J5N4cTalrtovCySh58iiZDGJ6FGznbclKh4UI+FGacQSgFzwKG77W7XT5gwbVEbd9cIH1A==
 
 core-js-compat@^3.43.0:
-  version "3.46.0"
-  resolved "https://registry.npmmirror.com/core-js-compat/-/core-js-compat-3.46.0.tgz#0c87126a19a1af00371e12b02a2b088a40f3c6f7"
-  integrity sha512-p9hObIIEENxSV8xIu+V68JjSeARg6UVMG5mR+JEUguG3sI6MsiS1njz2jHmyJDvA+8jX/sytkBHup6kxhM9law==
+  version "3.47.0"
+  resolved "https://registry.npmmirror.com/core-js-compat/-/core-js-compat-3.47.0.tgz#698224bbdbb6f2e3f39decdda4147b161e3772a3"
+  integrity sha512-IGfuznZ/n7Kp9+nypamBhvwdwLsW6KC8IOaURw2doAK5e98AG3acVLdh0woOnEqCfUtS+Vu882JE4k/DAm3ItQ==
   dependencies:
-    browserslist "^4.26.3"
+    browserslist "^4.28.0"
 
 core-js@^3.11.0, core-js@^3.36.0, core-js@^3.4.1:
-  version "3.46.0"
-  resolved "https://registry.npmmirror.com/core-js/-/core-js-3.46.0.tgz#323a092b96381a9184d0cd49ee9083b2f93373bb"
-  integrity sha512-vDMm9B0xnqqZ8uSBpZ8sNtRtOdmfShrvT6h2TuQGLs0Is+cR0DYbj/KWP6ALVNbWPpqA/qPLoOuppJN07humpA==
+  version "3.47.0"
+  resolved "https://registry.npmmirror.com/core-js/-/core-js-3.47.0.tgz#436ef07650e191afeb84c24481b298bd60eb4a17"
+  integrity sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==
 
 cross-env@^7.0.3:
   version "7.0.3"
@@ -2963,9 +2963,9 @@ cssesc@^3.0.0:
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
 csstype@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
-  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+  version "3.2.3"
+  resolved "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz#ec48c0f3e993e50648c86da559e2610995cf989a"
+  integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==
 
 dayjs@^1.11.13, dayjs@^1.11.7:
   version "1.11.19"
@@ -3043,9 +3043,9 @@ ee-first@1.1.1:
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
 electron-to-chromium@^1.5.249:
-  version "1.5.250"
-  resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.250.tgz#0b40436fa41ae7cbac3d2f60ef0411a698eb72a7"
-  integrity sha512-/5UMj9IiGDMOFBnN4i7/Ry5onJrAGSbOGo3s9FEKmwobGq6xw832ccET0CE3CkkMBZ8GJSlUIesZofpyurqDXw==
+  version "1.5.255"
+  resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.255.tgz#fe9294ce172241eb50733bc00f2bd00d9c1e4ec7"
+  integrity sha512-Z9oIp4HrFF/cZkDPMpz2XSuVpc1THDpT4dlmATFlJUIBVCy9Vap5/rIXsASP1CscBacBqhabwh8vLctqBwEerQ==
 
 encodeurl@~1.0.2:
   version "1.0.2"