hw-cus-ui 1.0.24 → 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/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;

package/HwFileUpload/HwFileUpload.vue

@@ -0,0 +1,412 @@
+<!--
+  文件上传组件
+  支持图片和文件上传、预览、下载和删除功能
+  可通过isImg属性控制是图片模式还是文件模式展示
+  支持多种文件类型上传限制
+-->
+<template>
+  <view
+    class="bn-select"
+    :style="{ marginTop: marginTop, borderBottom: border ? `1rpx solid rgba(17, 31, 44, 0.12);` : 'none' }"
+  >
+    <view class="select-item" v-if="label">
+      <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>
+      <uni-file-picker
+        v-if="types !== 'detail' && !isImg"
+        file-mediatype="all"
+        :file-extname="fileType.join(',')"
+        :auto-upload="false"
+        v-bind="$attrs"
+        :image-styles="{
+          height: 34,
+          width: 34,
+          border: {
+            width: '0'
+          }
+        }"
+        @select="handleSelect"
+      >
+        <template v-if="!isImg">
+          <image class="icon-add" src="@/static/image/add.png" />
+        </template>
+      </uni-file-picker>
+    </view>
+
+    <view class="col-img" v-if="isImg">
+      <view class="col-img-item" v-for="(item, index) in fileList" :key="index">
+        <image
+          class="col-img-item-img"
+          :src="isLink ? `${baseUrl}${item.url}` : item.url"
+          mode="aspectFill"
+          @click="handlePreview(item)"
+        />
+
+        <view class="col-img-item-del" @click="handleDelete(index)" v-if="types !== 'detail'">
+          <image class="col-img-item-del-img" src="@/static/image/del-img.png" />
+        </view>
+      </view>
+
+      <uni-file-picker
+        v-if="types !== 'detail'"
+        file-mediatype="all"
+        :file-extname="fileType.join(',')"
+        :auto-upload="false"
+        v-bind="$attrs"
+        @select="handleSelect"
+      >
+        <template v-if="isImg">
+          <image class="icon-add" src="@/static/image/add-img.png" />
+        </template>
+      </uni-file-picker>
+    </view>
+    <view class="col-file" v-if="!isImg">
+      <view class="col-file-item" v-for="(item, index) in fileList" :key="index">
+        <image class="col-file-item-img" src="@/static/image/file.png" />
+        <view class="name">
+          <view class="name-label">{{ item.name || item.originalName }}</view>
+          <view>
+            <text v-if="item.fileSize">{{ item.fileSize }}KB</text>
+            <text style="color: rgba(49, 126, 208, 1)" @click="handleDownload(item)">下载</text>
+          </view>
+        </view>
+        <view class="col-file-item-del" @click="handleDelete(index)" v-if="types !== 'detail'">
+          <image class="col-file-item-del-img" src="@/static/image/del.png" />
+        </view>
+      </view>
+    </view>
+    <view v-if="fileList.length === 0 && !isImg" class="no-more">
+      {{ types === 'detail' ? '暂无数据' : '请上传文件' }}
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+//@ts-ignore
+import FileSaver from 'file-saver';
+
+// 导入uni-app的类型定义
+declare const uni: any;
+
+/**
+ * 组件属性定义
+ * @property {any[]} fileType - 允许上传的文件类型列表，默认为 ['pdf', 'xlsx', 'docx', 'doc', 'zip', 'rar', 'exe']
+ * @property {any[]} modelValue - 绑定值，文件列表
+ * @property {boolean} isImg - 是否为图片模式，默认为 false
+ * @property {boolean} border - 是否显示下边框，默认为 true
+ * @property {string} marginTop - 上边距，默认为 '20px'
+ * @property {string} types - 组件类型，'add' 为添加模式，'detail' 为详情模式
+ * @property {boolean} required - 是否必填，默认为 false
+ * @property {string} label - 标签文本
+ */
+interface Props {
+  fileType?: any[];
+  modelValue?: any[];
+  isImg?: boolean;
+  border?: boolean;
+  marginTop?: string;
+  types: string;
+  required?: boolean;
+  isLink?: boolean;
+  baseUrl?: string;
+  apiUrl: string;
+  label: string;
+  headers?: any;
+}
+
+const props = defineProps<Props>();
+
+const {
+  label = '',
+  marginTop = '20px',
+  fileType = ['pdf', 'xlsx', 'docx', 'doc', 'zip', 'rar', 'exe'],
+  isImg = false,
+  isLink = false,
+  baseUrl = '',
+  apiUrl = '',
+  border = true,
+  types = 'add',
+  headers = {}
+} = props;
+
+const emit = defineEmits(['update:modelValue']);
+
+const fileList = ref<any[]>([]);
+
+/**
+ * 监听modelValue变化，同步更新fileList
+ * 当传入的值为字符串数组时，会自动转换为对象数组格式
+ */
+watch(
+  () => props.modelValue,
+  (val: any) => {
+    if (val && val.length) {
+      // 首先将值转为数组
+      let list: any[] = [];
+      if (Array.isArray(val)) {
+        list = val as any[];
+      }
+      // 然后将数组转为对象数组
+      fileList.value = list.map((item) => {
+        let itemData;
+        if (typeof item === 'string') {
+          itemData = { name: item, url: item };
+        } else {
+          itemData = { ...item };
+        }
+        return itemData;
+      });
+    } else {
+      fileList.value = [];
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+/**
+ * 删除指定索引的文件
+ * @param {number} index - 要删除的文件在列表中的索引
+ */
+const handleDelete = (index: number) => {
+  fileList.value.splice(index, 1);
+  emit('update:modelValue', [...fileList.value]);
+};
+
+/**
+ * 预览图片
+ * @param {Object} item - 文件对象，包含name和url属性
+ */
+const handlePreview = (item: { name: string; url: string }) => {
+  const urls = [isLink ? `${baseUrl}${item.url}` : item.url];
+  uni.previewImage({
+    urls
+  });
+};
+
+/**
+ * 下载文件
+ * @param {Object} file - 文件对象
+ */
+const handleDownload = (file: any) => {
+  convertUrlToBlob(file.url, file.name);
+};
+
+/**
+ * 将URL转换为Blob并下载
+ * @param {string} url - 文件URL地址
+ * @param {string} name - 文件名
+ */
+async function convertUrlToBlob(url: string, name: string) {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`HTTP错误: ${response.status}`);
+    }
+    const blob = await response.blob();
+    FileSaver.saveAs(blob, name);
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+/**
+ * 处理文件选择事件
+ * @param {Object} e - 选择文件事件对象
+ */
+const handleSelect = (e: any) => {
+  const filePath = e.tempFilePaths[0];
+  const tempFile = e.tempFiles[0];
+  if (!tempFile) {
+    return;
+  }
+  if (!fileType.includes(`${tempFile.extname}`)) {
+    uni.showToast({
+      title: '暂不支持当前文件类型',
+      icon: 'none'
+    });
+    emit('update:modelValue', [...fileList.value]);
+    return;
+  }
+  uni.showLoading({
+    title: '上传中...'
+  });
+
+  uni.uploadFile({
+    url: `${baseUrl}${apiUrl}`,
+    header: headers,
+    filePath,
+    name: 'file',
+    success: (uploadFileRes: any) => {
+      const res = JSON.parse(uploadFileRes.data);
+      uni.hideLoading();
+      if (res.code === 200) {
+        if (isLink) {
+          emit('update:modelValue', [...fileList.value, { ...res.data }]);
+        } else {
+          emit('update:modelValue', [...fileList.value, { ...res.data, name: res.data.originalName }]);
+        }
+      } else {
+        uni.showToast({
+          title: res.msg,
+          icon: 'none'
+        });
+      }
+    },
+    fail: () => {
+      uni.hideLoading();
+    }
+  });
+};
+</script>
+<style scoped lang="scss">
+.bn-select {
+  width: 100%;
+  border-bottom: 1rpx solid rgba(17, 31, 44, 0.12);
+  padding-bottom: 24rpx;
+  .no-more {
+    color: rgba(23, 26, 29, 0.6);
+    font-size: 34rpx;
+  }
+  .select-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .label {
+      font-size: 34rpx;
+      letter-spacing: 0px;
+      line-height: 44rpx;
+      height: 44rpx;
+      color: rgba(23, 26, 29, 1);
+    }
+    .icon-add {
+      width: 44rpx;
+      height: 44rpx;
+    }
+
+    ::v-deep .uni-file-picker {
+      width: auto;
+      flex: none;
+    }
+    ::v-deep .uni-file-picker__container > :not(:last-child) {
+      display: none !important;
+    }
+    ::v-deep .file-picker__box-content {
+      margin: 0;
+    }
+    ::v-deep .uni-file-picker__lists {
+      display: none;
+    }
+  }
+  .col-img {
+    margin-top: 24rpx;
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    grid-gap: 24rpx;
+    .col-img-item {
+      width: 100%;
+      height: 136rpx;
+      border-radius: 12rpx;
+      position: relative;
+      .col-img-item-img {
+        width: 100%;
+        height: 100%;
+        border-radius: 12rpx;
+      }
+      .col-img-item-del {
+        position: absolute;
+        right: 12rpx;
+        bottom: 12rpx;
+        width: 48rpx;
+        height: 48rpx;
+        .col-img-item-del-img {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .col-img-item-del-img-icon {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+    .icon-add {
+      width: 44rpx;
+      height: 44rpx;
+    }
+
+    ::v-deep .uni-file-picker {
+      width: auto;
+      flex: none;
+    }
+    ::v-deep .file-picker__box {
+      width: 100% !important;
+      height: 136rpx !important;
+      // border: 4rpx dashed rgba(0, 127, 255, 0.48) !important;
+      // border-radius: 12rpx !important;
+    }
+    ::v-deep .uni-file-picker__container {
+      margin: 0;
+    }
+    ::v-deep .uni-file-picker__container > :not(:last-child) {
+      display: none !important;
+    }
+    ::v-deep .file-picker__box-content {
+      margin: 0;
+      background: rgba(0, 127, 255, 0.12);
+      border: 4rpx dashed rgba(0, 127, 255, 0.48) !important;
+      border-radius: 12rpx !important;
+    }
+    ::v-deep .uni-file-picker__lists {
+      display: none;
+    }
+  }
+  .col-file {
+    margin-top: 24rpx;
+
+    .col-file-item {
+      width: 100%;
+      display: grid;
+      grid-template-columns: 96rpx auto 50rpx;
+      grid-gap: 24rpx;
+      margin-bottom: 20rpx;
+      align-items: center;
+      .col-file-item-img {
+        width: 100%;
+        height: 96rpx;
+      }
+      .name-label {
+        flex: 1;
+        font-size: 34rpx;
+        color: rgba(23, 26, 29, 1);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
+      }
+      .col-file-item-del {
+        width: 36rpx;
+        height: 36rpx;
+        .col-file-item-del-img {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .col-file-item-del-img-icon {
+            width: 36rpx;
+            height: 36rpx;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/HwFileUpload/index.ts

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