hw-cus-ui 1.0.23 → 1.0.25

package/HwBtn/HwBtn.vue

@@ -1,16 +1,16 @@
-<template>
-  <div class="btn">我的按钮</div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped>
-  .btn {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    color: #ffffff;
-  }
-</style>
+<template>
+  <div class="btn">我的按钮</div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+  .btn {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    color: #ffffff;
+  }
+</style>

package/HwBtn/index.ts

@@ -1,10 +1,10 @@
-// index.ts
-import type { App } from 'vue'
-import HwBtn from "./HwBtn.vue"
-
-// 使用install方法，在app.use挂载
-HwBtn.install = (app: App) => {
-    app.component(HwBtn.__name as string, HwBtn) //注册组件
-}
-
-export default HwBtn
+// index.ts
+import type { App } from 'vue'
+import HwBtn from "./HwBtn.vue"
+
+// 使用install方法，在app.use挂载
+HwBtn.install = (app: App) => {
+    app.component(HwBtn.__name as string, HwBtn) //注册组件
+}
+
+export default HwBtn

package/HwCheckbox/HwCheckbox.vue

@@ -0,0 +1,117 @@
+<template>
+  <view class="bn-select" :style="{ marginTop: marginTop }">
+    <view class="select-item">
+      <view>
+        <!-- 标签区域：显示字段标签和必填标识 -->
+        <view class="label" :style="{ color: types === 'detail' ? 'rgba(23, 26, 29, 0.6)' : 'rgba(23, 26, 29, 1)' }">
+          <text style="color: red" v-if="required">*</text>
+          {{ label }}
+        </view>
+        <!-- 编辑模式下显示复选框组件 -->
+        <slot>
+          <uni-data-checkbox
+            class="value"
+            v-if="pageType !== 'detail'"
+            v-model="value"
+            :localdata="localdata"
+            v-bind="$attrs"
+          />
+        </slot>
+
+        <!-- 详情模式下显示选中项的文本 -->
+        <view
+          class="value"
+          v-if="pageType === 'detail'"
+          :style="{ color: types === 'detail' ? 'rgba(23, 26, 29, 0.6)' : 'rgba(23, 26, 29, 1)' }"
+        >
+          {{ getValue(value) }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+/**
+ * 双向绑定的值，可以是字符串或数字类型
+ */
+const value = defineModel<string | number>();
+
+/**
+ * 组件属性接口定义
+ */
+interface Props {
+  /**
+   * 上边距，默认为 20px
+   */
+  marginTop?: string;
+  /**
+   * 页面类型，用于区分编辑页面还是详情页面
+   */
+  pageType?: string;
+  /**
+   * 字段标签名称（必填）
+   */
+  label: string;
+  /**
+   * 类型标识，用于控制样式显示
+   */
+  types?: string;
+  /**
+   * 是否必填项，true时会显示红色星号
+   */
+  required?: boolean;
+  /**
+   * 下拉选项数据列表，每项应包含value和text属性
+   */
+  localdata?: any[];
+}
+
+/**
+ * 定义组件接收的属性
+ */
+const props = defineProps<Props>();
+
+/**
+ * 解构赋值设置默认值
+ */
+const { label = '', marginTop = '20px', pageType = 'checkbox', types = 'add' } = props;
+
+/**
+ * 根据选中的值获取对应的文本显示
+ * @param val 当前选中的值
+ * @returns 对应的文本内容，未找到则返回空字符串
+ */
+const getValue = (val: any) => {
+  if (val) {
+    return props.localdata?.find((item) => item.value === val)?.text;
+  }
+  return '';
+};
+</script>
+
+<style lang="scss" scoped>
+.bn-select {
+  width: 100%;
+  border-bottom: 1rpx solid rgba(17, 31, 44, 0.12);
+  .select-item {
+    .label {
+      font-size: 34rpx;
+      letter-spacing: 0px;
+      line-height: 44rpx;
+      height: 44rpx;
+      color: rgba(23, 26, 29, 1);
+    }
+    .value {
+      font-size: 34rpx;
+      padding: 20rpx 0;
+    }
+  }
+  ::v-deep .checklist-text {
+    font-size: 34rpx !important;
+  }
+  ::v-deep .uni-data-checklist .checklist-group .checklist-box {
+    margin: 10rpx 40rpx 10rpx 0rpx !important;
+  }
+}
+</style>

package/HwCheckbox/index.ts

@@ -0,0 +1,10 @@
+// index.ts
+import type { App } from 'vue';
+import HwCheckbox from './HwCheckbox.vue';
+
+// 使用install方法，在app.use挂载
+HwCheckbox.install = (app: App) => {
+  app.component(HwCheckbox.__name as string, HwCheckbox); //注册组件
+};
+
+export default HwCheckbox;

package/HwDraggableBottomPopup/HwDraggableBottomPopup.vue

@@ -0,0 +1,195 @@
+<template>
+  <view class="draggable-popup-mask">
+    <view
+      class="draggable-popup-container"
+      :style="{
+        top: popupTop + 'px',
+        position: isDrag ? 'fixed' : 'initial',
+        borderTopLeftRadius: isDrag ? '20rpx' : '0',
+        borderTopRightRadius: isDrag ? '20rpx' : '0'
+      }"
+    >
+      <view
+        v-if="isDrag"
+        class="draggable-popup-handle"
+        @touchstart="handleTouchStart"
+        @touchmove="handleTouchMove"
+        @touchend="handleTouchEnd"
+        @touchcancel="handleTouchEnd"
+      >
+        <view class="draggable-popup-handle-line"></view>
+      </view>
+      <view class="draggable-popup-content" :style="{ height: isDrag ? contentPopupTop + 'px' : 'auto' }">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { useDebounceFn } from '@vueuse/core';
+export default {
+  name: 'DraggableBottomPopup',
+  props: {
+    heightCalc: {
+      type: String,
+      default: '0.4'
+    },
+    isDrag: {
+      type: Boolean,
+      default: () => true
+    }
+  },
+  data() {
+    return {
+      startY: 0,
+      startTop: 0,
+      popupTop: 0,
+      windowHeight: 0,
+      contentPopupTop: 0,
+      isMoving: false,
+      containerHeight: 0, // 容器高度
+      updateContentPopupTop: null // 防抖函数
+    };
+  },
+
+  mounted() {
+    this.getWindowInfo();
+    this.initPopupPosition();
+    // 初始化防抖函数
+    this.updateContentPopupTop = useDebounceFn(() => {
+      this.contentPopupTop = this.windowHeight - this.popupTop - 25;
+    }, 300);
+  },
+  methods: {
+    getWindowInfo() {
+      const systemInfo = uni.getSystemInfoSync();
+      this.windowHeight = systemInfo.windowHeight;
+      // 初始位置在屏幕外，隐藏状态
+      this.popupTop = this.windowHeight;
+    },
+
+    initPopupPosition() {
+      this.$nextTick(() => {
+        // 获取内容高度
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select('.draggable-popup-container')
+          .boundingClientRect((data) => {
+            if (data) {
+              this.containerHeight = data.height;
+              // 默认显示屏幕高度的60%
+              this.popupTop = this.windowHeight * this.heightCalc;
+              this.contentPopupTop = this.windowHeight - this.popupTop - 25;
+              this.changeTop();
+            }
+          })
+          .exec();
+      });
+    },
+
+    handleTouchStart(e) {
+      this.isMoving = true;
+      this.startY = e.touches[0].clientY;
+      this.startTop = this.popupTop;
+    },
+
+    handleTouchMove(e) {
+      if (!this.isMoving) return;
+
+      const moveY = e.touches[0].clientY - this.startY;
+      let newTop = this.startTop + moveY;
+
+      // 限制拖动范围，但允许拖出屏幕一定距离
+      const maxDragDistance = 100; // 最大可拖出屏幕的距离
+
+      if (newTop < -maxDragDistance) {
+        newTop = -maxDragDistance;
+      }
+
+      // 保留一部分在屏幕内，方便拖回
+      if (this.containerHeight > 0) {
+        const maxTop = this.windowHeight - 50; // 至少保留50px在屏幕内
+        if (newTop > maxTop) {
+          newTop = maxTop;
+        }
+      }
+      this.popupTop = newTop;
+      this.changeTop();
+      // 调用防抖函数而不是创建它
+      this.updateContentPopupTop();
+    },
+
+    handleTouchEnd(e) {
+      if (!this.isMoving) return;
+      this.isMoving = false;
+
+      // 修改：拖动结束后停留在当前位置，不自动展开或收起
+      // 只要确保popupTop在有效范围内即可
+
+      if (this.popupTop < 0) {
+        this.popupTop = 110;
+        this.contentPopupTop = this.windowHeight - this.popupTop - 25;
+      } else if (this.popupTop > this.windowHeight) {
+        this.popupTop = this.windowHeight - 60;
+        this.contentPopupTop = this.windowHeight - this.popupTop - 25;
+      } else if (this.popupTop < 110) {
+        this.popupTop = 110;
+        this.contentPopupTop = this.windowHeight - this.popupTop - 25;
+      }
+      this.changeTop();
+    },
+    changeTop() {
+      this.$emit('changeTop', this.popupTop);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/* .draggable-popup-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 98;
+} */
+
+.draggable-popup-container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ffffff;
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+  transition: top 0.1s ease; /* 减少过渡时间使拖动更流畅 */
+  z-index: 99;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.draggable-popup-handle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20rpx 0;
+  cursor: move;
+}
+
+.draggable-popup-handle-line {
+  width: 60rpx;
+  height: 8rpx;
+  border-radius: 4rpx;
+  background-color: rgba(23, 26, 29, 0.24);
+}
+
+.draggable-popup-content {
+  overflow: auto;
+  position: relative;
+  z-index: 100;
+}
+</style>

package/HwDraggableBottomPopup/index.ts

@@ -0,0 +1,10 @@
+// index.ts
+import type { App } from 'vue';
+import HwDraggableBottomPopup from './HwDraggableBottomPopup.vue';
+
+// 使用install方法，在app.use挂载
+HwDraggableBottomPopup.install = (app: App) => {
+  app.component(HwDraggableBottomPopup.__name as string, HwDraggableBottomPopup); //注册组件
+};
+
+export default HwDraggableBottomPopup;