@xtdev/xt-miniprogram-ui 1.2.60 → 1.2.61

package/libs/xt-steps/index.wxml

@@ -0,0 +1,34 @@
+<view wx:if="{{direction === 'horizontal'}}" class="xt-steps">
+    <view wx:for="{{steps}}" wx:key="index" class="{{ active > index ? 'finished xt-step' : (active === index ? 'xt-step active' : 'xt-step')}}">
+        <view wx:if="{{type === 'static'}}" class="step-dot">
+            <xt-icon wx:if="{{active > index}}" icon="zhengque"></xt-icon>
+            <view wx:else>{{index+1}}</view>
+        </view>
+        <view wx:if="{{type === 'brief'}}" class="step-dot-brief">
+            <view wx:if="{{index === active}}" class="center-box"></view>
+        </view>
+        <view class="step-title">{{item.title}}</view>
+        <view class="step-desc">
+            <slot wx:if="{{item.slot}}" name="slot-{{index}}" list-index="{{ index }}" item="{{ item }}" />
+            <rich-text wx:else nodes="{{item.desc}}"></rich-text>
+        </view>
+        <view wx:if="{{index < steps.length - 1}}" class="{{type === 'brief' ? 'step-line-brief' : 'step-line'}}"></view>
+    </view>
+</view>
+<view wx:if="{{direction === 'vertical'}}" class="{{type === 'brief' ? 'xt-steps xt-steps-column xt-steps-column-brief' : 'xt-steps xt-steps-column'}}">
+    <view wx:for="{{steps}}" wx:key="index" class="{{ active > index ? 'finished xt-step' : (active === index ? 'xt-step active' : 'xt-step')}}">
+        <view wx:if="{{type === 'static'}}" class="step-dot">
+            <xt-icon wx:if="{{active > index}}" icon="zhengque"></xt-icon>
+            <view wx:else>{{index+1}}</view>
+        </view>
+        <view wx:if="{{type === 'brief'}}" class="step-dot-brief"></view>
+        <view class="text-box">
+            <view class="step-title">{{item.title}}</view>
+            <view class="step-desc">
+                <slot wx:if="{{item.slot}}" name="slot-{{index}}" list-index="{{ index }}" item="{{ item }}" />
+                <rich-text wx:else nodes="{{item.desc}}"></rich-text>
+            </view>
+        </view>
+        <view wx:if="{{index < steps.length - 1}}" class="{{type === 'brief' ? 'step-line-brief' : 'step-line'}}"></view>
+    </view>
+</view>

package/libs/xt-steps/index.wxss

@@ -0,0 +1,186 @@
+.xt-steps {
+  display: flex;
+}
+
+.xt-steps-column {
+  flex-direction: column;
+}
+
+.xt-steps-column .xt-step {
+  flex-grow: 0;
+  flex-direction: row;
+}
+
+.xt-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  flex: 1;
+}
+
+.xt-step.active {
+  color: #6622aa;
+}
+
+.step-dot {
+  width: 48rpx;
+  height: 48rpx;
+  min-width: 48rpx;
+  border-radius: 24rpx;
+  background-color: #ededed;
+  text-align: center;
+  line-height: 48rpx;
+  font-size: 34rpx;
+  font-family: FengTan-Regular, FengTan;
+  font-weight: 400;
+  color: #b8b8b8;
+}
+
+.active .step-title {
+  font-weight: 600;
+}
+
+.active .step-title,
+.active .step-desc {
+  color: #6622aa;
+}
+
+.active .step-dot {
+  background-color: #6622aa;
+  color: #fff;
+}
+
+.finished .step-dot {
+  background-color: #30bf67;
+  color: #fff;
+}
+
+.finished .step-title {
+  font-weight: 600;
+}
+
+.finished .step-title,
+.finished .step-desc {
+  color: #000000;
+}
+
+.finished .step-line {
+  border-bottom: 4rpx solid #30bf67;
+  border-color: #30bf67;
+}
+
+.step-title {
+  font-size: 34rpx;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #999999;
+  line-height: 48rpx;
+  margin-top: 16rpx;
+}
+
+.step-desc {
+  font-size: 28rpx;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #999999;
+  line-height: 40rpx;
+  margin-top: 8rpx;
+  text-align: center;
+}
+
+.step-line,
+.step-line-brief {
+  border-bottom: 4rpx dotted #b8b8b8;
+  flex-grow: 1;
+  position: absolute;
+  width: calc(100% - 24rpx);
+  top: 24rpx;
+  left: calc(50% + 24rpx);
+}
+
+.step-line-brief {
+  top: 16rpx;
+  left: calc(50% + 16rpx);
+}
+
+.step-dot-brief {
+  width: 32rpx;
+  height: 32rpx;
+  border-radius: 50%;
+  background-color: #ededed;
+}
+
+.active .step-dot-brief {
+  background-color: #fff;
+  border: 8rpx solid #6722ab;
+  width: 16rpx;
+  height: 16rpx;
+}
+
+.finished .step-dot-brief {
+  background-color: #6722ab;
+}
+
+.text-box {
+  margin-left: 24rpx;
+}
+
+.xt-steps-column .xt-step {
+  align-items: start;
+}
+
+.xt-steps-column .step-title {
+  margin-top: 0;
+}
+
+.xt-steps-column .xt-step:nth-of-type(n + 2) {
+  margin-top: 60rpx;
+}
+
+.xt-steps-column-brief .xt-step:nth-of-type(n + 2) {
+  margin-top: 48rpx;
+}
+
+.xt-steps-column .step-line,
+.xt-steps-column .step-line-brief {
+  border-left: 4rpx dotted #b8b8b8;
+  width: 0rpx;
+  height: calc(100% + 24rpx);
+  left: 22rpx;
+  top: 48rpx;
+}
+
+.xt-steps-column .finished .step-line {
+  border-left: 4rpx solid #30bf67;
+}
+
+.xt-steps-column .step-dot-brief {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+
+.xt-steps-column .active .step-dot-brief {
+  width: 12rpx;
+  height: 12rpx;
+  background-color: #fff;
+  border: 2rpx solid #6722ab;
+}
+
+.xt-steps-column .step-line-brief {
+  left: 6rpx;
+  top: 16rpx;
+  height: calc(100% + 32rpx);
+}
+
+.xt-steps-column-brief .xt-step:nth-of-type(n + 2) {
+  margin-top: 48rpx;
+}
+
+.xt-steps-column-brief .text-box {
+  margin-left: 16rpx;
+  margin-top: -12rpx;
+}

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,6 @@
+{
+    "component": true,
+    "styleIsolation": "apply-shared",
+    "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="xt-tab-title">{{item.title}}</view>
+        <view wx:if="{{item.subTitle}}" class="xt-tab-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="xt-tab-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%; */
+}
+
+.xt-tab-title {
+  height: 56rpx;
+}
+
+.xt-tab-sub-title {
+  height: 44rpx;
+  font-size: 32rpx;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #000000;
+}
+
+.active .xt-tab-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 .xt-tab-title {
+  line-height: 72rpx;
+  height: 72rpx;
+}

package/libs/xt-tag/README.md

@@ -0,0 +1,65 @@
+# Icon图标
+
+### 介绍
+用于标记关键词或用于筛选
+
+###效果图
+![效果图](https://img.tanjiu.cn/home/PXMYKCEKtNY66R4mEkmNdf5HQFebRr2M.png "tag效果图")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-tag": "@xtdev/xt-miniprogram-ui/xt-tag",
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```
+<xt-tag>
+标签一
+</xt-tag>
+```
+
+### 状态
+设置 `isChoosed` 属性标记选中状态
+```
+<xt-tag isChoosed="{{true}}">
+选中了
+</xt-tag>
+```
+
+### 带关闭功能
+设置 `closeable` 属性控制是否展示关闭图标
+```
+<xt-tag closeable="{{true}}">
+可关闭
+</xt-tag>
+```
+
+### 带数字
+设置 `number` 属性展示
+```
+<xt-tag number="{{2}}">
+带数字
+</xt-tag>
+```
+
+##API
+
+####xt-tag props
+
+| 参数      | 说明 |  类型 |
+| ----------- | ----------- | ---------- |
+| number      | 对应的数字 | `Number` |
+| isChoosed   | 是否选中  | `Boolean` |
+| closeable   | 是否展示关闭图标  | `Boolean` |
+
+####Events
+
+| 事件名      | 说明 |  回调参数 |
+| ----------- | ----------- | ---------- |
+| bind:close      | 关闭标签时触发 | - |

package/libs/xt-tag/index.js

@@ -0,0 +1,38 @@
+// pages/components/xt-icon.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    // 是否带数字
+    number: {
+      type: Number | null,
+      default: null
+    },
+    // 是否选中
+    isChoosed: {
+      type: Boolean,
+    },
+    // 是否可关闭
+    closeable: {
+      type: Boolean,
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    close() {
+      this.triggerEvent('close');
+    },
+    onClick() {
+      this.triggerEvent('click');
+    },
+  },
+});

package/libs/xt-tag/index.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "styleIsolation": "apply-shared",
+    "usingComponents": {
+        "xt-icon": "../xt-icon/index"
+    }
+}

package/libs/xt-tag/index.wxml

@@ -0,0 +1,5 @@
+<view catchtap="onClick" class="{{ isChoosed ? 'xt-tag is-active' : 'xt-tag' }}">
+    <slot></slot>
+    <view wx:if="{{number || number === 0}}" class="icon-number">{{number}}</view>
+    <xt-icon catchtap="close" class="close-icon" wx:if="{{closeable}}" size="32" icon="a-3"></xt-icon>
+</view>

package/libs/xt-tag/index.wxss

@@ -0,0 +1,36 @@
+.xt-tag {
+  padding: 0 32rpx;
+  height: 80rpx;
+  border: 2rpx solid #DDDDDD;
+  border-radius: 60rpx;
+  align-items: center;
+  justify-content: center;
+  display: inline-flex;
+  font-size: 34rpx;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #000000;
+}
+
+.is-active {
+  border: 2rpx solid #6722AB;
+  background-color: #F6EDFF;
+  color: #6722AB;
+  font-weight: 600;
+}
+
+.close-icon {
+  margin-left: 20rpx;
+}
+
+.icon-number {
+  font-size: 34rpx;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #FF4D4D;
+  margin-left: 20rpx;
+}
+
+.is-active .icon-number {
+  font-weight: 600;
+}

package/libs/xt-toast/README.md

@@ -0,0 +1,65 @@
+# Toast
+
+## 介绍
+
+在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。
+
+## 效果图
+
+![效果图](https://img.tanjiu.cn/home/tsxnjSMsEd3nMpPJk5iW3eEGxGfpEdjB.png)
+
+## 引入
+
+在app.json或页面配置json中引入
+
+```json
+"usingComponents": {
+    "xt-toast": "@xtdev/xt-miniprogram-ui/xt-toast",
+}
+```
+
+## 代码演示
+
+### 1）默认模式
+
+![默认toast](https://img.tanjiu.cn/home/Qwp2EcfHXEYDCfibTEXSwdBfW8trbND6.png)
+
+```html
+<xt-toast type="nomal" show="{{true}}" duration="{{5000}}" message="已确认合同"></xt-toast>
+```
+
+### 2）带跳转的提示
+
+![带跳转到toast](https://img.tanjiu.cn/home/6Z7zNbakJzkjSAEpbyaykw5742DWAJQd.png)
+
+```html
+<xt-toast type="navToast" message="哈喽早上好！支持跳转指定页面。哈喽早上好！支持跳转指定页面" navUrl="/template/list/index"></xt-toast>
+```
+
+## API
+
+### xt-toast props
+
+| 参数        | 说明                                                         | 类型    | 默认值 |
+| ----------- | ------------------------------------------------------------ | ------- | ------ |
+| show        | 用于触发组件显示，仅当type为'nomal'时有用                    | Boolean | false  |
+| type        | 指定组件的类型，可选值为`nomal` `navToast`                   | String  | nomal  |
+| duration    | 展示时长(ms)，仅当type为'nomal'时有用                        | Number  | 5000   |
+| message     | 内容                                                         | String  | ''     |
+| navDuration | 展示时长(ms)，仅当type为'navToast'时有用，（若不设置，则永远不会消失，直到用户点击跳转到指定页面） | Number  | null   |
+| navUrl      | 指定跳转的页面路径（相对路径），仅当type为'navToast'时有用   | String  | null   |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+