@xtdev/xt-miniprogram-ui 1.0.9 → 1.0.12

package/README.md

@@ -65,4 +65,4 @@ import组件：
 | suffix  | node   |        | 后缀图标节点 |
 | onChange| (event) => {} |        | 输入框值改变时的回调函数          | -->
 
-# 开发
+# 开发 TODO

package/libs/xt-button/index.js

@@ -0,0 +1,52 @@
+// src/xt-button/index.js
+Component({
+	/**
+	 * 组件的属性列表
+	 */
+	properties: {
+		// 左侧图标名称
+		icon: {
+			type: String,
+		},
+		// 按钮尺寸，可选值为 normal large small
+		size: {
+			type: String,
+			value: "normal",
+		},
+		// 按钮类型，可选值为 main secondary
+		type: {
+			type: String,
+			value: "secondary",
+		},
+		color: {
+			type: String,
+		},
+		disabled: {
+			type: Boolean,
+			value: false,
+		},
+		customClass: {
+			type: String,
+		},
+	},
+
+	/**
+	 * 组件的初始数据
+	 */
+	data: {
+		sizeObj: {
+			small: { iconSize: 40 },
+			normal: { iconSize: 48 },
+			large: { iconSize: 48 },
+		},
+	},
+
+	/**
+	 * 组件的方法列表
+	 */
+	methods: {
+		onClick(event) {
+			this.triggerEvent("click", event);
+		},
+	},
+});

package/libs/xt-button/index.json

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

package/libs/xt-button/index.wxml

@@ -0,0 +1,9 @@
+<!-- src/xt-button/index.wxml -->
+<view class="xt-button">
+  <button disabled="{{disabled}}" class="xt-button-{{size}} xt-button-{{type}} {{disabled ? 'xt-button-disabled-'+type : ''}}" hover-class="xt-button-{{type}}-clicked">
+    <xt-icon wx:if="{{icon}}" icon="{{icon}}" size="{{sizeObj[size].iconSize}}" class="xt-buttion-icon-{{size}}"></xt-icon>
+    <view>
+      <slot />
+    </view>
+  </button>
+</view>

package/libs/xt-button/index.wxss

@@ -0,0 +1,76 @@
+/* src/xt-button/index.wxss */
+.xt-button button {
+  display        : flex;
+  align-items    : center;
+  justify-content: center;
+  border-radius  : 120rpx;
+  box-sizing     : border-box;
+  font-family    : PingFang SC-Semibold,
+    PingFang SC;
+  font-weight: 800;
+  margin     : 0 !important;
+  width      : auto !important;
+}
+
+.xt-button-small {
+  padding    : 16rpx 32rpx;
+  font-size  : 34rpx;
+  line-height: 48rpx;
+}
+
+.xt-button-normal {
+  padding    : 20rpx 48rpx;
+  font-size  : 40rpx;
+  line-height: 56rpx;
+}
+
+.xt-button-large {
+  padding    : 24rpx 64rpx;
+  font-size  : 48rpx;
+  line-height: 68rpx;
+}
+
+.xt-button-main {
+  background-color: #6722AB;
+  color           : #FFFFFF;
+}
+
+.xt-button-disabled-main {
+  background-color: #DDDDDD !important;
+  color           : #fff !important
+}
+
+/* hover-class需要放在class之后，否则background会被本身class的css覆盖 */
+.xt-button-main-clicked {
+  background-color: #3D1466;
+}
+
+.xt-button-secondary {
+  background-color: #fff;
+  border          : 2rpx #959595 solid;
+  color           : #222222
+}
+
+.xt-button-disabled-secondary {
+  background-color: #F5F5F5 !important;
+  border          : 2rpx #DDDDDD solid;
+  color           : #DDDDDD !important;
+}
+
+/* hover-class需要放在class之后，否则background会被本身class的css覆盖 */
+.xt-button-secondary-clicked {
+  background-color: #DDDDDD;
+  border          : 2rpx #DDDDDD solid;
+}
+
+.xt-buttion-icon-small {
+  margin-right: 8rpx;
+}
+
+.xt-buttion-icon-normal {
+  margin-right: 16rpx;
+}
+
+.xt-buttion-icon-large {
+  margin-right: 16rpx;
+}

package/libs/xt-card-cell/README.md

@@ -0,0 +1,65 @@
+# 列表卡片
+
+### 介绍
+列表中的单个展示项
+
+###效果图
+![效果图](https://img.tanjiu.cn/home/WPx675e6Dm4iBBfDjTb48Q4K8dMisrWa.png "列表卡片效果图")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-card-cell": "@xtdev/xt-miniprogram-ui/xt-card-cell",
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```
+<xt-card-cell item="{{item}}">
+</xt-card-cell>
+```
+
+### 使用插槽
+使用插槽替换卡片底部内容
+```
+<xt-card-cell item="{{item}}">
+    <view slot="card-footer">
+      <!-- 列表按钮 -->
+      <view class="footer">
+        <view class="default-btn">
+          查看详情
+        </view>
+      </view>
+    </view>
+</xt-card-cell>
+```
+
+##API
+
+#### xt-card-cell props
+
+| 参数      | 说明 |  类型 |
+| ----------- | ----------- | ---------- |
+| item      | 卡片内容 | `ItemProps` |
+| contentSlot   | 卡片底部插槽  | `slot` |
+
+#### ItemProps
+
+| 参数      | 说明 | 类型 |
+| ----------- | ----------- | ----------- |
+| title      | 卡片标题 | `String` |
+| subTitle   | 卡片副标题  | `String` |
+| subTitleColor   | 卡片副标题颜色  | `String` |
+| dataList   | 卡片内容  |  `datalistItem[]` |
+
+#### datalistItem
+
+| 参数      | 说明 | 类型 |
+| ----------- | ----------- | ----------- |
+| value      | 值 | `String` \| `Number` |
+| valueType   | 值类型，可选值为 `text` `tel`  | `String` |
+| label   | 字段描述  | `String` |

package/libs/xt-card-cell/index.wxss

@@ -298,6 +298,7 @@
   align-items: center;
   background-color: rgba(103, 34, 171, 0.05);
   margin-left: 14rpx;
+  white-space: nowrap;
 }
 
 .call-box image {

package/libs/xt-dialog/README.md

@@ -0,0 +1,152 @@
+# Dialog弹出框
+
+## 介绍
+
+弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。
+
+## 效果图
+
+![效果图](https://img.tanjiu.cn/home/XZ8tX2yiBE5xmxw5QGEy6Nb2QYZ4wcEz.png)
+
+## 引入
+
+在app.json或页面配置json中引入
+
+```json
+"usingComponents": {
+    "xt-dialog": "@xtdev/xt-miniprogram-ui/xt-dialog",
+}
+```
+
+## 代码演示
+
+### 1 纯文本样式
+
+<img src="https://img.tanjiu.cn/home/PWGNtJ6hkZebE48ZACEsPHkcesfxSKEj.png" alt="纯文本样式" style="zoom: 50%;" />
+
+#### 1）单项操作
+
+```html
+<xt-dialog show="{{true}}" type="nomal" message="内容内容内容" confirmButtonText="我知道了" bind:confirm="onConfirm"></xt-dialog>
+```
+
+#### 2）双向操作
+
+```html
+<xt-dialog show="{{true}}" type="nomal" message="内容内容内容" confirmButtonText="确定" showCancelButton="{{true}}" cancelButtonText="取消" bind:confirm="onConfirm" bind:cancel="onCancel"></xt-dialog>
+```
+
+### 2 标题样式
+
+<img src="https://img.tanjiu.cn/home/22paHdnC7hPhTEBRRT7pfdkGECybNFzD.png" alt="标题样式" style="zoom:50%;" />
+
+#### 1）单项操作
+
+```html
+<xt-dialog show="{{true}}" type="nomal" title="标题标题标题" message="内容内容内容" confirmButtonText="我知道了" bind:confirm="onConfirm"></xt-dialog>
+```
+
+#### 2）双向操作
+
+```html
+<xt-dialog show="{{true}}" type="nomal" title="标题标题标题" message="内容内容内容" confirmButtonText="确定" showCancelButton="{{true}}" cancelButtonText="取消" bind:confirm="onConfirm" bind:cancel="onCancel"></xt-dialog>
+```
+
+### 3 图文样式
+
+<img src="https://img.tanjiu.cn/home/5xpzpCFA62TFn5DWjFQK4GmyiBbxEGiC.png" alt="图文样式" style="zoom: 80%;" />
+
+#### 1）单项操作
+
+```html
+<xt-dialog type="imageText" show="{{true}}" title="标题标题标题" message="内容内容内容内容内容" imageUrl="https://img.tanjiu.cn/home/CdrcxcSwjinKwJwaSadAzMYpnZtTj4WK.webp" confirmButtonText="我知道了" showCancelButton="{{false}}" bind:confirm="onImgTextConfirm"></xt-dialog>
+```
+
+#### 2）双项操作
+
+```html
+<xt-dialog type="imageText" show="{{true}}" title="标题标题标题" message="内容内容内容内容内容" imageUrl="https://img.tanjiu.cn/home/CdrcxcSwjinKwJwaSadAzMYpnZtTj4WK.webp" confirmButtonText="确定" showCancelButton="{{true}}" cancelButtonText="取消" bind:confirm="onImgTextConfirm" bind:cancel="onImgTextCancel"></xt-dialog>
+```
+
+### 4 输入样式
+
+<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>
+```
+
+### 5 选择器样式
+
+<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>
+```
+
+#### 1）常规情况下的 chooiceItems 参数
+
+```json
+chooiceItems:[
+	{
+    	value:0,
+        label:'内容内容内容内容内容内容'
+    },
+    {
+        value:1,
+        label:'内容内容内容内容内容内容'
+    }
+]
+```
+
+#### 2）带辅助信息情况下的 chooiceItems 参数
+
+```json
+chooiceItems:[
+	{
+    	value:0,
+        label:'内容内容内容内容内容内容',
+        remark:'辅助信息辅助信息辅助信息'
+    },
+    {
+        value:1,
+        label:'内容内容内容内容内容内容',
+        remark:'辅助信息辅助信息辅助信息'
+    }
+]
+```
+
+## API
+
+### xt-dialog props
+
+| 参数              | 说明                                                       | 类型    | 默认值     |
+| ----------------- | ---------------------------------------------------------- | ------- | ---------- |
+| show              | 是否显示                                                   | Boolean | true       |
+| type              | 弹窗类型，可选值为`nomal` `imageText` `inputText` `choose` | String  | nomal      |
+| title             | 标题                                                       | String  | null       |
+| message           | 内容                                                       | String  | ''         |
+| showConfirmButton | 是否展示确认按钮                                           | Boolean | true       |
+| showCancelButton  | 是否展示取消按钮                                           | Boolean | false      |
+| confirmButtonText | 确认按钮的文案                                             | String  | 确认       |
+| cancelButtonText  | 取消按钮的文案                                             | String  | 取消       |
+| placeholder       | 输入框占位符，仅当type为'inputText'时有用                  | String  | 请输入内容 |
+| imageUrl          | 图片链接，仅当type为'imageText'时有用                      | String  | null       |
+| chooiceItems      | 选项内容，仅当type为'choose'时有用                         | Array   | null       |
+
+### chooiceItems props []
+
+| 参数   | 说明           | 类型                    |
+| ------ | -------------- | ----------------------- |
+| value  | 选项的value值  | Number\|String\|Boolean |
+| label  | 选项的文本描述 | String                  |
+| remark | 选项的辅助信息 | String                  |
+
+
+
+
+
+
+
+
+

package/libs/xt-dialog/index.js

@@ -0,0 +1,126 @@
+// src/xt-dialog/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+      show:{
+        type:Boolean,
+        value:true
+      },
+      type:{
+        type:String,
+        value:'nomal'
+      },
+      title:{
+        type:String,
+        value:null
+      },
+      message:{
+        type:String,
+        value:''
+      },
+      showConfirmButton:{
+        type:Boolean,
+        value:true
+      },
+      showCancelButton:{
+        type:Boolean,
+        value:false
+      },
+      confirmButtonText:{
+        type:String,
+        value:'我知道了'
+      },
+      cancelButtonText:{
+        type:String,
+        value:'取消'
+      },
+      placeholder:{
+        type:String,
+        value:'请输入内容'
+      },
+      imageUrl:{
+        type:String,
+        value:null
+      },
+      chooiceItems:{
+        type:Array,
+        value:[]
+      }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+      // 输入框的值
+      inpVal:'',
+      // 单选框选定的值
+      curChoosedItemVal: null,
+    },
+
+    lifetimes: {
+      attached(){
+        if(this.properties.type == 'inputText'){
+          this.setData({
+            inpVal: this.properties.message
+          })
+        }
+      }
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+      // 输入样式 - 输入框失焦
+      onInputBlur(e){
+        console.log('输入值',e);
+        this.setData({
+          inpVal: e.detail.value
+        })
+      },
+
+      // 选择样式 - 选择某一项
+      chooseItem(e){
+        let { chooseitem } = e.currentTarget.dataset;
+        this.setData({
+          curChoosedItemVal: chooseitem.value
+        })
+        console.log('触发选择',this.data.curChoosedItemVal);
+      },
+
+
+
+
+      // 点击确认按钮
+      confirmBtn(e){
+        let { confirmtype } = e.currentTarget.dataset;
+        // 常规样式&&图文样式
+        if(['nomalDialog','imageTextDialog'].includes(confirmtype)){
+          this.triggerEvent('confirm',{})
+        }
+        // 输入样式
+        if(confirmtype == 'inputDialog'){
+          this.triggerEvent('inputConfirm', this.data.inpVal)
+        }
+        // 选择样式
+        if(confirmtype == 'chooseDialog'){
+          if(this.data.curChoosedItemVal===null){
+            wx.showToast({
+              title: '请选择~',
+              icon:'none',
+              duration:3000
+            })
+            return
+          }
+          this.triggerEvent('chooseConfirm', this.data.curChoosedItemVal)
+        }
+      },
+      // 点击取消按钮
+      cancelBtn(){
+        this.triggerEvent('cancel',{})
+      }
+    }
+})

package/libs/xt-dialog/index.json

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

package/libs/xt-dialog/index.wxml

@@ -0,0 +1,51 @@
+<!--src/xt-dialog/index.wxml-->
+<block wx:if="{{show}}">
+  <!-- 纯文本样式 && 标题样式 -->
+  <view class="dialog_mask" wx:if="{{type=='nomal'}}">
+    <view class="dialog_box">
+      <view class="title" wx:if="{{title}}">{{title}}</view>
+      <view class="content" style="font-weight:{{title?400:800}};">{{message}}</view>
+      <view class="default_btn" catchtap="confirmBtn" data-confirmtype="nomalDialog" wx:if="{{showConfirmButton}}">{{confirmButtonText}}</view>
+      <view class="cancel_btn" catchtap="cancelBtn" wx:if="{{showCancelButton}}">{{cancelButtonText}}</view>
+    </view>
+  </view>
+  <!-- 图文样式 -->
+  <view class="dialog_mask" wx:if="{{type=='imageText'}}">
+    <view class="dialog_box">
+      <view class="title" wx:if="{{title}}">{{title}}</view>
+      <image class="image" wx:if="{{imageUrl}}" src="{{imageUrl}}"></image>
+      <view class="content">{{message}}</view>
+      <view class="default_btn" catchtap="confirmBtn" data-confirmtype="imageTextDialog" wx:if="{{showConfirmButton}}">{{confirmButtonText}}</view>
+      <view class="cancel_btn" catchtap="cancelBtn" wx:if="{{showCancelButton}}">{{cancelButtonText}}</view>
+    </view>
+  </view>
+  <!-- 输入样式 -->
+  <view class="dialog_mask" wx:if="{{type=='inputText'}}">
+    <view class="dialog_box">
+      <view class="title" winp_boxx:if="{{title}}">{{title}}</view>
+      <view class="inp_wrapper">
+        <textarea class="inp_content" value="{{inpVal}}" maxlength="{{48}}" disable-default-padding adjust-position auto-height auto-focus placeholder="{{placeholder}}" placeholder-style="color: #999;" bindblur="onInputBlur"/>
+      </view>
+      <view class="default_btn" catchtap="confirmBtn" data-confirmtype="inputDialog" wx:if="{{showConfirmButton}}">{{confirmButtonText}}</view>
+      <view class="cancel_btn" catchtap="cancelBtn" wx:if="{{showCancelButton}}">{{cancelButtonText}}</view>
+    </view>
+  </view>
+  <!-- 选择样式 -->
+  <view class="dialog_mask" wx:if="{{type=='choose'}}">
+    <view class="dialog_box">
+      <view class="title" wx:if="{{title}}">{{title}}</view>
+      <view class="radio_box">
+        <view class="radio_item" wx:for="{{chooiceItems}}" wx:key="index" catchtap="chooseItem" data-chooseitem="{{item}}">
+          <image class="radio_icon" src="{{item.value!==curChoosedItemVal?'https://img.tanjiu.cn/home/SBaYKEs2iJiF3564zwRPtHAfB2Hfy7ZW.png':'https://img.tanjiu.cn/home/AD3tpDYJiGjGimY25sCSanJsEYXnEHFk.png'}}"></image>
+          <view class="radio_content">
+            <view class="radio_text">{{item.label}}</view>
+            <view class="radio_remark" wx:if="{{item.remark}}">{{item.remark}}</view>
+          </view>
+        </view>
+      </view>
+      <view class="default_btn" catchtap="confirmBtn" data-confirmtype="chooseDialog" wx:if="{{showConfirmButton}}">{{confirmButtonText}}</view>
+      <view class="cancel_btn" catchtap="cancelBtn" wx:if="{{showCancelButton}}">{{cancelButtonText}}</view>
+    </view>
+  </view>
+</block>
+

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;
+}