@xtdev/xt-miniprogram-ui 1.0.10 → 1.0.13

package/libs/xt-dialog/index.wxss

@@ -0,0 +1,121 @@
+/* src/xt-dialog/index.wxss */
+
+.dialog_mask{
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.dialog_box{
+  padding: 64rpx 48rpx;
+  box-sizing: border-box;
+  border-radius: 16rpx;
+  text-align: center;
+  width: 654rpx;
+  /* margin: 100rpx auto; */
+  background-color: rgba(255, 255, 255);
+}
+.title{
+  line-height: 56rpx;
+  font-size: 40rpx;
+  font-family: PingFang SC-Semibold, PingFang SC;
+  font-weight: 800;
+  color: #000000;
+  margin-bottom: 32rpx;
+}
+.content{
+  line-height: 56rpx;
+  font-size: 40rpx;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #000000;
+  margin-bottom: 64rpx;
+}
+.image{
+  width: 558rpx;
+  height: 306rpx;
+  border-radius: 2rpx;
+  margin-bottom: 32rpx;
+  border-radius: 2rpx;
+}
+.default_btn{
+  width: 558rpx;
+  height: 96rpx;
+  line-height: 96rpx;
+  background: #6722AB;
+  border-radius: 120rpx;
+  color:#fff;
+  font-size: 40rpx;
+  font-family: PingFang SC-Semibold, PingFang SC;
+  font-weight: 800;
+}
+.cancel_btn{
+  margin-top: 24rpx;
+  width: 558rpx;
+  height: 94rpx;
+  border-radius: 120rpx;
+  border: 2rpx solid #999999;
+  line-height: 94rpx;
+  color:#000;
+  font-size: 40rpx;
+  font-family: PingFang SC-Semibold, PingFang SC;
+  font-weight: 800;
+}
+.inp_wrapper{
+  border-radius: 16rpx;
+  width: 558rpx;
+  box-sizing: border-box;
+  margin-bottom: 64rpx;
+  padding: 32rpx 24rpx;
+  background-color: #f5f5f5;
+}
+.inp_content{
+  box-sizing: border-box;
+  text-align: left;
+  width: 510rpx;
+  background-color: #f6f6f6;
+  font-size: 40rpx;
+  color: #000000;
+}
+.radio_box{
+  margin-bottom: 64rpx;
+}
+.radio_item{
+  display: flex;
+  align-items: baseline;
+  /* justify-content: space-between; */
+  margin-bottom: 32rpx;
+}
+.radio_item:last-child{
+  margin-bottom: 0;
+}
+.radio_icon{
+  margin-right: 16rpx;
+  width: 40rpx;
+  height: 40rpx;
+}
+.radio_content{
+  width: 502rpx;
+  text-align: left;
+}
+.radio_text{
+  line-height: 56rpx;
+  font-size: 40rpx;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #000000;
+}
+.radio_remark{
+  line-height: 44rpx;
+  font-size: 32rpx;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #999999;
+  margin-top: 16rpx;
+}

package/libs/xt-icon/README.md

@@ -0,0 +1,39 @@
+# Icon图标
+
+### 介绍
+基于字体的图标集，具体查看iconfont
+
+###效果图
+![效果图](https://img.tanjiu.cn/home/wAXdkKfGcTjPNesj5TY3Dff3zG78EQGQ.png "字体图标效果图")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-icon": "@xtdev/xt-miniprogram-ui/xt-icon",
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```
+<xt-icon icon="wenhao"></xt-icon>
+```
+
+### 图标大小
+设置 `size` 属性控制图标大小
+```
+<xt-icon icon="wenhao" size="{{32}}">
+</xt-card-cell>
+```
+
+##API
+
+####xt-icon props
+
+| 参数      | 说明 |  类型 |
+| ----------- | ----------- | ---------- |
+| icon      | 图标名称，具体值见iconfont | `String` |
+| size   | 图标大小，单位rpx  | `Number` |

package/libs/xt-icon/index.wxss

@@ -1,81 +1,76 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4088939 */
-  src: url("//at.alicdn.com/t/c/font_4088939_xa6wjfwsbpj.woff2?t=1685353003131")
-      format("woff2"),
-    url("//at.alicdn.com/t/c/font_4088939_xa6wjfwsbpj.woff?t=1685353003131")
-      format("woff"),
-    url("//at.alicdn.com/t/c/font_4088939_xa6wjfwsbpj.ttf?t=1685353003131")
-      format("truetype");
+  src: url('https://at.alicdn.com/t/c/font_4088939_jcdv8i40wy.woff2?t=1690182324093') format('woff2'),
+       url('https://at.alicdn.com/t/c/font_4088939_jcdv8i40wy.woff?t=1690182324093') format('woff'),
+       url('https://at.alicdn.com/t/c/font_4088939_jcdv8i40wy.ttf?t=1690182324093') format('truetype');
 }
 
 .iconfont {
   font-family: "iconfont" !important;
+  font-size: 16px;
+  line-height: 1;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-a-8:before {
+.icon-dingwei:before {
   content: "\e61e";
 }
 
-.icon-a-9:before {
+.icon-weixing:before {
   content: "\e61f";
 }
 
-.icon-a-10:before {
+.icon-qianbao:before {
   content: "\e620";
 }
 
-.icon-a-13:before {
+.icon-liushui:before {
   content: "\e621";
 }
 
-.icon-a-15:before {
+.icon-tongguo:before {
   content: "\e622";
 }
 
-.icon-a-16:before {
-  content: "\e623";
-}
-
-.icon-a-11:before {
+.icon-yinhangka:before {
   content: "\e624";
 }
 
-.icon-a-12:before {
+.icon-fangfu:before {
   content: "\e625";
 }
 
-.icon-a-14:before {
+.icon-saomiao:before {
   content: "\e626";
 }
 
-.icon-a-23:before {
+.icon-tixing:before {
   content: "\e627";
 }
 
-.icon-a-19:before {
+.icon-shibai-xiao:before {
   content: "\e628";
 }
 
-.icon-a-22:before {
+.icon-shouji:before {
   content: "\e629";
 }
 
-.icon-a-21:before {
+.icon-kabao:before {
   content: "\e62a";
 }
 
-.icon-a-20:before {
+.icon-paizhao:before {
   content: "\e62b";
 }
 
-.icon-a-18:before {
+.icon-shaixuan-yuan:before {
   content: "\e62c";
 }
 
-.icon-a-17:before {
+.icon-arrow:before {
   content: "\e62d";
 }
 
@@ -83,34 +78,26 @@
   content: "\e60e";
 }
 
-.icon-a-3:before {
+.icon-shibai-kongxin:before {
   content: "\e60f";
 }
 
-.icon-a-4:before {
+.icon-jingao-kongxin:before {
   content: "\e614";
 }
 
-.icon-a-2:before {
+.icon-dengdai-kongxin:before {
   content: "\e615";
 }
 
-.icon-a-5:before {
+.icon-dengdai:before {
   content: "\e616";
 }
 
-.icon-a-6:before {
-  content: "\e61c";
-}
-
-.icon-a-7:before {
+.icon-shibai-da:before {
   content: "\e61d";
 }
 
-.icon-jian-weixuanzhong:before {
-  content: "\e682";
-}
-
 .icon-jia-xuanzhong:before {
   content: "\e683";
 }
@@ -135,10 +122,6 @@
   content: "\e688";
 }
 
-.icon-jinggao-hong:before {
-  content: "\e60b";
-}
-
 .icon-daohang:before {
   content: "\e60d";
 }
@@ -171,10 +154,6 @@
   content: "\e619";
 }
 
-.icon-wenhao:before {
-  content: "\e61a";
-}
-
 .icon-zhankai:before {
   content: "\e61b";
 }

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

@@ -1,4 +1,3 @@
-// components/v-tab/index.js
 Component({
     /**
      * 组件的属性列表
@@ -9,24 +8,6 @@ Component({
         type: Boolean,
         value: true
       },
-      // 是否展示右侧更多按钮
-      showMore: {
-        type: Boolean,
-        value: false
-      },
-      list: {
-        type: Array,
-        value: [
-          {
-            name: '',
-            show: true
-          }
-        ]
-      },
-      index: {
-        type: Number,
-        value: 0
-      },
       placeholder: {
         type: String,
         value: "请输入内容"
@@ -48,10 +29,6 @@ Component({
       rightBtnText: {
         type: String,
         value: '搜索'
-      },
-      extendType: {
-        type: Number,
-        value: 1
       }
     },
   
@@ -97,21 +74,7 @@ Component({
         }
       },
       onSearch() {
-        console.log('输入值value', this.data.inputVal);
         this.triggerEvent('onSearch', this.data.inputVal);
-      },
-      onSelect(e) {
-        const val = e.currentTarget.dataset.value;
-        if (val == 'receive') {
-          wx.navigateTo({
-            url: `/packageD/pages/searchPoint/index?type=${this.properties.extendType === 1 ? 'agent' : 'cigarette'}`
-          });
-        } else {
-          wx.navigateTo({
-            url: `/packageD/pages/deletePoint/index?status=remove&type=${this.properties.extendType === 1 ? 'agent' : 'cigarette'}`
-          });
-        }
-        this.selectComponent('#item').toggle();
       }
     },
     observers: {

package/libs/xt-search/index.wxml

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

package/libs/xt-search/index.wxss

@@ -1,5 +1,5 @@
 /* components/xt-search.wxss */
-.container {
+.xt-seatch-container {
   position: relative;
   display: flex;
 }
@@ -46,7 +46,7 @@
 
 .clear-img {
   z-index: 999;
-  color: #999999;
+  color: #B8B8B8;
 }
 
 .search-btn {
@@ -61,7 +61,7 @@
 }
 
 .search-btn .search-text {
-  font-size: 28rpx;
+  font-size: 34rpx;
   width: 120rpx;
   display: inline-block;
   border-left: 2rpx solid #e5e5e5;

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,4 @@
+{
+  "navigationBarTitleText": "",
+  "usingComponents": {}
+}