@xtdev/xt-miniprogram-ui 1.2.60 → 1.2.61

package/libs/xt-search/README.md

@@ -0,0 +1,55 @@
+# Search搜索框
+
+### 介绍
+常用于列表过渡，通过输入搜索筛选数据
+
+### 效果图
+![效果图](https://img.tanjiu.cn/home/PdAzeR3aNa6kz7J6Aks6xinCwT8HRk2y.png "搜索框图")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-search": "@xtdev/xt-miniprogram-ui/xt-search",
+}
+```
+
+## 代码演示
+
+### 默认模式，横向展示
+![效果图](https://img.tanjiu.cn/home/PdAzeR3aNa6kz7J6Aks6xinCwT8HRk2y.png "搜索框图")
+
+```
+<xt-steps></xt-steps>
+```
+
+### 方形
+![效果图](https://img.tanjiu.cn/home/wsXSS75BzmJ57ZhSHdij5JimWA6YcBXf.png "搜索框图")
+
+```
+<xt-steps isCircle="{{false}}"></xt-steps>
+```
+
+
+## API
+
+#### xt-steps props
+
+| 参数      | 说明 |  类型 | 默认值 |
+| ----------- | ----------- | ---------- | ---------- |
+| isCircle      | 是否为圆角 | `Boolean` | true |
+| placeholder   | 当前输入框placeholder  | `String` | 请输入内容  |
+| isFocus   | 是否自动聚焦  | `Boolean` | true |
+| value   | 默认值  | `String` | '' |
+| remote   | 是否为远程搜索(点击输入框将只执行onFocus指令。适用于跳转新页面搜索场景)  | `Boolean` | false |
+| rightBtnText   | 提交按钮文案  | `String` | '搜索' |
+
+#### 事件
+
+| 事件名称      | 说明 | 参数 |
+| ----------- | ----------- | ----------- |
+| onFocus      | 聚焦 | - |
+| onBlur   | 失去焦点  | - |
+| onInput   | 输入  | 输入框值 |
+| onClear   | 清除  | - |
+| onSearch   | 按钮提交  | 输入框值 |

package/libs/xt-search/index.js

@@ -0,0 +1,88 @@
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+      // 搜索框样式，是否是圆的，默认为方
+      isCircle: {
+        type: Boolean,
+        value: true
+      },
+      placeholder: {
+        type: String,
+        value: "请输入内容"
+      },
+      // 是否自动聚焦
+      isFocus: {
+        type: Boolean,
+        value: false
+      },
+      value: {
+        type: String,
+        value: ''
+      },
+      // 是否远程搜索，如果为true。点击输入框将只执行onFocus指令。适用于跳转新页面搜索场景
+      remote: {
+        type: Boolean,
+        value: false
+      },
+      rightBtnText: {
+        type: String,
+        value: '搜索'
+      }
+    },
+  
+    /**
+     * 组件的初始数据
+     */
+    data: {
+      isActive: false,
+      // 输入框的输入值
+      inputVal: ''
+    },
+  
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+      onFocus() {
+        if (!this.data.remote) {
+          this.setData({
+            isActive: true
+          });
+        }
+        this.triggerEvent('onFocus');
+      },
+      onBlur() {
+        this.setData({
+          isActive: false
+        });
+        this.triggerEvent('onBlur');
+      },
+      onInput(e) {
+        this.setData({
+          inputVal: e.detail.value
+        });
+        this.triggerEvent('onInput', e.detail.value);
+      },
+      clearInpVal() {
+        this.setData({
+          inputVal: ''
+        });
+        if (!this.data.isActive) {
+          this.triggerEvent('onClear');
+        }
+      },
+      onSearch() {
+        this.triggerEvent('onSearch', this.data.inputVal);
+      }
+    },
+    observers: {
+      value(val) {
+        this.setData({
+          inputVal: val
+        });
+      }
+    }
+  });
+  

package/libs/xt-search/index.json

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

package/libs/xt-search/index.wxml

@@ -0,0 +1,17 @@
+<!--components/xt-search.wxml-->
+<view class="xt-search-container">
+    <view class=".xt-search-box {{isActive? 'xt-search-active':''}} {{isCircle? 'search-box-circle' : ''}}">
+        <xt-icon class="xt-search-icon" slot="left-icon" icon="sousuo" size="32"></xt-icon>
+        <view wx:if="{{remote}}" class="xt-search-input {{inputVal ?'' : 'placeholder'}}" bind:tap="onFocus">
+            {{inputVal||placeholder}}
+        </view>
+        <input wx:else class="xt-search-input" placeholder-class="xt-palceholder" confirm-type="search" bind:focus="onFocus" bindblur="onBlur" bindinput="onInput" value="{{ inputVal }}" bind:confirm="onSearch" focus="{{isFocus}}" placeholder="{{placeholder}}" />
+        <view slot="action" class="xt-search-btn {{isCircle? 'xt-search-btn-circle' : ''}}" placeholder="{{placeholder}}">
+            <view wx:if="{{inputVal}}" class="xt-clearimg-box" catchtap="clearInpVal">
+                <xt-icon class="xt-clear-img" icon="shibai-xiao" size="32"></xt-icon>
+            </view>
+            <text bind:tap="onSearch" class="xt-search-text">{{rightBtnText}}</text>
+        </view>
+    </view>
+    <view slot="show-more"></view>
+</view>

package/libs/xt-search/index.wxss

@@ -0,0 +1,82 @@
+/* components/xt-search.wxss */
+.xt-search-container {
+  position: relative;
+  display: flex;
+}
+
+.xt-search-box {
+  border: 2rpx solid #dddddd;
+  background-color: white;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 80rpx;
+  border-radius: 10rpx;
+  overflow: hidden;
+  flex: 1;
+}
+
+.xt-search-box.search-box-circle {
+  border-radius: 40rpx;
+}
+
+.xt-search-icon {
+  color: #999999;
+  padding-left: 24rpx;
+  padding-right: 8rpx;
+}
+
+.xt-search-input {
+  width: 100%;
+  flex: 1;
+  font-size: 34rpx;
+  font-weight: 400;
+}
+
+.xt-palceholder {
+  font-size: 34rpx;
+  color: #999999;
+}
+
+.xt-clearimg-box {
+  width: 64rpx;
+}
+
+.xt-clear-img {
+  z-index: 999;
+  color: #B8B8B8;
+}
+
+.xt-search-btn {
+  display: flex;
+  align-items: center;
+  height: 40rpx;
+  line-height: 40rpx;
+  box-sizing: border-box;
+  text-align: center;
+  font-weight: 800;
+  color: #6722ab;
+}
+
+.xt-search-btn .xt-search-text {
+  font-size: 34rpx;
+  width: 120rpx;
+  display: inline-block;
+  border-left: 2rpx solid #e5e5e5;
+  line-height: 32rpx !important;
+}
+
+.xt-search-btn-circle .xt-search-text {
+  width: 132rpx;
+  font-size: 34rpx;
+}
+
+.xt-search-active {
+  border-color: #6722ab;
+}
+
+.xt-placeholder {
+  color: #999999;
+}

package/libs/xt-stepper/README.md

@@ -0,0 +1,52 @@
+<!--
+ * @Author: Mr.Hu
+ * @Date: 2023-07-17 17:45:42
+ * @Description: 
+ * @LastEditors: Mr.Hu
+-->
+# 列表卡片
+
+### 介绍
+列表中的单个展示项
+
+### 效果图
+![效果图](https://img.tanjiu.cn/home/xRRapWMCmE6S44YQDWzaCyj78FjBFxjG.png "步进器效果图")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-stepper": "@xtdev/xt-miniprogram-ui/xt-stepper",
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```
+<xt-stepper value="{{good.qty}}" step="{{good.step}}" min="{{good.min}}" max="{{good.max}}" bind:change="inputChange" stepTips="3的倍数瓶起购"/>
+```
+
+## API
+
+#### xt-stepper props
+
+| 参数      | 说明 |  类型 |
+| ----------- | ----------- | ---------- |
+| value      | 输入框当前值 | `Number` |
+| min   | 最小值  | `Number` |
+| max   | 最大值  | `Number` |
+| step   | 每次点击改变的间隔大小  | `Number` |
+| background   | 背景色  | `String` |
+| color   | 字体颜色（前景色）  | `String` |
+| disabled   |  是否为禁用步进器，默认否  | `Boolean` |
+| disableInput   |  是否为禁用输入框，默认否  | `Boolean` |
+
+## Event
+
+| 事件名      | 说明 | 回调参数 |
+| ----------- | ----------- | ----------- |
+| change      | 输入框值改变时触发 | `Number` |
+| focus   | 输入框聚焦时触发 | `event` |
+| blur   | 输入框失焦时触发  | `event` |

package/libs/xt-stepper/index.js

@@ -0,0 +1,158 @@
+// components/v-stepper/index.js
+/**
+ * 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] 是否为禁用状态
+ * @property {String} stepTips 进步倍数纠正提示文案
+ * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
+ * @event {Function} focus 输入框聚焦时触发的事件，参数为 event 对象
+ * @event {Function} blur 输入框失焦时触发的事件，参数为 event 对象
+ */
+Component({
+  lifetimes: {
+    attached: function() {
+      // 在组件实例进入页面节点树时执行
+    },
+    detached: function() {
+      // 在组件实例被从页面节点树移除时执行
+    },
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    value: {
+      type: [Number, String],
+      default: 1
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    },
+    color: {
+      type: String,
+      default: '#000'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    stepTips: {
+      type: String,
+      default: ''
+    },
+    disableInput: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    inputValue: 0
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 输入完成数据预处理
+    // input 和 按钮都触发
+    preHandler(count) {
+      // -. 小数转整数
+      count = Math.ceil(count);
+      // -. 取3的倍数
+      if (count % this.data.step != 0) {
+        wx.showToast({
+          title: this.data.stepTips,
+          icon: 'none',
+          duration: 1500
+        })
+        count = Math.ceil(count / this.data.step) * this.data.step;
+      }
+      // -. 判断是否大于最大值
+      if (count > this.data.max) {
+        count = this.data.max;
+      }
+      // -. 判断是否小于最小值
+      if (count < this.data.min) {
+        count = this.data.min;
+      }
+      this.setData({
+        inputValue: count
+      });
+      return count;
+    },
+    /**
+     * 加减按钮
+     * @param {*} type
+     */
+    _calcValue(e) {
+      const type = e.currentTarget.dataset.type;
+      let value = this.data.inputValue;
+      // 判断是否禁用
+      if (this.data.disabled) {
+        return;
+      }
+      // 加减库存
+      if (type === 'minus') {
+        if (value <= this.data.min) {
+          return;
+        }
+        value -= this.data.step;
+      } else if (type === 'plus') {
+        if (value >= this.data.max) {
+          return;
+        } 
+        value += this.data.step;
+      }
+      value = this.preHandler(value);
+      this.triggerEvent('change', value);
+    },
+    /**
+     * 输入框失去焦点
+     * @param {*} event
+     */
+    _onBlur(event) {
+      let count = event.detail.value;
+      count = this.preHandler(count);
+      this.triggerEvent('change', +count);
+    },
+    _onFocus(event) {
+      this.triggerEvent('focus', event);
+    },
+    onInput(e) {
+      this.setData({
+        inputValue: e.detail.value
+      });
+      this.triggerEvent('change', +inputValue);
+    },
+  },
+  observers: {
+    value(val) {
+      const inputValue = this.data.inputValue + val;
+      this.setData({inputValue});
+    }
+  }
+});

package/libs/xt-stepper/index.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "",
+  "styleIsolation": "apply-shared",
+  "usingComponents": {}
+}

package/libs/xt-stepper/index.wxml

@@ -0,0 +1,11 @@
+<view class="uni-numbox">
+  <view catchtap="_calcValue" data-type="minus" class="uni-numbox__minus uni-numbox-btns" style="background:{{background}}">
+    <image wx:if="{{inputValue <= min || disabled}}" src="https://img.tanjiu.cn/home/N3hXeF3t62GfK2xAsn6PyCATw82d5QeK.png" />
+    <image wx:else src="https://img.tanjiu.cn/home/dznTAnDMTRR4NTmZnHYXpHxEdTPZcT5t.png" />
+  </view>
+  <input disabled="{{disableInput || disabled}}"  bind:focus="_onFocus" bind:blur="_onBlur" class="uni-numbox__value" type="number" value="{{inputValue}}" style="background:{{background}},  color:{{color}}" />
+  <view catchtap="_calcValue" data-type="plus" class="uni-numbox__plus uni-numbox-btns" style="background:{{background}}">
+    <image wx:if="{{inputValue >= max || disabled}}" src="https://img.tanjiu.cn/home/Bp4De4y8FFwYk3s8bbMhb6YbwKmp4yxf.png" />
+    <image wx:else src="https://img.tanjiu.cn/home/WeSZCF7QHwptXEM7fWh5EPKt72meekPn.png" />
+  </view>
+</view>

package/libs/xt-stepper/index.wxss

@@ -0,0 +1,77 @@
+.uni-numbox {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+.uni-numbox image {
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.add-btn {
+  width: 64rpx;
+  height: 64rpx;
+  background: #6722ab;
+  font-size: 44rpx;
+  color: white;
+  border-radius: 64rpx;
+  text-align: center;
+  border-radius: #dddddd;
+}
+.reduce-btn {
+  width: 64rpx;
+  height: 64rpx;
+  background: white;
+  font-size: 44rpx;
+  color: #6722ab;
+  border-radius: 64rpx;
+  text-align: center;
+  border: 2rpx solid #dddddd;
+}
+.uni-numbox-btns {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0 ;
+  background-color: #f5f5f5;
+  /* #ifdef H5 */
+  cursor: pointer;
+
+  /* #endif */
+}
+
+.uni-numbox__value {
+  margin: 0 16rpx;
+  width: 120rpx;
+  height: 64rpx;
+  font-size: 34rpx;
+  color: #222222;
+  font-family: FengTan-Regular, FengTan;
+  border-radius: 32rpx;
+  font-weight: 800;
+  background-color: #fff;
+  text-align: center;
+  border: 2rpx solid #dddddd;
+}
+
+.uni-numbox__minus, .uni-numbox__plus {
+  border-radius: 64rpx;
+}
+
+.uni-numbox--text {
+  line-height: 20rpx;
+  font-size: 20rpx;
+  font-weight: 300;
+  color: #333;
+}
+
+.uni-numbox .uni-numbox--disabled {
+  color: #c0c0c0 !important;
+  /* #ifdef H5 */
+  cursor: not-allowed;
+  /* #endif */
+}

package/libs/xt-steps/README.md

@@ -0,0 +1,79 @@
+# Steps步骤条
+
+### 介绍
+用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置
+
+###效果图
+![效果图](https://img.tanjiu.cn/home/M72SJ3SepSRE5dCiWCDnJA58hjPWHwcE.png "步骤条效果图")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-steps": "@xtdev/xt-miniprogram-ui/xt-steps",
+}
+```
+
+## 代码演示
+
+### 默认模式，横向展示
+![效果图](https://img.tanjiu.cn/home/2p7XNCtEBbmNPW6y4fb2Ny5MWTGkbkbA.png "步骤条效果图")
+
+```
+<xt-steps steps="{{steps}}" active="{{active}}"></xt-steps>
+```
+
+### 默认模式，纵向展示
+![效果图](https://img.tanjiu.cn/home/eK5bdXE7JYWwxprNhA6FrJppfiTw4nBH.png "步骤条效果图")
+
+```
+<xt-steps direction="vertical" steps="{{steps}}" active="{{active}}"></xt-steps>
+```
+
+### 简约模式，横向展示
+![效果图](https://img.tanjiu.cn/home/eyynm3HtySHti4PTZnxx6JHr8WsECTeF.png "步骤条效果图")
+```
+<xt-steps type="brief" steps="{{steps}}" active="{{active}}"></xt-steps>
+```
+
+### 简约模式，纵向展示
+![效果图](https://img.tanjiu.cn/home/FyaeMK52WetmZemF82RbQFmTTffJ5cjb.png "步骤条效果图")
+```
+<xt-steps type="brief" direction="vertical" steps="{{steps}}" active="{{active}}"></xt-steps>
+```
+
+### 插槽模式，纵向展示
+提示：插槽name规则为slot-{{index}} index从0开始
+![效果图](https://img.tanjiu.cn/home/tcD7PAr3XDSfKZbYwXPGe4XBc2zbDk5M.png "步骤条效果图")
+```
+<xt-steps type="brief" direction="vertical" steps="{{steps}}" active="{{active}}">
+    <view slot="slot-1" class="custom-box">
+        <view slot:listIndex>订单编号：123456{{ listIndex }}</view>
+        <xt-button style="margin-left: 20rpx" size="small">复制</xt-button>
+    </view>
+    <view slot="slot-2" class="custom-box">
+        <view slot:listIndex>订单编号：123456777{{ listIndex }}</view>
+        <xt-button style="margin-left: 20rpx" size="small">复制</xt-button>
+    </view>
+</xt-steps>
+```
+
+
+##API
+
+#### xt-steps props
+
+| 参数      | 说明                                 | 类型          | 默认值     |
+| --------- | ------------------------------------ | ------------- | ---------- |
+| steps     | 步骤配置集合                         | `stepsItem[]` | []         |
+| active    | 当前步骤                             | `Number`      | 0          |
+| type      | 当前步骤，可选值static、brief        | `String`      | static     |
+| direction | 展示方向，可选值horizontal、vertical | `String`      | horizontal |
+
+#### stepsItem Props
+
+| 参数  | 说明     | 类型      |
+| ----- | -------- | --------- |
+| title | 标题     | `String`  |
+| desc  | 副标题   | `String`  |
+| slot  | 是否插槽 | `Boolean` |

package/libs/xt-steps/index.js

@@ -0,0 +1,37 @@
+Component({
+  options: {
+    multipleSlots: true
+  },
+  properties: {
+    steps: {
+      type: Array,
+      value: []
+    },
+    active: {
+      type: Number,
+      value: 0
+    },
+    type: {
+      type: String,
+      value: 'static'
+    },
+    direction: {
+      type: String,
+      value: 'horizontal'
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+  },
+  attached: function () {
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+  }
+});

package/libs/xt-steps/index.json

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