@xtdev/xt-miniprogram-ui 1.2.60 → 1.2.63

package/libs/xt-date-picker-loop/index.wxml

@@ -0,0 +1,61 @@
+<view wx:if="{{show}}" class="container">
+  <view class="xt-mask"></view>
+  <view class="xt-popup">
+    <!-- 顶部标题+关闭按钮 -->
+    <view class="xt-popup-head">
+      <view class="xt-popup-head-text">{{title}}</view>
+      <xt-icon catchtap="onClose" icon="shibai-xiao" class="shibai-xiao" size="48"/>
+    </view>
+    <!-- 分割线 -->
+    <view class="head-border"></view>
+    <!-- 切换选择类型按钮 -->
+    <view wx:if="{{showChangeTab}}" class="filter-btn" catchtap="changeFiltType">
+      <view>{{typeEnums[filtType]}}</view>
+      <xt-icon icon="shaixuan" class="shaixuan" size="32"/>
+    </view>
+    <!-- 选中日期 -->
+    <view class="date-sel">
+      <view wx:if="{{filtType === 'date' || filtType === 'yearMonth'}}" class="sel-sigle actived">{{dateStr}}</view>
+      <view wx:else class="sel-range">
+        <view catchtap="switchDateType" data-type="start" class="sel-start  {{checkedType == 'start' ? 'actived' : ''}}">
+          {{startDateStr}}
+        </view>
+        <view>至</view>
+        <view catchtap="switchDateType" data-type="end" class="sel-end  {{checkedType  == 'end' ? 'actived' : ''}}">
+          {{ endDateStr || '结束时间'}}
+        </view>
+      </view>
+    </view>
+    <!-- 选择器 -->
+    <picker-view
+      class="picker-box"
+      value="{{dateArr}}"
+      indicator-style="{{indicatorSyle}}"
+      immediate-change="{{true}}"
+      mask-class="picker-mask"
+      bindchange="bindChange"
+      bindpickstart="bindPickstart"
+      bindpickend="bindPickend">
+      <picker-view-column>
+        <view wx:for="{{years}}" wx:key="index" class="picker-item {{dateArr[0] === index ? 'picker-select' : ''}}">
+          {{item}}年
+        </view>
+      </picker-view-column>
+      <picker-view-column>
+        <view wx:for="{{months}}" wx:key="index" class="picker-item {{dateArr[1] === index ? 'picker-select' : ''}}">
+          {{item}}月
+        </view>
+      </picker-view-column>
+      <picker-view-column wx:if="{{filtType !== 'yearMonth'}}">
+        <view wx:for="{{days}}" wx:key="index" class="picker-item {{dateArr[2] === index ? 'picker-select' : ''}}">
+          {{item}}日
+        </view>
+      </picker-view-column>
+    </picker-view>
+    <!-- 按钮组 -->
+    <view class="btns-group">
+      <xt-button catchtap="onReset" class="btn-reset">{{cancelButtonText}}</xt-button>
+      <xt-button catchtap="onConfirm" disabled="{{btnDisabled}}" type="main" class="btn-confirm">{{confirmButtonText}}</xt-button>
+    </view>
+  </view>
+</view>

package/libs/xt-date-picker-loop/index.wxss

@@ -0,0 +1,117 @@
+.btns-group {
+  display: flex;
+}
+.btn-reset, .btn-confirm {
+  width: 328rpx;
+}
+.xt-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+  background: rgba(0, 0, 0, 0.7);
+}
+.xt-popup {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1204rpx;
+  padding: 32rpx;
+  border-radius: 24rpx 24rpx 0 0;
+  box-sizing: border-box;
+  background: #fff;
+  z-index: 999;
+}
+.xt-popup-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 32rpx;
+}
+.xt-popup-head .xt-popup-head-text {
+  line-height: 56rpx;
+  font-size: 40rpx;
+  font-weight: 800;
+  color: #000;
+}
+.xt-popup-head .shibai-xiao {
+  color: #B8B8B8;
+}
+.head-border {
+  width: 100%;
+  height: 2rpx;
+  background: #F5F5F5;
+}
+.filter-btn {
+  display: flex;
+  align-items: center;
+  width: 226rpx;
+  height: 80rpx;
+  margin-top: 32rpx;
+  padding: 16rpx 24rpx;
+  font-size: 34rpx;
+  border-radius: 60rpx;
+  box-sizing: border-box;
+  background: #E5E5E5;
+}
+.filter-btn .shaixuan {
+  margin-left: 8rpx;
+}
+.date-sel {
+  margin-top: 48rpx;
+}
+.sel-sigle, .sel-start, .sel-end {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 80rpx;
+  border-radius: 60rpx;
+  font-weight: 800;
+  color: #666666;
+  border: 2rpx solid #E5E5E5;
+}
+.date-sel .sel-range {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.date-sel .sel-start, .date-sel .sel-end {
+  width: 296rpx;
+}
+.date-sel .actived {
+  color: #6722AB;
+  border: 2rpx solid #6722AB;
+}
+.picker-box {
+  width: 100%;
+  height: 600rpx;
+  margin-top: 32rpx;
+}
+.btns-group {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  padding: 32rpx;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding-bottom: calc(constant(safe-area-inset-bottom) + 32rpx);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx);
+}
+.picker-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 120rpx;
+  font-size: 40rpx;
+  color: #000000;
+  text-align: center;
+}
+.picker-select {
+  font-size: 40rpx;
+  font-weight: 800;
+}

package/libs/xt-dialog/README.md

@@ -0,0 +1,157 @@
+# 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:confirm="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:confirm="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                  |
+
+### Events
+
+| 事件         | 说明               | 回调参数     |
+| ------------ | ------------------ | ------------ |
+| bind:confirm | 点击确认按钮时触发 | event.detail |
+| bind:ccancel | 点击取消按钮时触发 | -            |
+
+
+
+
+
+
+

package/libs/xt-dialog/index.js

@@ -0,0 +1,142 @@
+// src/xt-dialog/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+      show:{
+        type:Boolean,
+        value:true
+      },
+      showCloseIcon:{
+        type:Boolean,
+        value:false
+      },
+      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:[]
+      },
+      maxlength: {
+        type: Number,
+        value: -1
+      },
+      minHeight: {
+        type: Number,
+        value: 0
+      }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+      // 输入框的值
+      inpVal:'',
+      // 单选框选定的值
+      curChoosedItemVal: null,
+    },
+
+    lifetimes: {
+      attached(){
+        if(this.properties.type == 'inputText'){
+          this.setData({
+            inpVal: this.properties.message
+          })
+        }
+      }
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+      // 输入样式 - 输入框输入
+      onInput(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);
+      },
+      // 点击右上角确认按钮
+      closeDialog() {
+        this.triggerEvent('close',{})
+      },
+
+
+
+
+      // 点击确认按钮
+      confirmBtn(e){
+        let { confirmtype } = e.currentTarget.dataset;
+        // 常规样式&&图文样式
+        if(['nomalDialog','imageTextDialog'].includes(confirmtype)){
+          this.triggerEvent('confirm',{})
+        }
+        // 输入样式
+        if(confirmtype == 'inputDialog'){
+          this.triggerEvent('confirm', this.data.inpVal)
+        }
+        // 选择样式
+        if(confirmtype == 'chooseDialog'){
+          if(this.data.curChoosedItemVal===null){
+            wx.showToast({
+              title: '请选择~',
+              icon:'none',
+              duration:3000
+            })
+            return
+          }
+          this.triggerEvent('confirm', this.data.curChoosedItemVal)
+        }
+      },
+      // 点击取消按钮
+      cancelBtn(){
+        this.triggerEvent('cancel',{})
+      }
+    }
+})

package/libs/xt-dialog/index.json

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

package/libs/xt-dialog/index.wxml

@@ -0,0 +1,64 @@
+<!--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>
+      <image catch:tap="closeDialog" src="https://img.tanjiu.cn/home/z8CZkrd2Cm4xyfmMTFbjQpFcdSXQTEk6.png" class="close_icon" wx:if="{{showCloseIcon}}"></image>
+      <view class="content" style="font-weight:{{title?400:800}};">{{message}}
+        <slot />
+      </view>
+      <slot name="btn"></slot>
+      <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 catch:tap="closeDialog" src="https://img.tanjiu.cn/home/z8CZkrd2Cm4xyfmMTFbjQpFcdSXQTEk6.png" class="close_icon" wx:if="{{showCloseIcon}}"></image>
+      <image class="image" wx:if="{{imageUrl}}" src="{{imageUrl}}"></image>
+      <view class="content">{{message}}
+        <slot />
+      </view>
+      <slot name="btn"></slot>
+      <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>
+      <image catch:tap="closeDialog" src="https://img.tanjiu.cn/home/z8CZkrd2Cm4xyfmMTFbjQpFcdSXQTEk6.png" class="close_icon" wx:if="{{showCloseIcon}}"></image>
+      <view class="inp_wrapper">
+        <textarea class="inp_content" value="{{inpVal}}" maxlength="{{maxlength}}" disable-default-padding adjust-position auto-height auto-focus placeholder="{{placeholder}}" style="min-height: {{minHeight}}rpx" placeholder-style="color: #999;" bindinput="onInput" />
+      </view>
+      <slot />
+      <slot name="btn"></slot>
+      <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>
+      <image catch:tap="closeDialog" src="https://img.tanjiu.cn/home/z8CZkrd2Cm4xyfmMTFbjQpFcdSXQTEk6.png" class="close_icon" wx:if="{{showCloseIcon}}"></image>
+      <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>
+      <slot />
+      <slot name="btn"></slot>
+      <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,129 @@
+/* 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);
+  position: relative;
+}
+.close_icon {
+  position: absolute;
+  right: 20rpx;
+  top: 20rpx;
+  width: 40rpx;
+  height: 40rpx;
+}
+.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;
+}