@xtdev/xt-miniprogram-ui 1.0.10 → 1.0.13

package/libs/xt-button/README.md

@@ -0,0 +1,60 @@
+# Icon图标
+
+### 介绍
+按钮用于触发一个操作
+
+###效果图
+![效果图](https://img.tanjiu.cn/home/eRzWjCbMsFbr6knYRcF2npEcjHAXEYFQ.png "Button效果图")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-button": "@xtdev/xt-miniprogram-ui/xt-button",
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```
+    <xt-button type="main">默认状态</xt-button>
+```
+
+##API
+
+####xt-button props
+
+| 参数         | 说明        |  类型      |  默认值        |
+| ----------- | ----------- | ---------- | ------------  |
+| type      | 按钮类型，可选值为 `main` `secondary` | string |  `secondary`
+| size      | 按钮尺寸，可选值为 `normal` `large` `small` | string | `normal`
+| icon      | 左侧图标名称                          | string |
+| disabled  | 是否禁用按钮                      | boolean | `false`
+| open-type      | 微信开放能力，具体支持可参考[微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | string |
+| app-parameter      | 打开 APP 时，向 APP 传递的参数 | string |    
+| lang      | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | string |    `en`
+| session-from      | 会话来源 | string |    
+| business-id      | 客服消息子商户 id | number |    
+| send-message-title      | 会话内消息卡片标题 | string |  当前标题  
+| send-message-path      | 会话内消息卡片点击跳转小程序路径 | string |    当前分享路径
+| send-message-img      | sendMessageImg | string |    截图
+| show-message-card     | 显示会话内消息卡片 | string |   `false`
+| dataset      | 按钮 dataset，open-type 为 share 时，可在 onShareAppMessage 事件的 `event.target.dataset.detail` 中看到传入的值 | any |    
+
+
+
+####Events
+
+| 事件名            | 说明          |  回调参数               |
+| ---------------- | ------------- | ---------------------- |
+| bind:click      | 点击按钮，且按钮状态不为加载或禁用时触发 | 
+| bind:getuserinfo      | 用户点击该按钮时，会返回获取到的用户信息，
+从返回参数的 detail 中获取到的值同 wx.getUserInfo |
+| bind:contact      | 客服消息回调 | 
+| bind:getphonenumber      | 获取用户手机号回调 | 
+| bind:getrealtimephonenumber       | 获取手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效 |
+| bind:error      | 当使用开放能力时，发生错误的回调 | 
+| bind:opensetting      | 在打开授权设置页后回调 | 
+| bind:chooseavatar      | 当 open-type 的值为 chooseAvatar 时，选择头像之后的回调 | 

package/libs/xt-button/index.js

@@ -0,0 +1,116 @@
+// 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",
+		},
+		disabled: {
+			type: Boolean,
+			value: false,
+		},
+		dataset: null,
+		openType: {
+			type: String,
+			value: "",
+		},
+		appParameter: {
+			type: String,
+			value: "",
+		},
+		showMessageCard: {
+			type: String,
+			value: "",
+		},
+		sendMessagePath: {
+			type: String,
+			value: "",
+		},
+		sendMessageTitle: {
+			type: String,
+			value: "",
+		},
+		lang: {
+			type: String,
+			value: "en",
+		},
+		appParameter: {
+			type: String,
+			value: "",
+		},
+		appParameter: {
+			type: String,
+			value: "",
+		},
+		appParameter: {
+			type: String,
+			value: "",
+		},
+	},
+
+	/**
+	 * 组件的初始数据
+	 */
+	data: {
+		iconSizeObj: {
+			small: { main: 40, secondary: 32 },
+			normal: { main: 48, secondary: 40 },
+			large: { main: 48, secondary: 48 },
+		},
+		iconRightObj: {
+			small: { main: 8, secondary: 4 },
+			normal: { main: 16, secondary: 8 },
+			large: { main: 16, secondary: 16 },
+		},
+	},
+
+	/**
+	 * 组件的方法列表
+	 */
+	methods: {
+		onClick(event) {
+			const { disabled } = this.properties;
+			if (disabled) {
+				return;
+			}
+			this.triggerEvent("click", event);
+		},
+		onGetUserInfo(event) {
+			this.triggerEvent("getuserinfo", event.detail);
+		},
+		onContact(event) {
+			this.triggerEvent("contract", event.detail);
+		},
+		onGetPhoneNumber(event) {
+			this.triggerEvent("getphonenumber", event.detail);
+		},
+		onGetrealtimephonenumber(event) {
+			this.triggerEvent("getphonenumber", event.detail);
+		},
+		onError(event) {
+			this.triggerEvent("error", event.detail);
+		},
+		onLaunchApp(event) {
+			this.triggerEvent("launchapp", event.detail);
+		},
+		onOpenSetting(event) {
+			this.triggerEvent("opensetting", event.detail);
+		},
+		onChooseAvatar(event) {
+			this.triggerEvent("chooseavatar", event.detail);
+		},
+	},
+});

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,31 @@
+<!-- src/xt-button/index.wxml -->
+<view class="xt-button">
+  <button 
+    disabled="{{ disabled }}"
+    bindtap="onClick" 
+    class="xt-button-{{size}} xt-button-{{type}} {{disabled ? 'xt-button-disabled-'+type : ''}}" 
+    hover-class="xt-button-{{type}}-clicked" 
+    open-type="{{ openType }}"
+    business-id="{{ businessId }}" 
+    session-from="{{ sessionFrom }}" 
+    send-message-title="{{ sendMessageTitle }}" 
+    send-message-path="{{ sendMessagePath }}" 
+    send-message-img="{{ sendMessageImg }}" 
+    show-message-card="{{ showMessageCard }}" 
+    app-parameter="{{ appParameter }}" 
+    data-detail="{{ dataset }}" 
+    bindgetuserinfo="onGetUserInfo" 
+    bindcontact="onContact" 
+    bindgetphonenumber="onGetPhoneNumber" 
+    bindgetrealtimephonenumber="getrealtimephonenumber"
+    binderror="onError" 
+    bindlaunchapp="onLaunchApp" 
+    bindopensetting="onOpenSetting" 
+    bindchooseavatar="onChooseAvatar"
+  >
+    <xt-icon wx:if="{{icon}}" icon="{{icon}}" size="{{iconSizeObj[size][type]}}" style="margin-right: {{iconRightObj[size][type]}}rpx"></xt-icon>
+    <view>
+      <slot />
+    </view>
+  </button>
+</view>

package/libs/xt-button/index.wxss

@@ -0,0 +1,70 @@
+/* src/xt-button/index.wxss */
+.xt-button button {
+  display        : flex;
+  align-items    : center;
+  justify-content: center;
+  text-align: center;
+  border-radius  : 120rpx;
+  box-sizing     : border-box !important;
+  font-family    : PingFang SC-Semibold,
+    PingFang SC;
+  font-weight: 800;
+  margin     : 0 !important;
+  width      : auto !important;
+}
+
+.xt-button-small {
+  padding    : 0 32rpx;
+  font-size  : 34rpx;
+  line-height: 48rpx;
+  height: 80rpx;
+}
+
+.xt-button-normal {
+  /* padding    : 20rpx 48rpx; */
+  padding : 0 48rpx;
+  font-size  : 40rpx;
+  line-height: 56rpx;
+  height: 96rpx;
+}
+
+.xt-button-large {
+  /* padding    : 24rpx 64rpx; */
+  padding : 0 64rpx;
+  font-size  : 48rpx;
+  line-height: 68rpx;
+  height: 116rpx;
+}
+
+.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;
+}

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