@xtdev/xt-miniprogram-ui 1.0.15 → 1.0.18

package/README.md

@@ -65,4 +65,17 @@ import组件：
 | suffix  | node   |        | 后缀图标节点 |
 | onChange| (event) => {} |        | 输入框值改变时的回调函数          | -->
 
-# 开发 TODO
+# 开发
+## 安装
+
+```
+npm install
+```
+## 构建
+
+```
+npm run dev
+```
+## 预览
+打开小程序开发工具，导入项目。
+更改src中源文件，实时更新预览。

package/libs/xt-cell/README.md

@@ -0,0 +1,41 @@
+# cell
+
+### 介绍
+常用于数据展示
+
+### 效果图
+![效果图](https://img.tanjiu.cn/home/K4QMiYQ5AZDzGzaPbCWh4YiEs4SaQ76Y.png)
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-cell": "@xtdev/xt-miniprogram-ui/xt-cell",
+}
+```
+
+## 代码演示
+
+### 默认模式，
+```
+<xt-cell></xt-cell>
+```
+
+
+## API
+
+#### xt-cell props
+
+| 参数      | 说明 |  类型 | 默认值 |
+| ----------- | ----------- | ---------- | ---------- |
+| title      | 标题 | `string` ||
+| detailsMessage | 详细信息 | `string` ||
+| abstract | 摘要 | `string` ||
+| leftIcon | icon | `string` ||
+| leftIconSize | icond大小 | `string` |40|
+|  |  |  ||
+|  |  |  ||
+
+#### 事件
+
+无

package/libs/xt-cell/index.js

@@ -0,0 +1,42 @@
+Component({
+    options: {
+        multipleSlots: true
+    },
+    properties: {
+        title: {
+            type: String,
+            value: ""
+        },
+        detailsMessage: {
+            type: String,
+            value: ""
+        },
+        abstract: {
+            type: String,
+            value: ""
+        },
+        leftIcon: {
+            type: String,
+            value: ""
+        },
+        leftIconSize:{
+            type: String,
+            value: "40"
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+    },
+    attached: function () {
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+});

package/libs/xt-cell/index.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "multipleSlots": true,
+    "usingComponents": {
+        "xt-icon": "../xt-icon"
+    }
+}

package/libs/xt-cell/index.wxml

@@ -0,0 +1,12 @@
+<!--src/xt-cell/index.wxml-->
+<view class="xt-cell">
+    <xt-icon wx:if="{{leftIcon}}" class="xt-cell-left-icon" slot="left-icon" icon="{{leftIcon}}" size="{{leftIconSize}}"></xt-icon>
+    <view class="xt-cell-main">
+        <view class="xt-cell-main-top">
+            <view class="xt-cell-title">{{title}}</view>
+            <view class="xt-cell-subhead">{{detailsMessage}}</view>
+        </view>
+        <view wx:if="{{abstract}}" class="xt-cell-main-bottom">{{abstract}}</view>
+    </view>
+    <xt-icon class="xt-cell-right-icon" slot="right-icon" icon="youjiantou" size="32"></xt-icon>
+</view>

package/libs/xt-cell/index.wxss

@@ -0,0 +1,50 @@
+/* src/xt-cell/index.wxss */
+.xt-cell {
+    background-color: #fff;
+    padding: 32rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: PingFang SC-Regular, PingFang SC;
+}
+
+.xt-cell-title {
+    line-height: 56rpx;
+    font-size: 40rpx;
+    font-weight: 400;
+    flex-grow: 1;
+}
+
+.xt-cell-subhead {
+    line-height: 48rpx;
+    font-size: 34rpx;
+    font-weight: 400;
+    color: #666666;
+    flex-grow: 1;
+    text-align: right;
+}
+
+.xt-cell-left-icon {
+    margin-right: 24rpx;
+}
+
+.xt-cell-right-icon {
+    margin-left: 8rpx;
+}
+
+.xt-cell-main {
+    flex-grow: 1;
+}
+
+.xt-cell-main-top {
+    display: flex;
+    align-items: center;
+}
+
+.xt-cell-main-bottom {
+    line-height: 48rpx;
+    font-size: 34rpx;
+    font-weight: 400;
+    color: #666666;
+    margin-top: 8rpx;
+}

package/libs/xt-dialog/README.md

@@ -73,7 +73,7 @@
 <img src="https://img.tanjiu.cn/home/X2bAjz2FQc6mNewfhbNBQfHm6zTmfYzd.png" alt="输入样式" style="zoom:50%;" />
 
 ```html
-<xt-dialog type="inputText" show="{{showInputDialog}}" title="标题标题标题" message="" placeholder="请输入内容" confirmButtonText="确定" showCancelButton="{{true}}" cancelButtonText="取消" bind:inputConfirm="onInputConfirm" bind:cancel="onInputCancel"></xt-dialog>
+<xt-dialog type="inputText" show="{{showInputDialog}}" title="标题标题标题" message="" placeholder="请输入内容" confirmButtonText="确定" showCancelButton="{{true}}" cancelButtonText="取消" bind:confirm="onInputConfirm" bind:cancel="onInputCancel"></xt-dialog>
 ```
 
 ### 5 选择器样式
@@ -81,7 +81,7 @@
 <img src="https://img.tanjiu.cn/home/yKrCY5MnGFS3FcjJ6pJRz5fXmJEHrSay.png" alt="选择器样式" style="zoom:50%;" />
 
 ```html
-<xt-dialog type="choose" show="{{true}}" title="标题标题标题" chooiceItems="{{chooiceItems}}" confirmButtonText="确定" showCancelButton="{{true}}" cancelButtonText="取消" bind:chooseConfirm="onChooseConfirm" bind:cancel="onChooseCancel"></xt-dialog>
+<xt-dialog type="choose" show="{{true}}" title="标题标题标题" chooiceItems="{{chooiceItems}}" confirmButtonText="确定" showCancelButton="{{true}}" cancelButtonText="取消" bind:confirm="onChooseConfirm" bind:cancel="onChooseCancel"></xt-dialog>
 ```
 
 #### 1）常规情况下的 chooiceItems 参数
@@ -142,7 +142,12 @@ chooiceItems:[
 | label  | 选项的文本描述 | String                  |
 | remark | 选项的辅助信息 | String                  |
 
+### Events
 
+| 事件         | 说明               | 回调参数     |
+| ------------ | ------------------ | ------------ |
+| bind:confirm | 点击确认按钮时触发 | event.detail |
+| bind:ccancel | 点击取消按钮时触发 | -            |
 
 
 

package/libs/xt-dialog/index.js

@@ -103,7 +103,7 @@ Component({
         }
         // 输入样式
         if(confirmtype == 'inputDialog'){
-          this.triggerEvent('inputConfirm', this.data.inpVal)
+          this.triggerEvent('confirm', this.data.inpVal)
         }
         // 选择样式
         if(confirmtype == 'chooseDialog'){
@@ -115,7 +115,7 @@ Component({
             })
             return
           }
-          this.triggerEvent('chooseConfirm', this.data.curChoosedItemVal)
+          this.triggerEvent('confirm', this.data.curChoosedItemVal)
         }
       },
       // 点击取消按钮

package/libs/xt-popover/README.md

@@ -0,0 +1,71 @@
+# Popover 底部弹窗
+
+### 介绍
+底部操作弹窗
+
+###效果图
+![效果图](https://img.tanjiu.cn/home/azzMHcemDKsstcMWTx7C5SeQM5yPwTwX.png "Popover效果图")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-popover": "@xtdev/xt-miniprogram-ui/xt-popover",
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+#### 操作样式
+
+```
+   <xt-popover show="{{isShow1}}" itemTextKey="name" operates="{{operates}}" type="{{type}}"  bind:onChooseItemClick="chooseItemClick" bind:onClose="closePopover"></xt-popover>
+```
+
+#### 文本样式
+
+```
+<xt-popover title="Popover 弹出框-文本样式" show="{{isShow2}}" type="{{type}}" textContent="{{textContent}}" bind:onClose="closePopover" bind:onConfirm="confirm"></xt-popover>
+```
+
+#### 选择样式-单选
+
+```
+<xt-popover title="Popover 弹出框-选择样式-单选" show="{{isShow3}}" type="{{type}}" itemTextKey="areaName" contrastId="areaId" bind:onConfirm="confirm" sourceData="{{sourceData}}" selectData="{{selectData}}" bind:onChooseItemClick="chooseItemClick" bind:onClose="closePopover"></xt-popover>
+```
+
+#### 选择样式-多选
+
+```
+<xt-popover title=" Popover 弹出框-选择样式-多选" show="{{isShow4}}" type="{{type}}" itemTextKey="areaName" contrastId="areaId" bind:onConfirm="confirm" sourceData="{{sourceData}}" selectData="{{selectData}}" bind:onChooseItemClick="chooseItemClick" bind:onClose="closePopover"></xt-popover>
+```
+
+## API
+
+#### xt-popover props
+
+| 参数         | 说明        |  类型      |  默认值        |
+| ----------- | ----------- | ---------- | ------------  |
+| type      | 弹窗类型，可选值为 `operate` `text` `single` `multiple` | string |  `operate`
+| zIndx      | z-index 层级 | number | `999`
+| title      | 弹窗标题                          | string |  `无`
+| show  | 是否展示弹窗                      | boolean | `false`
+| showCloseIcon      | 是否展示弹窗关闭图标 | boolean | `true`
+| textContent      | 弹窗类型为 `text` 的文本内容 | string |   `无`
+| itemTextKey      | 弹窗类型为 `operate`  `single` `multiple`    的文本内容的 key | string |    `无`
+| operates     | 弹窗类型为 `operate` 时的操作数组 | array |   `无`
+| sourceData      | 总的数据 | array |    `[]`
+| selectData      | 选中的数据 | array |  `[]`
+| contrastId      | 用于是否选中数据对比的依据 | string |   `无`
+
+
+
+####Events
+
+| 事件名            | 说明          |  回调参数               |
+| ---------------- | ------------- | ---------------------- |
+| bind:onChooseItemClick      |  弹窗类型为 `operate`  `single` `multiple` 点击没有项触发的事件 | event.detail.chooseItem 为选择的数据
+| bind:onClose      | 点击关闭icon触发的事件 
+bind:onConfirm | 弹窗类型为 `text`  `multiple` 时点击确定触发的事件 | event.detail.chooseData

package/libs/xt-popover/index.js

@@ -0,0 +1,209 @@
+Component({
+  behaviors: [],
+  observers: {},
+  properties: {
+    zIndx: {
+      type: Number,
+      value: 999,
+      observer: function () {},
+    },
+    // 弹窗标题
+    title: {
+      type: String,
+      value: "",
+      observer: function () {},
+    },
+    // 弹窗类型
+    type: {
+      type: String,
+      value: "operate",
+      observer: function () {},
+    },
+    show: {
+      type: Boolean,
+      value: false,
+      observer: async function (val) {
+        if (val) {
+          const res = await this.findIntersection();
+          this.setData({
+            sourceData: res,
+          });
+        }
+      },
+    },
+    showCloseIcon: {
+      type: Boolean,
+      value: true,
+      observer: function (val) {},
+    },
+
+    // 文本内容
+    textContent: {
+      type: String,
+      value: "",
+      observer: function () {},
+    },
+    // 列表每一项标题内容
+    itemTextKey: {
+      type: String,
+      value: "",
+      observer: function () {},
+    },
+    // 操作
+    operates: {
+      type: Array,
+      value: [],
+      observer: function () {},
+    },
+    // 源数据
+    sourceData: {
+      type: Array,
+      value: [],
+      observer: function (val) {},
+    },
+    // 选中数据
+    selectData: {
+      type: Array,
+      value: [],
+      observer: async function () {},
+    },
+    // 数据对比字段，用于找出选中的数据
+    contrastId: {
+      type: String,
+      value: "",
+      observer: function () {},
+    },
+  },
+  data: {
+    sourceData: [],
+    multipleChooseData: [],
+  },
+  methods: {
+    closePopover() {
+      this.triggerEvent("onClose");
+      this.resetSourceData();
+    },
+
+    async findIntersection() {
+      const { sourceData, selectData, contrastId, type } = this.data;
+
+      for (const selectItem of selectData) {
+        for (const sourceItem of sourceData) {
+          if (type === "multiple") {
+            if (selectItem[contrastId] == sourceItem[contrastId]) {
+              sourceItem.selected = true;
+            }
+          } else {
+            if (selectItem[contrastId] == sourceItem[contrastId]) {
+              sourceItem.selected = true;
+            } else {
+              sourceItem.selected = false;
+            }
+          }
+        }
+      }
+      return this.deepClone(sourceData);
+    },
+    // 重置数据
+    async resetSourceData() {
+      const { sourceData } = this.data;
+      for (const sourceItem of sourceData) {
+        delete sourceItem.selected;
+      }
+
+      this.setData({
+        sourceData: this.deepClone(sourceData),
+      });
+    },
+
+    async formatSourceData(chooseItem) {
+      const { sourceData, contrastId } = this.data;
+      for (const sourceItem of sourceData) {
+        if (
+          chooseItem[contrastId] == sourceItem[contrastId] &&
+          sourceItem.selected
+        ) {
+          sourceItem.selected = false;
+        } else if (
+          chooseItem[contrastId] == sourceItem[contrastId] &&
+          !sourceItem.selected
+        ) {
+          sourceItem.selected = true;
+        }
+      }
+      return sourceData;
+    },
+
+    confirm() {
+      const { sourceData } = this.data;
+      const chooseData = sourceData.filter((item) => item.selected);
+
+      const deleteSelected = chooseData.map((item) => {
+        delete item.selected;
+        return item;
+      });
+      this.triggerEvent("onConfirm", { chooseData: deleteSelected });
+    },
+
+    async chooseItemClick(event) {
+      const chooseItem = event.currentTarget.dataset.item;
+      const { type } = this.data;
+
+      if (type == "single") {
+        delete chooseItem.selected;
+        this.triggerEvent("onChooseItemClick", { chooseItem });
+      } else if (type == "multiple") {
+        const res = await this.formatSourceData(chooseItem);
+
+        this.setData({
+          sourceData: this.deepClone(res),
+        });
+      } else {
+        this.triggerEvent("onChooseItemClick", { chooseItem });
+      }
+    },
+
+    deepClone(target, map = new Map()) {
+      if (typeof target === "object") {
+        const isArray = Array.isArray(target);
+        let cloneTarget = isArray ? [] : {};
+
+        if (map.get(target)) {
+          return map.get(target);
+        }
+        map.set(target, cloneTarget);
+
+        const keys = isArray ? undefined : Object.keys(target);
+        this.forEach(keys || target, (value, key) => {
+          if (keys) {
+            key = value;
+          }
+          cloneTarget[key] = this.deepClone(target[key], map);
+        });
+
+        return cloneTarget;
+      } else {
+        return target;
+      }
+    },
+    forEach(array, iteratee) {
+      let index = -1;
+      const length = array.length;
+      while (++index < length) {
+        iteratee(array[index], index);
+      }
+      return array;
+    },
+  },
+  pageLifetimes: {
+    // 组件所在页面的生命周期函数
+    show: function () {},
+    hide: function () {},
+    resize: function () {},
+  },
+  created: function () {},
+  attached: function () {},
+  ready: function () {},
+  moved: function () {},
+  detached: function () {},
+});

package/libs/xt-popover/index.json

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

package/libs/xt-popover/index.wxml

@@ -0,0 +1,42 @@
+<view wx:if="{{show}}" class="xt-popover-popup" style="z-index:{{zIndx}}">
+    <view class="xt-popover">
+        <view wx:if="{{ type == 'operate'}}" class="operate-wrapper">
+            <view class="operate-content font40rpx">
+                <block wx:for="{{operates}}" wx:for-item="operate" wx:for-index="idx" wx:key="idx">
+                    <view bindtap="chooseItemClick" data-item="{{operate}}" class="flex-center operate">
+                        {{operate[itemTextKey]}}
+                    </view>
+                </block>
+            </view>
+            <view bindtap="closePopover" class="font40rpx flex-center cancel">取消</view>
+        </view>
+        <view wx:else class="content-wrapper">
+            <view class="header">
+                <view class="header-title">{{title}}</view>
+                <image wx:if="{{showCloseIcon}}" bindtap="closePopover" class="close-icon" src="https://img.tanjiu.cn/home/zGMfEx8iJBb6JewsFrYXNWs8R8KRwjzD.png" mode="widthFix"></image>
+            </view>
+            <scroll-view scroll-y="true" class="content font40rpx {{ type == 'single' ? 'spec-content':''}}">
+                <view class="content-info">
+                    <block wx:if="{{type == 'text'}}">{{textContent}}</block>
+                    <view wx:else class="list">
+                        <block wx:for="{{sourceData}}" wx:for-item="listItem" wx:for-index="idx" wx:key="idx">
+                            <view class="list-item" bindtap="chooseItemClick" data-item="{{listItem}}">
+                                <view class="list-item-label">{{listItem[itemTextKey]}}</view>
+                                <block wx:if="{{type == 'multiple'}}">
+                                    <xt-icon wx:if="{{listItem.selected}}" icon="tongguo" size="44" style="color:#30BF67"></xt-icon>
+                                    <xt-icon wx:else icon="weixuanzhong1" size="44" style="color:#999999"></xt-icon>
+                                </block>
+                                <block wx:if="{{type == 'single'}}">
+                                    <xt-icon wx:if="{{listItem.selected}}" icon="zhengque" size="44" style="color:#30BF67"></xt-icon>
+                                </block>
+                            </view>
+                        </block>
+                    </view>
+                </view>
+            </scroll-view>
+            <view wx:if="{{type == 'text' || type == 'multiple'}}" class="btn-wrapper">
+                <view bindtap="confirm" class="confirm flex-center">确定</view>
+            </view>
+        </view>
+    </view>
+</view>

package/libs/xt-popover/index.wxss

@@ -0,0 +1,135 @@
+.xt-popover-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.7);
+
+  transition-property: opacity;
+  transition-timing-function: ease;
+}
+.xt-popover-popup .xt-popover {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background-color: #ffffff;
+  border-radius: 20rpx 20rpx 0 0;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  padding-bottom: calc(constant(safe-area-inset-bottom) + 0rpx);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 0rpx);
+
+  transition: all 0.5s ease-in;
+}
+
+.xt-popover .operate-wrapper {
+  overflow: hidden;
+  background: #ededed;
+}
+
+.xt-popover .operate-content {
+  background-color: #ffffff;
+  margin-bottom: 16rpx;
+  box-sizing: border-box;
+}
+
+.xt-popover .operate {
+  box-sizing: border-box;
+  width: 100%;
+  height: 120rpx;
+  box-shadow: inset 0px -2rpx 0rpx 0rpx #ededed;
+}
+
+.xt-popover .cancel {
+  width: 100%;
+  min-height: 120rpx;
+  background-color: #ffffff;
+}
+
+.xt-popover .flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.xt-popover .font40rpx {
+  font-size: 40rpx;
+  font-weight: 400;
+  color: #000000;
+}
+
+.content-wrapper {
+  box-sizing: border-box;
+  background-color: #ffffff;
+}
+
+.xt-popover-popup .header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 32rpx;
+
+  width: 100%;
+  height: 120rpx;
+  background: #ffffff;
+  box-shadow: inset 0px -2rpx 0rpx 0rpx #f5f5f5;
+  font-size: 40rpx;
+  font-weight: 600;
+  color: #222222;
+}
+
+.xt-popover-popup .content {
+  box-sizing: border-box;
+  height: 924rpx;
+}
+
+.xt-popover-popup .spec-content {
+  height: 1084rpx;
+}
+
+.xt-popover-popup .content-info {
+  box-sizing: border-box;
+  padding: 32rpx;
+  text-align: justify;
+}
+
+.xt-popover-popup .close-icon {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.xt-popover-popup .btn-wrapper {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 32rpx;
+  height: 160rpx;
+  background: #ffffff;
+  box-shadow: inset 0px 2rpx 0rpx 0rpx #ededed;
+}
+
+.xt-popover-popup .confirm {
+  width: 100%;
+  height: 100%;
+  background: #6722ab;
+  border-radius: 120rpx;
+
+  font-size: 40rpx;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.xt-popover-popup .list-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 32rpx 0;
+}
+
+.xt-popover-popup .list-item-label {
+  flex: 1;
+  margin-right: 20rpx;
+}

package/libs/xt-tabs/README.md

@@ -0,0 +1,98 @@
+# Icon图标
+
+### 介绍
+选项卡组件，用于在不同的内容区域之间进行切换
+
+###效果图
+![效果图](https://img.tanjiu.cn/home/NbcpQMpKZNCerYMy5ETZ3fwFBaCQjGS3.png "选项卡效果图")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-tabs": "@xtdev/xt-miniprogram-ui/xt-tabs",
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```
+<xt-tabs list="{{list}}"></xt-tabs>
+```
+```
+  data: {
+    list: [
+      {
+        title: '标签一'
+      },
+      {
+        title: '标签二'
+      },
+    ],
+  }
+```
+
+### 带副标题
+```
+<xt-tabs list="{{subTitlelist}}"></xt-tabs>
+```
+```
+  data: {
+    subTitlelist: [
+      {
+        title: '标签一',
+        subTitle: '副标题'
+      },
+      {
+        title: '标签二',
+        subTitle: '副标题'
+      },
+    ],
+  }
+```
+
+### 卡片模式
+支持两种样式风格：line和card，默认为line样式，可以通过type属性修改样式风格
+```
+<xt-tabs type="card" list="{{list}}"></xt-tabs>
+```
+```
+  data: {
+    list: [
+      {
+        title: '标签一'
+      },
+      {
+        title: '标签二'
+      },
+    ],
+  }
+```
+
+##API
+
+####xt-tabs props
+
+| 参数      | 说明 |  类型 |
+| ----------- | ----------- | ---------- |
+| type      | 样式风格，可选值`card`、`line`,默认值为`line` | `String` |
+| active   | 当前选中标签的标识符，默认值0  | `Number` |
+| list   | 数据源数组  | `ItemProps` |
+| cardBgColor   | tab背景色 | `String` |
+| borderColor   | tab边框颜色 | `String` |
+
+#### ItemProps
+
+| 参数      | 说明 | 类型 |
+| ----------- | ----------- | ----------- |
+| title      | 卡片标题 | `String` |
+| subTitle   | 卡片副标题  | `String` |
+| titleColor   | 标题颜色  | `String` |
+
+#### Tabs Event
+
+| 事件名      | 说明 | 参数 |
+| ----------- | ----------- | ----------- |
+| bind:change      | tab点击事件 | 当前激活项数据以及索引 |

package/libs/xt-tabs/index.js

@@ -0,0 +1,35 @@
+// path/to/custom-ul.js
+Component({
+  properties: {
+    type: {
+      type: String,
+      value: 'line'
+    },
+    active: {
+      type: Number,
+      value: 0
+    },
+    list: {
+      type: Array,
+    },
+    cardBgColor: {
+      type: String,
+    },
+    borderColor: {
+      type: String,
+    },
+  },
+  methods: {
+    tabClick(e) {
+      const _index = e.currentTarget.dataset.index;
+      const _item = e.currentTarget.dataset.item;
+      this.setData({
+        active: _index
+      })
+      this.triggerEvent('change', {
+        ..._item,
+        index: _index
+      });
+    }
+  },
+})

package/libs/xt-tabs/index.json

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

package/libs/xt-tabs/index.wxml

@@ -0,0 +1,10 @@
+<view style="background-color: {{cardBgColor}};border-color:{{type === 'card' ? borderColor : ''}}" class="{{type === 'card' ? 'xt-tabs xt-tabs-card' : 'xt-tabs'}}">
+    <view bind:tap="tabClick" data-index="{{index}}" data-item="{{item}}" wx:for="{{list}}" wx:if="{{type === 'line'}}" class="{{active === index ? 'xt-tab active' : 'xt-tab'}}">
+        <view class="title">{{item.title}}</view>
+        <view wx:if="{{item.subTitle}}" class="sub-title">{{item.subTitle}}</view>
+        <view wx:if="{{active === index}}" class="{{item.subTitle ? 'bottom-line sub-bottom-line' : 'bottom-line'}}"></view>
+    </view>
+    <view bind:tap="tabClick" data-index="{{index}}" wx:for="{{list}}" data-item="{{item}}" wx:if="{{type === 'card'}}" class="{{active === index ? 'xt-tab xt-tab-card active' : 'xt-tab xt-tab-card'}}">
+        <view style="color: {{active === index ? '' : item.titleColor}};" class="title">{{item.title}}</view>
+    </view>
+</view>

package/libs/xt-tabs/index.wxss

@@ -0,0 +1,76 @@
+.xt-tabs {
+  display: flex;
+}
+
+.xt-tabs.xt-tabs-card {
+  border-radius: 60rpx;
+  padding: 6rpx;
+  background-color: #f5f5f5;
+  border: 2rpx solid #DDDDDD;
+}
+
+.xt-tab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 40rpx;
+  flex-grow: 1;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #000000;
+  /* width: 100%; */
+}
+
+.title {
+  height: 56rpx;
+}
+
+.sub-title {
+  height: 44rpx;
+  font-size: 32rpx;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #000000;
+}
+
+.active .sub-title {
+  height: 44rpx;
+  font-size: 32rpx;
+  font-family: PingFang SC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #6722AB;
+}
+
+.xt-tab.active {
+  font-weight: 600;
+  color: #6722AB;
+}
+
+.bottom-line {
+  width: 64rpx;
+  height: 8rpx;
+  background-color: #6722AB;
+  border-radius: 4rpx;
+  margin-top: 4rpx;
+}
+
+.bottom-line.sub-bottom-line {
+  width: 56rpx;
+  height: 6rpx;
+}
+
+.xt-tab-card.xt-tab {
+  height: 72rpx;
+  justify-content: center;
+  font-size: 34rpx;
+}
+
+.xt-tab-card.active {
+  background-color: #FFFFFF;
+  border-radius: 60rpx;
+}
+
+.xt-tab-card .title {
+  line-height: 72rpx;
+  height: 72rpx;
+}

package/libs/xt-uploader/README.md

@@ -26,15 +26,15 @@
 
 ####xt-uploader props
 
-| 参数      | 说明 |  类型 |
-| ----------- | ----------- | ---------- |
-| fileList      | 图片列表，必传，受控组件 | `Array<String>` |
-| title      | 表单标题 | `String` |
-| max      | 上传最大值，默认为9 | `Number` |
+| 参数        | 说明         |  类型      |  默认值
+| ----------- | ----------- | ---------- |  --------  |
+| fileList      | 图片列表，必传，受控组件 | Array<String> | `[]`
+| title      | 表单标题 | string |
+| max      | 上传最大值，每次可选照片数，默认为9 | number | 9
 | upload-desc      | 上传文案说明 | `String` |
-| custom-upload      | 是否自定义上传,true 点击盒子触发upload | `Boolean` |
-| disabled   | 是否禁用，禁用时不能删除和上传,可预览  | `Boolean` |
-| sourceType   | 照片来源  | ["album", "camera"] |
+| custom-upload      | 是否自定义上传,true 点击盒子触发upload | boolean | `false`
+| disabled   | 是否禁用，禁用时不能删除和上传,可预览  | boolean |  `false`
+| sourceType   | 照片来源  | `Array<String>` | ["album", "camera"]
 | upload-api   | 组件库放公网，上传接口api，必传  | {url: 'https://...',fileDir: 'microComponents'} |
 
 ####Events

package/libs/xt-uploader/index.js

@@ -24,7 +24,7 @@ Component({
 		// ["album", "camera"]
 		sourceType: {
 			type: Array,
-			value: ["camera"],
+			value: ["album", "camera"],
 		},
 		customUpload: {
 			type: Boolean,
@@ -70,8 +70,8 @@ Component({
 			});
 		},
 		// 上传成功
-		onUploadSuccess(url) {
-			this.triggerEvent("upload", { fileList: this.properties.fileList, url });
+		onUploadSuccess(files, url) {
+			this.triggerEvent("upload", { fileList: files, url });
 		},
 		// 上传失败
 		onUploadError(errMsg) {
@@ -80,11 +80,12 @@ Component({
 		// 点击上传
 		startTakePhoto() {
 			const _this = this;
-			if (this.properties.customUpload) {
+			const { customUpload, uploadApi, max, sourceType, fileList } =
+				this.properties;
+			if (customUpload) {
 				this.triggerEvent("upload", {});
 				return;
 			}
-			const uploadApi = this.properties.uploadApi;
 			if (!uploadApi || !uploadApi.url) {
 				wx.showToast({
 					title: "请传入上传接口",
@@ -93,15 +94,39 @@ Component({
 				return;
 			}
 			wx.chooseMedia({
-				count: 1,
+				count: max - fileList.length,
 				mediaType: ["image"],
 				sizeType: ["compressed"],
-				sourceType: this.properties.sourceType,
+				sourceType,
 				success(res) {
 					console.log(res, "0000");
 					// tempFilePath可以作为img标签的src属性显示图片
-					const tempFilePaths = res.tempFiles[0].tempFilePath;
-					_this.uploadImage_v(tempFilePaths);
+					const tempFilePaths = res.tempFiles;
+					if (Array.isArray(tempFilePaths) && tempFilePaths.length) {
+						Promise.allSettled(
+							tempFilePaths.map((temp) =>
+								_this.uploadImage_v(temp.tempFilePath)
+							)
+						).then((uploadRes) => {
+							wx.hideLoading();
+							console.log("----uploadRes", uploadRes);
+							// 上传成功
+							const successUrls = uploadRes
+								.filter((result) => result.status == "fulfilled")
+								.map((result) => result.value);
+							if (successUrls.length) {
+								const files = fileList.concat(successUrls);
+								_this.onUploadSuccess(files, successUrls);
+							}
+							// 上传失败
+							const errorList = uploadRes.filter(
+								(result) => result.status == "rejected"
+							);
+							if (errorList.length) {
+								_this.onUploadError(errorList[0].value);
+							}
+						});
+					}
 				},
 				fail(error) {
 					_this.onUploadError(error && error.errMsg);
@@ -111,20 +136,19 @@ Component({
 		},
 		// 上传文件
 		uploadImage_v(filePaths) {
-			const { url, fileDir, ...header } = this.properties.uploadApi;
-			let _this = this;
-			const { fileList } = _this.properties;
-			wx.showLoading("图片上传中");
-			utils.newHttp(
-				url,
-				"GET",
-				{
-					dir: fileDir || "microComponents",
-				},
-				header,
-				(res) => {
-					const { host, signature, accessKeyId, policy, dir } = res.data;
-					if (host) {
+			return new Promise((resolve, reject) => {
+				const { url, fileDir, ...header } = this.properties.uploadApi;
+				wx.showLoading("上传中");
+				utils.newHttp(
+					url,
+					"GET",
+					{
+						dir: fileDir || "microComponents",
+					},
+					header,
+					(res) => {
+						const { host, signature, accessKeyId, policy, dir } = res.data;
+						if (host) {
 							let path = filePaths;
 							let name = utils.random_string(32) + utils.get_suffix(path);
 							wx.uploadFile({
@@ -144,27 +168,31 @@ Component({
 								success: (res) => {
 									if (res.statusCode == 200) {
 										let url = host + dir + "/" + name;
-										fileList.push(url);
-										_this.onUploadSuccess(url);
-										wx.showToast({
-											icon: "success",
-											title: "上传成功",
-										});
+										resolve(url);
+										// fileList.push(url);
+										// _this.onUploadSuccess(url);
+										// wx.showToast({
+										// 	icon: "success",
+										// 	title: "上传成功",
+										// });
 									}
 								},
 								fail: (err) => {
-									_this.onUploadError(err.errMsg || "网络错误，请重试");
-									wx.showToast({
-										icon: "error",
-										title: err.errMsg || "网络错误，请重试",
-									});
+									reject(err.errMsg || "网络错误，请重试");
+									// _this.onUploadError(err.errMsg || "网络错误，请重试");
+									// wx.showToast({
+									// 	icon: "error",
+									// 	title: err.errMsg || "网络错误，请重试",
+									// });
 								},
 							});
-					} else {
-						_this.onUploadError(res.message);
+						} else {
+							reject(res.message);
+							// _this.onUploadError(res.message);
+						}
 					}
-				}
-			);
+				);
+			});
 		},
 	},
 });

package/libs/xt-uploader/index.wxss

@@ -31,11 +31,12 @@
   justify-content : center;
   align-items     : center;
   background-color: #F5F5F5;
-  margin-bottom   : 32rpx;
+  margin-bottom   : 16rpx;
+  flex-shrink: 0;
 }
 
 .file_item:not(:last-child) {
-  margin-right: 32rpx;
+  margin-right: 16rpx;
 }
 
 .camera_icon {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xtdev/xt-miniprogram-ui",
-  "version": "1.0.15",
+  "version": "1.0.18",
   "description": "",
   "miniprogram": "libs",
   "publishConfig": {