@xtdev/xt-miniprogram-ui 1.2.60 → 1.2.63

package/libs/package.json

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

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: 32,
+			normal: 40,
+			large: 48,
+		},
+		iconRightObj: {
+			small: 4,
+			normal: 8,
+			large: 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,7 @@
+{
+    "component": true,
+    "styleIsolation": "apply-shared",
+	"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]}}" style="margin-right: {{iconRightObj[size]}}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,67 @@
+# 列表卡片
+
+### 介绍
+列表中的单个展示项
+
+###效果图
+![效果图](https://img.tanjiu.cn/home/CQaAPy656nTYma6QPeJ7tRMJbDHEAeeG.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` |
+| headerSlot   | 卡片顶部插槽  | `slot` |
+| contentSlot   | 卡片底部插槽  | `slot` |
+
+#### ItemProps
+
+| 参数      | 说明 | 类型 |
+| ----------- | ----------- | ----------- |
+| title      | 卡片标题 | `String` |
+| subTitle   | 卡片副标题  | `String` |
+| subTitleColor   | 卡片副标题颜色  | `String` |
+| titleTags      | 标题标签 | `String[]` |
+| dataList   | 卡片内容  |  `datalistItem[]` |
+
+#### datalistItem
+
+| 参数      | 说明 | 类型 |
+| ----------- | ----------- | ----------- |
+| value      | 值 | `String` \| `Number` |
+| valueType   | 值类型，可选值为 `text` `tel`  | `String` |
+| label   | 字段描述  | `String` |

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

@@ -0,0 +1,43 @@
+Component({
+  options: {
+    multipleSlots: true,
+  },
+  properties: {
+    contentSlot: {
+      type: Boolean,
+      value: false,
+    },
+    headerSlot: {
+      type: Boolean,
+      value: false,
+    },
+    item: {
+      type: Object,
+      value: false,
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+  attached: function () {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    call(e) {
+      const tel = e.currentTarget.dataset.tel;
+      wx.makePhoneCall({
+        phoneNumber: tel, // 这里是电话号码[假的]可以调用自己的数据this.data.xxx
+        success: function () {
+          console.log("拨打电话成功！");
+        },
+        fail: function () {
+          console.log("拨打电话失败！");
+        },
+      });
+    },
+  },
+});

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

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {    
+  }
+}

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

@@ -0,0 +1,34 @@
+<view class="list-item">
+  <slot wx:if="{{headerSlot}}" name="header"></slot>
+  <view wx:else class="xt-card-cell-head">
+    <view class="flex-between align-center">
+      <view class="xt-card-cell-title">
+        {{item.title}}
+        <image wx:for="{{item.titleTags}}" wx:for-item="tagItem" wx:key="index" src="{{tagItem}}" wx:for-index="index" mode="heightFix" class="title_tag" />
+      </view>
+      <view wx:if="{{item.subTitle}}" class="xt-card-cell-sub-title" style="color: {{item.subTitleColor}};">
+        {{item.subTitle}}
+      </view>
+    </view>
+  </view>
+  <slot wx:if="{{contentSlot}}" name="content"></slot>
+  <view wx:else class="card-cell-content">
+    <view class="flex-between card-cell-item" wx:for="{{item.dataList}}" wx:for-item="_item" wx:key="index">
+      <view class="card-cell-item-left">{{_item.label}}</view>
+      <view wx:if="{{_item.valueType === 'text' || !_item.valueType}}" class="card-cell-item-right">
+        {{_item.value}}
+      </view>
+      <view bindtap="call" data-tel="{{_item.value}}" wx:elif="{{_item.valueType === 'tel'}}" class="card-cell-item-right">
+        {{_item.value}}
+        <view class="call-box">
+          <image src="https://img.tanjiu.cn/home/4Cp4kKzMK77cNfhDhnFnTzBJKyNd6iEX.png"></image>
+          拨打电话
+        </view>
+      </view>
+    </view>
+  </view>
+  <!-- 卡片底部 -->
+  <view class="card-cell-footer">
+    <slot name="card-footer"></slot>
+  </view>
+</view>

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

@@ -0,0 +1,89 @@
+.align-center {
+  align-items: center;
+}
+
+/* 中间列表 */
+.list-item {
+  /* padding: 0 24rpx 32rpx; */
+  padding: 0 32rpx 32rpx;
+  background-color: white;
+  border-radius: 16rpx;
+  margin: 0 auto 24rpx;
+  box-sizing: border-box;
+}
+
+.xt-card-cell-head {
+  padding: 32rpx 0;
+  width: 100%;
+  border-bottom: 2rpx solid #ededed;
+  margin-bottom: 32rpx;
+  word-break: break-all;
+}
+
+.xt-card-cell-title {
+  max-width: 500rpx;
+  font-weight: 800;
+  font-size: 40rpx;
+}
+
+.xt-card-cell-sub-title {
+  font-size: 34rpx;
+  font-family: PingFang SC-Semibold, PingFang SC;
+  font-weight: 600;
+  line-height: 48rpx;
+}
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.card-cell-item {
+  margin-top: 16rpx;
+  font-size: 28rpx;
+}
+.card-cell-item-left {
+  width: 188rpx;
+  margin-right: 20rpx;
+  color: #666666;
+  display: flex;
+  height: 48rpx;
+  font-size: 34rpx;
+  line-height: 48rpx;
+  white-space: nowrap;
+}
+.card-cell-item-right {
+  text-align: right;
+  color: #000000;
+  font-size: 34rpx;
+  line-height: 48rpx;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+}
+.call-box {
+  padding: 6rpx 12rpx;
+  font-size: 24rpx;
+  line-height: 34rpx;
+  font-size: 24rpx;
+  font-family: PingFang SC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #6722ab;
+  border-radius: 8rpx;
+  display: flex;
+  align-items: center;
+  background-color: rgba(103, 34, 171, 0.05);
+  margin-left: 14rpx;
+  white-space: nowrap;
+}
+.call-box image {
+  width: 24rpx;
+  height: 24rpx;
+  margin-right: 6rpx;
+}
+
+.xt-card-cell-title .title_tag {
+  height: 40rpx;
+  position: relative;
+  top: 6rpx;
+  margin-right: 6rpx;
+}

package/libs/xt-cell/README.md

@@ -0,0 +1,41 @@
+# cell
+
+### 介绍
+常用于数据展示
+
+### 效果图
+![效果图](https://img.tanjiu.cn/home/K4QMiYQ5AZDzGzaPbCWh4YiEs4SaQ76Y.png)
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-cell": "@xtdev/xt-miniprogram-ui/xt-cell",
+}
+```
+
+## 代码演示
+
+### 默认模式，
+```
+<xt-cell></xt-cell>
+```
+
+
+## API
+
+#### xt-cell props
+
+| 参数      | 说明 |  类型 | 默认值 |
+| ----------- | ----------- | ---------- | ---------- |
+| title      | 标题 | `string` ||
+| detailsMessage | 详细信息 | `string` ||
+| abstract | 摘要 | `string` ||
+| leftIcon | icon | `string` ||
+| leftIconSize | icond大小 | `string` |40|
+|  |  |  ||
+|  |  |  ||
+
+#### 事件
+
+无

package/libs/xt-cell/index.js

@@ -0,0 +1,42 @@
+Component({
+    options: {
+        multipleSlots: true
+    },
+    properties: {
+        title: {
+            type: String,
+            value: ""
+        },
+        detailsMessage: {
+            type: String,
+            value: ""
+        },
+        abstract: {
+            type: String,
+            value: ""
+        },
+        leftIcon: {
+            type: String,
+            value: ""
+        },
+        leftIconSize:{
+            type: String,
+            value: "40"
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+    },
+    attached: function () {
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+});

package/libs/xt-cell/index.json

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

package/libs/xt-cell/index.wxml

@@ -0,0 +1,12 @@
+<!--src/xt-cell/index.wxml-->
+<view class="xt-cell">
+    <xt-icon wx:if="{{leftIcon}}" class="xt-cell-left-icon" slot="left-icon" icon="{{leftIcon}}" size="{{leftIconSize}}"></xt-icon>
+    <view class="xt-cell-main">
+        <view class="xt-cell-main-top">
+            <view class="xt-cell-title">{{title}}</view>
+            <view class="xt-cell-subhead">{{detailsMessage}}</view>
+        </view>
+        <view wx:if="{{abstract}}" class="xt-cell-main-bottom">{{abstract}}</view>
+    </view>
+    <xt-icon class="xt-cell-right-icon" slot="right-icon" icon="youjiantou" size="32"></xt-icon>
+</view>

package/libs/xt-cell/index.wxss

@@ -0,0 +1,50 @@
+/* src/xt-cell/index.wxss */
+.xt-cell {
+    background-color: #fff;
+    padding: 32rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: PingFang SC-Regular, PingFang SC;
+}
+
+.xt-cell-title {
+    line-height: 56rpx;
+    font-size: 40rpx;
+    font-weight: 400;
+    flex-grow: 1;
+}
+
+.xt-cell-subhead {
+    line-height: 48rpx;
+    font-size: 34rpx;
+    font-weight: 400;
+    color: #666666;
+    flex-grow: 1;
+    text-align: right;
+}
+
+.xt-cell-left-icon {
+    margin-right: 24rpx;
+}
+
+.xt-cell-right-icon {
+    margin-left: 8rpx;
+}
+
+.xt-cell-main {
+    flex-grow: 1;
+}
+
+.xt-cell-main-top {
+    display: flex;
+    align-items: center;
+}
+
+.xt-cell-main-bottom {
+    line-height: 48rpx;
+    font-size: 34rpx;
+    font-weight: 400;
+    color: #666666;
+    margin-top: 8rpx;
+}