@xtdev/xt-miniprogram-ui 1.2.60 → 1.2.61

package/libs/xt-popover/index.js

@@ -0,0 +1,209 @@
+Component({
+  behaviors: [],
+  observers: {},
+  properties: {
+    zIndx: {
+      type: Number,
+      value: 999,
+      observer: function () {},
+    },
+    // 弹窗标题
+    title: {
+      type: String,
+      value: "",
+      observer: function () {},
+    },
+    // 弹窗类型
+    type: {
+      type: String,
+      value: "operate",
+      observer: function () {},
+    },
+    show: {
+      type: Boolean,
+      value: false,
+      observer: async function (val) {
+        if (val) {
+          const res = await this.findIntersection();
+          this.setData({
+            sourceData: res,
+          });
+        }
+      },
+    },
+    showCloseIcon: {
+      type: Boolean,
+      value: true,
+      observer: function (val) {},
+    },
+
+    // 文本内容
+    textContent: {
+      type: String,
+      value: "",
+      observer: function () {},
+    },
+    // 列表每一项标题内容
+    itemTextKey: {
+      type: String,
+      value: "",
+      observer: function () {},
+    },
+    // 操作
+    operates: {
+      type: Array,
+      value: [],
+      observer: function () {},
+    },
+    // 源数据
+    sourceData: {
+      type: Array,
+      value: [],
+      observer: function (val) {},
+    },
+    // 选中数据
+    selectData: {
+      type: Array,
+      value: [],
+      observer: async function () {},
+    },
+    // 数据对比字段，用于找出选中的数据
+    contrastId: {
+      type: String,
+      value: "",
+      observer: function () {},
+    },
+  },
+  data: {
+    sourceData: [],
+    multipleChooseData: [],
+  },
+  methods: {
+    closePopover() {
+      this.triggerEvent("onClose");
+      this.resetSourceData();
+    },
+
+    async findIntersection() {
+      const { sourceData, selectData, contrastId, type } = this.data;
+
+      for (const selectItem of selectData) {
+        for (const sourceItem of sourceData) {
+          if (type === "multiple") {
+            if (selectItem[contrastId] == sourceItem[contrastId]) {
+              sourceItem.selected = true;
+            }
+          } else {
+            if (selectItem[contrastId] == sourceItem[contrastId]) {
+              sourceItem.selected = true;
+            } else {
+              sourceItem.selected = false;
+            }
+          }
+        }
+      }
+      return this.deepClone(sourceData);
+    },
+    // 重置数据
+    async resetSourceData() {
+      const { sourceData } = this.data;
+      for (const sourceItem of sourceData) {
+        delete sourceItem.selected;
+      }
+
+      this.setData({
+        sourceData: this.deepClone(sourceData),
+      });
+    },
+
+    async formatSourceData(chooseItem) {
+      const { sourceData, contrastId } = this.data;
+      for (const sourceItem of sourceData) {
+        if (
+          chooseItem[contrastId] == sourceItem[contrastId] &&
+          sourceItem.selected
+        ) {
+          sourceItem.selected = false;
+        } else if (
+          chooseItem[contrastId] == sourceItem[contrastId] &&
+          !sourceItem.selected
+        ) {
+          sourceItem.selected = true;
+        }
+      }
+      return sourceData;
+    },
+
+    confirm() {
+      const { sourceData } = this.data;
+      const chooseData = sourceData.filter((item) => item.selected);
+
+      const deleteSelected = chooseData.map((item) => {
+        delete item.selected;
+        return item;
+      });
+      this.triggerEvent("onConfirm", { chooseData: deleteSelected });
+    },
+
+    async chooseItemClick(event) {
+      const chooseItem = event.currentTarget.dataset.item;
+      const { type } = this.data;
+
+      if (type == "single") {
+        delete chooseItem.selected;
+        this.triggerEvent("onChooseItemClick", { chooseItem });
+      } else if (type == "multiple") {
+        const res = await this.formatSourceData(chooseItem);
+
+        this.setData({
+          sourceData: this.deepClone(res),
+        });
+      } else {
+        this.triggerEvent("onChooseItemClick", { chooseItem });
+      }
+    },
+
+    deepClone(target, map = new Map()) {
+      if (typeof target === "object") {
+        const isArray = Array.isArray(target);
+        let cloneTarget = isArray ? [] : {};
+
+        if (map.get(target)) {
+          return map.get(target);
+        }
+        map.set(target, cloneTarget);
+
+        const keys = isArray ? undefined : Object.keys(target);
+        this.forEach(keys || target, (value, key) => {
+          if (keys) {
+            key = value;
+          }
+          cloneTarget[key] = this.deepClone(target[key], map);
+        });
+
+        return cloneTarget;
+      } else {
+        return target;
+      }
+    },
+    forEach(array, iteratee) {
+      let index = -1;
+      const length = array.length;
+      while (++index < length) {
+        iteratee(array[index], index);
+      }
+      return array;
+    },
+  },
+  pageLifetimes: {
+    // 组件所在页面的生命周期函数
+    show: function () {},
+    hide: function () {},
+    resize: function () {},
+  },
+  created: function () {},
+  attached: function () {},
+  ready: function () {},
+  moved: function () {},
+  detached: function () {},
+});

package/libs/xt-popover/index.json

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

package/libs/xt-popover/index.wxml

@@ -0,0 +1,43 @@
+<view wx:if="{{show}}" class="xt-popover-popup" style="z-index:{{zIndx}}">
+    <view class="xt-popover">
+        <view wx:if="{{ type == 'operate'}}" class="operate-wrapper">
+            <view class="operate-content font40rpx">
+                <block wx:for="{{operates}}" wx:for-item="operate" wx:for-index="idx" wx:key="idx">
+                    <view bindtap="chooseItemClick" data-item="{{operate}}" class="flex-center operate">
+                        {{operate[itemTextKey]}}
+                    </view>
+                </block>
+            </view>
+            <view bindtap="closePopover" class="font40rpx flex-center cancel">取消</view>
+        </view>
+        <view wx:else class="content-wrapper">
+            <view class="header">
+                <view class="header-title">{{title}}</view>
+                <image wx:if="{{showCloseIcon}}" bindtap="closePopover" class="close-icon" src="https://img.tanjiu.cn/home/zGMfEx8iJBb6JewsFrYXNWs8R8KRwjzD.png" mode="widthFix"></image>
+            </view>
+            <scroll-view scroll-y="true" class="content font40rpx {{ type == 'single' ? 'spec-content':''}}">
+                <view class="content-info">
+                    <block wx:if="{{type == 'text'}}">{{textContent}}</block>
+                    <view wx:else class="list">
+                        <block wx:for="{{sourceData}}" wx:for-item="listItem" wx:for-index="idx" wx:key="idx">
+                            <view class="list-item" bindtap="chooseItemClick" data-item="{{listItem}}">
+                                <view class="list-item-label">{{listItem[itemTextKey]}}</view>
+                                <block wx:if="{{type == 'multiple'}}">
+                                    <xt-icon wx:if="{{listItem.selected}}" icon="tongguo" size="44" style="color:#30BF67"></xt-icon>
+                                    <xt-icon wx:else icon="weixuanzhong1" size="44" style="color:#999999"></xt-icon>
+                                </block>
+                                <block wx:if="{{type == 'single'}}">
+                                    <xt-icon wx:if="{{listItem.selected}}" icon="zhengque" size="44" style="color:#30BF67"></xt-icon>
+                                </block>
+                            </view>
+                        </block>
+                    </view>
+                    <slot ></slot>
+                </view>
+            </scroll-view>
+            <view wx:if="{{type == 'text' || type == 'multiple'}}" class="btn-wrapper">
+                <view bindtap="confirm" class="confirm flex-center">确定</view>
+            </view>
+        </view>
+    </view>
+</view>

package/libs/xt-popover/index.wxss

@@ -0,0 +1,135 @@
+.xt-popover-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.7);
+
+  transition-property: opacity;
+  transition-timing-function: ease;
+}
+.xt-popover-popup .xt-popover {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background-color: #ffffff;
+  border-radius: 20rpx 20rpx 0 0;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  padding-bottom: calc(constant(safe-area-inset-bottom) + 0rpx);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 0rpx);
+
+  transition: all 0.5s ease-in;
+}
+
+.xt-popover .operate-wrapper {
+  overflow: hidden;
+  background: #ededed;
+}
+
+.xt-popover .operate-content {
+  background-color: #ffffff;
+  margin-bottom: 16rpx;
+  box-sizing: border-box;
+}
+
+.xt-popover .operate {
+  box-sizing: border-box;
+  width: 100%;
+  height: 120rpx;
+  box-shadow: inset 0px -2rpx 0rpx 0rpx #ededed;
+}
+
+.xt-popover .cancel {
+  width: 100%;
+  min-height: 120rpx;
+  background-color: #ffffff;
+}
+
+.xt-popover .flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.xt-popover .font40rpx {
+  font-size: 40rpx;
+  font-weight: 400;
+  color: #000000;
+}
+
+.content-wrapper {
+  box-sizing: border-box;
+  background-color: #ffffff;
+}
+
+.xt-popover-popup .header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 32rpx;
+
+  width: 100%;
+  height: 120rpx;
+  background: #ffffff;
+  box-shadow: inset 0px -2rpx 0rpx 0rpx #f5f5f5;
+  font-size: 40rpx;
+  font-weight: 600;
+  color: #222222;
+}
+
+.xt-popover-popup .content {
+  box-sizing: border-box;
+  height: 924rpx;
+}
+
+.xt-popover-popup .spec-content {
+  height: 1084rpx;
+}
+
+.xt-popover-popup .content-info {
+  box-sizing: border-box;
+  padding: 32rpx;
+  text-align: justify;
+}
+
+.xt-popover-popup .close-icon {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.xt-popover-popup .btn-wrapper {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 32rpx;
+  height: 160rpx;
+  background: #ffffff;
+  box-shadow: inset 0px 2rpx 0rpx 0rpx #ededed;
+}
+
+.xt-popover-popup .confirm {
+  width: 100%;
+  height: 100%;
+  background: #6722ab;
+  border-radius: 120rpx;
+
+  font-size: 40rpx;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.xt-popover-popup .list-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 32rpx 0;
+}
+
+.xt-popover-popup .list-item-label {
+  flex: 1;
+  margin-right: 20rpx;
+}

package/libs/xt-preview-image/README.md

@@ -0,0 +1,46 @@
+# PreviewImage 图片预览
+
+### 介绍
+自定义图片预览
+
+###效果图
+![效果图](https://img.tanjiu.cn/home/DdSaiWjWS8pGMWMarhWs7s4hAJXjzdcF.png "图片预览效果图")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-preview-image": "@xtdev/xt-miniprogram-ui/xt-preview-image",
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+#### 操作样式
+
+```
+     <image-preview id="imagePreview" show="{{showPreviewPop}}" images="{{previewImages}}" current-index="0" bind:close="onPreviewClose" />
+```
+
+## API
+
+#### xt-popover props
+
+| 参数         | 说明        |  类型      |  默认值        |
+| ----------- | ----------- | ---------- | ------------  |
+| show      | 是否显示预览，可选值为 `true` `false` | boolean |  `false`
+| images      | 图片列表 | array |    `[]`
+| currentIndex      | 当前显示的图片索引 | number |  `0`
+
+
+
+####Events
+
+| 事件名            | 说明          |  回调参数               |
+| ---------------- | ------------- | ---------------------- |
+| bind:imageload   | 图片加载完成 | event.detail
+| bind:imagetap    | 点击图片 | event 
+| bind:change      | 切换图片 | currentIndex 当前示的图片索引
+| bind:close       | 关闭预览 | event

package/libs/xt-preview-image/index.js

@@ -0,0 +1,111 @@
+Component({
+  properties: {
+    // 是否显示预览
+    show: {
+      type: Boolean,
+      value: false,
+    },
+    // 图片列表
+    images: {
+      type: Array,
+      value: [],
+    },
+    // 当前显示的图片索引
+    currentIndex: {
+      type: Number,
+      value: 0,
+    },
+  },
+
+  data: {
+    current: 0, // 当前显示图片索引
+    startX: 0, // 手势开始X坐标
+    isSwiping: false, // 是否正在滑动
+  },
+
+  observers: {
+    images: function (newVal) {
+      this.setData({
+        current: 0,
+      });
+    },
+    currentIndex: function (newVal) {
+      this.setData({
+        current: newVal,
+      });
+    }
+  },
+
+  methods: {
+    // 图片加载完成
+    onImageLoad(e) {
+      this.triggerEvent('imageload', e.detail);
+    },
+
+    // 点击图片
+    onImageTap() {
+      this.triggerEvent('imagetap');
+    },
+
+    // 切换上一张
+    onPrev(e) {
+      if (this.data.current > 0) {
+        const newIndex = this.data.current - 1;
+        this.setData({
+          current: newIndex,
+        });
+        console.log('hadel prev', newIndex);
+        this.triggerEvent('change', { current: newIndex });
+      }
+    },
+
+    // 切换下一张
+    onNext(e) {
+      if (this.data.current < this.data.images.length - 1) {
+        const newIndex = this.data.current + 1;
+        this.setData({
+          current: newIndex,
+        });
+        console.log('hadel next', newIndex);
+        this.triggerEvent('change', { current: newIndex });
+      }
+    },
+
+    // swiper切换事件
+    onSwiperChange(e) {
+      const newIndex = e.detail.current;
+      this.setData({
+        current: newIndex,
+      });
+      this.triggerEvent('change', { current: newIndex });
+    },
+
+    // 动画结束事件
+    onAnimationFinish(e) {
+      this.setData({
+        isSwiping: false,
+      });
+    },
+
+    // 关闭预览
+    onClose() {
+      this.triggerEvent('close');
+    },
+
+    // 外部调用方法：打开预览
+    open(images, index = 0) {
+      this.setData({
+        show: true,
+        images: images,
+        current: index,
+      });
+    },
+
+    // 外部调用方法：关闭预览
+    close() {
+      this.setData({
+        show: false,
+      });
+    },
+  },
+});

package/libs/xt-preview-image/index.json

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

package/libs/xt-preview-image/index.wxml

@@ -0,0 +1,25 @@
+<view wx:if="{{show}}">
+  <view class="preview-container" bindtap="onClose">
+    <!-- 顶部指示器 -->
+    <view class="indicator">{{current + 1}}/{{images.length}}</view>
+    <!-- 图片滑动区域 -->
+    <swiper class="image-swiper" current="{{current}}" duration="300" bindchange="onSwiperChange" bindanimationfinish="onAnimationFinish">
+      <block wx:for="{{images}}" wx:key="*this">
+        <swiper-item>
+          <view class="image-container">
+            <image class="preview-image" src="{{item}}" mode="widthFix" bindload="onImageLoad" bindtap="onImageTap" />
+          </view>
+        </swiper-item>
+      </block>
+    </swiper>
+    <!-- 左右箭头导航 -->
+    <view class="nav-arrow left-arrow" catch:tap="onPrev" wx:if="{{current > 0}}">
+      <image class="arrow-icon" src="https://img.tanjiu.cn/home/P2EQ2zaa5izYWX8W7F2TfnnxxX2ByiKD.png" mode="aspectFit" />
+    </view>
+    <view class="nav-arrow right-arrow" catch:tap="onNext" wx:if="{{current < images.length - 1}}">
+      <image class="arrow-icon" src="https://img.tanjiu.cn/home/kNny7B8ymAdta2fWSEkPysZHfRWXSjHA.png" mode="aspectFit" />
+    </view>
+    <!-- 关闭按钮 -->
+    <view class="close-btn" catch:tap="onClose"></view>
+  </view>
+</view>

package/libs/xt-preview-image/index.wxss

@@ -0,0 +1,82 @@
+.preview-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.9);
+  z-index: 99;
+}
+
+.indicator {
+  position: absolute;
+  top: 148rpx;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: #fff;
+  font-size: 32rpx;
+  z-index: 100;
+}
+
+.image-swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.image-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.preview-image {
+  width: 100%;
+  display: block;
+}
+
+.nav-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 80rpx;
+  height: 80rpx;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.left-arrow {
+  left: 20rpx;
+}
+
+.right-arrow {
+  right: 20rpx;
+}
+
+.arrow-icon {
+  width: 56rpx;
+  height: 56rpx;
+}
+
+.close-btn {
+  position: absolute;
+  bottom: 148rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  background-image: url("https://img.tanjiu.cn/home/mZ2k3nw6FMc5besY7yHW3JKibXi7Ehmh.png");
+  background-size: cover;
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 40rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  font-size: 32rpx;
+  z-index: 100;
+}