@xtdev/xt-miniprogram-ui 0.0.1

package/README.md

@@ -0,0 +1,54 @@
+# 潭酒小程序基础组件库
+
+## 介绍
+
+本项目是一个基于潭酒【商家小程序】与【业务员小程序】抽离的UI组件库，提供了一系列可复用的UI组件，方便web开发人员快速构建页面。
+
+## 安装
+
+npm安装：
+
+```
+npm install @xtdev/xt-miniprogram-ui --save
+```
+
+yarn安装：
+
+```
+yarn add @xtdev/xt-miniprogram-ui
+```
+
+## 使用
+
+import组件：
+
+```
+import { button } from "ui-lib";
+```
+
+使用组件：
+
+```
+<button>按钮</button>
+```
+
+## API 文档
+
+### Button 按钮
+
+| 属性    | 类型          | 默认值 | 说明                        |
+| ------- | ------------- | ------ | --------------------------- |
+| size    | string        |       | 尺寸，可选值为`small`、`large` |
+| type    | string        |       | 类型，可选值为`primary`、`danger` |
+| loading | boolean       | false  | 是否加载中                  |
+| onClick | (event) => {} |        | 点击按钮的回调函数          |
+ 
+### Input 输入框
+
+| 属性    | 类型   | 默认值 | 说明         |
+| ------- | ------ | ------ | ------------ |
+| type    | string | text   | 输入框类型   |
+| size    | string |        | 尺寸         |
+| prefix  | node   |        | 前缀图标节点 |
+| suffix  | node   |        | 后缀图标节点 |
+| onChange| (event) => {} |        | 输入框值改变时的回调函数          |

package/libs/package.json

@@ -0,0 +1 @@
+{"dependencies":{}}

package/libs/xt-button/index.js

@@ -0,0 +1,24 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    icon: {
+      type: String,
+    },
+    size: {
+      type: Number,
+      value: 28,
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {},
+});

package/libs/xt-button/index.json

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

package/libs/xt-button/index.wxml

@@ -0,0 +1,2 @@
+<!--pages/components/xt-icon.wxml-->
+<text class="iconfont icon-{{icon}}" style="font-size: {{size}}rpx;"></text>

package/libs/xt-button/index.wxss

@@ -0,0 +1,180 @@
+@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");
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-a-8:before {
+  content: "\e61e";
+}
+
+.icon-a-9:before {
+  content: "\e61f";
+}
+
+.icon-a-10:before {
+  content: "\e620";
+}
+
+.icon-a-13:before {
+  content: "\e621";
+}
+
+.icon-a-15:before {
+  content: "\e622";
+}
+
+.icon-a-16:before {
+  content: "\e623";
+}
+
+.icon-a-11:before {
+  content: "\e624";
+}
+
+.icon-a-12:before {
+  content: "\e625";
+}
+
+.icon-a-14:before {
+  content: "\e626";
+}
+
+.icon-a-23:before {
+  content: "\e627";
+}
+
+.icon-a-19:before {
+  content: "\e628";
+}
+
+.icon-a-22:before {
+  content: "\e629";
+}
+
+.icon-a-21:before {
+  content: "\e62a";
+}
+
+.icon-a-20:before {
+  content: "\e62b";
+}
+
+.icon-a-18:before {
+  content: "\e62c";
+}
+
+.icon-a-17:before {
+  content: "\e62d";
+}
+
+.icon-xingzhuangjiehe:before {
+  content: "\e60e";
+}
+
+.icon-a-3:before {
+  content: "\e60f";
+}
+
+.icon-a-4:before {
+  content: "\e614";
+}
+
+.icon-a-2:before {
+  content: "\e615";
+}
+
+.icon-a-5:before {
+  content: "\e616";
+}
+
+.icon-a-6:before {
+  content: "\e61c";
+}
+
+.icon-a-7:before {
+  content: "\e61d";
+}
+
+.icon-jian-weixuanzhong:before {
+  content: "\e682";
+}
+
+.icon-jia-xuanzhong:before {
+  content: "\e683";
+}
+
+.icon-jian-xuanzhong:before {
+  content: "\e684";
+}
+
+.icon-xiala:before {
+  content: "\e685";
+}
+
+.icon-shangla:before {
+  content: "\e686";
+}
+
+.icon-jinggao:before {
+  content: "\e687";
+}
+
+.icon-weixuanzhong1:before {
+  content: "\e688";
+}
+
+.icon-jinggao-hong:before {
+  content: "\e60b";
+}
+
+.icon-daohang:before {
+  content: "\e60d";
+}
+
+.icon-shouqi:before {
+  content: "\e610";
+}
+
+.icon-shaixuan:before {
+  content: "\e611";
+}
+
+.icon-shanchu:before {
+  content: "\e612";
+}
+
+.icon-sousuo:before {
+  content: "\e613";
+}
+
+.icon-zhengque:before {
+  content: "\e617";
+}
+
+.icon-wenhao-xiao:before {
+  content: "\e618";
+}
+
+.icon-youjiantou:before {
+  content: "\e619";
+}
+
+.icon-wenhao:before {
+  content: "\e61a";
+}
+
+.icon-zhankai:before {
+  content: "\e61b";
+}

package/libs/xt-icon/index.js

@@ -0,0 +1,25 @@
+// pages/components/xt-icon.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    icon: {
+      type: String,
+    },
+    size: {
+      type: Number,
+      value: 28,
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {},
+});

package/libs/xt-icon/index.json

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

package/libs/xt-icon/index.wxml

@@ -0,0 +1,2 @@
+<!--pages/components/xt-icon.wxml-->
+<text class="iconfont icon-{{icon}}" style="font-size: {{size}}rpx;"></text>

package/libs/xt-icon/index.wxss

@@ -0,0 +1,180 @@
+@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");
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-a-8:before {
+  content: "\e61e";
+}
+
+.icon-a-9:before {
+  content: "\e61f";
+}
+
+.icon-a-10:before {
+  content: "\e620";
+}
+
+.icon-a-13:before {
+  content: "\e621";
+}
+
+.icon-a-15:before {
+  content: "\e622";
+}
+
+.icon-a-16:before {
+  content: "\e623";
+}
+
+.icon-a-11:before {
+  content: "\e624";
+}
+
+.icon-a-12:before {
+  content: "\e625";
+}
+
+.icon-a-14:before {
+  content: "\e626";
+}
+
+.icon-a-23:before {
+  content: "\e627";
+}
+
+.icon-a-19:before {
+  content: "\e628";
+}
+
+.icon-a-22:before {
+  content: "\e629";
+}
+
+.icon-a-21:before {
+  content: "\e62a";
+}
+
+.icon-a-20:before {
+  content: "\e62b";
+}
+
+.icon-a-18:before {
+  content: "\e62c";
+}
+
+.icon-a-17:before {
+  content: "\e62d";
+}
+
+.icon-xingzhuangjiehe:before {
+  content: "\e60e";
+}
+
+.icon-a-3:before {
+  content: "\e60f";
+}
+
+.icon-a-4:before {
+  content: "\e614";
+}
+
+.icon-a-2:before {
+  content: "\e615";
+}
+
+.icon-a-5:before {
+  content: "\e616";
+}
+
+.icon-a-6:before {
+  content: "\e61c";
+}
+
+.icon-a-7:before {
+  content: "\e61d";
+}
+
+.icon-jian-weixuanzhong:before {
+  content: "\e682";
+}
+
+.icon-jia-xuanzhong:before {
+  content: "\e683";
+}
+
+.icon-jian-xuanzhong:before {
+  content: "\e684";
+}
+
+.icon-xiala:before {
+  content: "\e685";
+}
+
+.icon-shangla:before {
+  content: "\e686";
+}
+
+.icon-jinggao:before {
+  content: "\e687";
+}
+
+.icon-weixuanzhong1:before {
+  content: "\e688";
+}
+
+.icon-jinggao-hong:before {
+  content: "\e60b";
+}
+
+.icon-daohang:before {
+  content: "\e60d";
+}
+
+.icon-shouqi:before {
+  content: "\e610";
+}
+
+.icon-shaixuan:before {
+  content: "\e611";
+}
+
+.icon-shanchu:before {
+  content: "\e612";
+}
+
+.icon-sousuo:before {
+  content: "\e613";
+}
+
+.icon-zhengque:before {
+  content: "\e617";
+}
+
+.icon-wenhao-xiao:before {
+  content: "\e618";
+}
+
+.icon-youjiantou:before {
+  content: "\e619";
+}
+
+.icon-wenhao:before {
+  content: "\e61a";
+}
+
+.icon-zhankai:before {
+  content: "\e61b";
+}

package/libs/xt-search/index.js

@@ -0,0 +1,125 @@
+// components/v-tab/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+      // 搜索框样式，是否是圆的，默认为方
+      isCircle: {
+        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: "请输入内容"
+      },
+      // 是否自动聚焦
+      isFocus: {
+        type: Boolean,
+        value: false
+      },
+      value: {
+        type: String,
+        value: ''
+      },
+      // 是否远程搜索，如果为true。点击输入框将只执行onFocus指令。适用于跳转新页面搜索场景
+      remote: {
+        type: Boolean,
+        value: false
+      },
+      rightBtnText: {
+        type: String,
+        value: '搜索'
+      },
+      extendType: {
+        type: Number,
+        value: 1
+      }
+    },
+  
+    /**
+     * 组件的初始数据
+     */
+    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() {
+        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: {
+      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="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='搜索'>
+            {{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}}" />
+        <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>
+            <text bind:tap="onSearch" class="search-text" data-name='搜索'>{{rightBtnText}}</text>
+        </view>
+    </view>
+    <view slot="show-more"></view>
+</view>

package/libs/xt-search/index.wxss

@@ -0,0 +1,82 @@
+/* components/xt-search.wxss */
+.container {
+  position: relative;
+  display: flex;
+}
+
+.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;
+}
+
+.search-box-circle {
+  border-radius: 40rpx;
+}
+
+.search-icon {
+  color: #999999;
+  padding-left: 24rpx;
+  padding-right: 8rpx;
+}
+
+.search-input {
+  width: 100%;
+  flex: 1;
+  font-size: 34rpx;
+  font-weight: 400;
+}
+
+.palceholder {
+  font-size: 34rpx;
+  color: #999999;
+}
+
+.clearimg-box {
+  width: 64rpx;
+}
+
+.clear-img {
+  z-index: 999;
+  color: #999999;
+}
+
+.search-btn {
+  display: flex;
+  align-items: center;
+  height: 40rpx;
+  line-height: 40rpx;
+  box-sizing: border-box;
+  text-align: center;
+  font-weight: 800;
+  color: #6722ab;
+}
+
+.search-btn .search-text {
+  font-size: 28rpx;
+  width: 120rpx;
+  display: inline-block;
+  border-left: 2rpx solid #e5e5e5;
+  line-height: 32rpx !important;
+}
+
+.search-btn-circle .search-text {
+  width: 132rpx;
+  font-size: 34rpx;
+}
+
+.search-active {
+  border-color: #6722ab;
+}
+
+.placeholder {
+  color: #999999;
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@xtdev/xt-miniprogram-ui",
+  "version": "0.0.1",
+  "description": "",
+  "files": [
+    "libs",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "gulp",
+    "build": "gulp build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.tanjiu.cn/tfe/scaffold/xt-micro-components.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "del": "^3.0.0",
+    "gulp": "^4.0.2",
+    "gulp-changed": "^4.0.3",
+    "gulp-clean": "^0.4.0",
+    "gulp-json-transform": "^0.4.8",
+    "gulp-rename": "^2.0.0"
+  },
+  "dependencies": {}
+}