p-pc-ui 1.2.2 → 1.2.5

package/components/p-page/components/back-button.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { dataUtils } from '../../../utils';
+import { ref, defineProps, defineEmits } from 'vue';
+const props = defineProps({
+  showBack: {
+    type: Boolean,
+    default: false,
+  },
+  showHome: {
+    type: Boolean,
+    default: false,
+  },
+  backDelta: {
+    type: Number,
+    default: 1,
+  },
+  color: {
+    type: String,
+    default: '#606266',
+  },
+});
+
+const goBack = () => {
+  dataUtils.backTo(props.backDelta);
+};
+
+const goHome = () => {
+  dataUtils.dirTo('/pages/start/start');
+};
+</script>
+
+<template>
+  <view v-if="showBack || showHome"
+    style="margin-left: 20rpx; display: flex; align-items: center; justify-content: space-between">
+    <u-icon v-if="showBack" @click="goBack" name="arrow-left" size="20" :color="color"></u-icon>
+    <u-icon v-if="showHome" @click="goHome" name="home" size="25" :color="color"></u-icon>
+  </view>
+</template>
+
+<style scoped lang="scss"></style>

package/components/p-page/p-page.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import {
+  ref,
+  defineProps,
+  defineEmits,
+  useSlots,
+  reactive,
+  onBeforeMount,
+} from 'vue';
+import BackButton from './components/back-button.vue';
+import PPageLoading from '../p-page-loading/p-page-loading.vue';
+
+const emits = defineEmits(['refresh', 'lodeMore', 'pageRenderOk', 'authClose']);
+const uSlots = useSlots();
+
+interface Props {
+  title?: string;
+  pageLoading?: boolean;
+  hasHeader?: boolean;
+  hasScrollBody?: boolean;
+  pageBackgroundColor?: string;
+  headerBackgroundColor?: string;
+  bodyBackgroundColor?: string;
+  footerBackgroundColor?: string;
+  titleColor?: string;
+  titleWeight?: number;
+  showBack?: boolean;
+  showHome?: boolean;
+  backDelta?: number;
+  checkSafeBottom?: boolean;
+  isTabBarPage?: boolean;
+  refresh?: Function;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  pageLoading: false,
+  hasHeader: true,
+  hasScrollBody: true,
+  pageBackgroundColor: '#ffffff',
+  headerBackgroundColor: 'rgba(0,0,0,0)',
+  bodyBackgroundColor: 'rgba(0,0,0,0)',
+  footerBackgroundColor: 'rgba(0,0,0,0)',
+  titleColor: '#272727',
+  titleWeight: 500,
+  showBack: true,
+  showHome: true,
+  backDelta: 1,
+  checkSafeBottom: true,
+  isTabBarPage: false,
+});
+
+const pageHeight = ref('100%');
+const headerHeight = ref(44);
+const statusBarHeight = ref(44);
+
+const triggered = ref(false);
+
+// 页面堆栈数, 如果只有一页的话 需要自动展示home按钮
+
+const pageShowHome = ref(false);
+const pageShowBack = ref(false);
+
+// 是否需要底部安全距离
+const footer_safe_distance = ref(props.isTabBarPage ? 0 : 20);
+
+onBeforeMount(() => {
+  init();
+});
+
+const init = () => {
+  // 计算状态栏高度
+  const systemInfo: any = uni.getSystemInfoSync();
+  // #ifdef H5
+  statusBarHeight.value = 44
+  // #endif
+
+  // #ifndef H5
+  statusBarHeight.value = systemInfo.statusBarHeight;
+  // #endif
+
+  headerHeight.value += statusBarHeight.value;
+  pageHeight.value = systemInfo.windowHeight + 'px';
+
+  // 初始化返回状态
+  const pages = getCurrentPages();
+  if (props.isTabBarPage == true) {
+    pageShowHome.value = false;
+    pageShowBack.value = false;
+  } else if (pages.length == 1) {
+    pageShowHome.value = true;
+    pageShowBack.value = false;
+  } else {
+    pageShowHome.value = props.showHome;
+    pageShowBack.value = props.showBack;
+  }
+};
+
+</script>
+
+<template>
+  <view class="page" :style="{
+    height: isTabBarPage ? '100%' : pageHeight,
+    background: pageBackgroundColor,
+  }">
+    <!--头部-->
+    <view v-if="hasHeader" class="header" :style="{
+      height: headerHeight + 'px',
+      background: headerBackgroundColor,
+    }">
+      <view class="status-bar" :style="{
+        height: statusBarHeight + 'px',
+      }">
+      </view>
+      <view class="header-slot">
+        <view v-if="uSlots.header">
+          <view style="display: flex; align-items: center">
+            <back-button :color="titleColor" :show-back="pageShowBack" :show-home="pageShowHome" />
+            <slot name="header" />
+          </view>
+        </view>
+
+        <view v-else>
+          {{ title }}
+        </view>
+      </view>
+    </view>
+
+    <!--内容-->
+    <scroll-view :style="{
+      background: bodyBackgroundColor,
+    }" class="body-scroll" :enhanced="false" :bounces="false" :scroll-y="true"
+      :refresher-enabled="refresh != null ? true : false" :refresher-triggered="triggered" :refresher-threshold="100"
+      :refresher-background="bodyBackgroundColor">
+      <view class="body-slot">
+        <!--页面主体内容是否可以滚动-->
+        <view class="back-button" v-if="!hasHeader">
+          <back-button :color="titleColor" :show-back="pageShowBack" :show-home="pageShowHome" />
+        </view>
+
+        <slot name="body" />
+      </view>
+    </scroll-view>
+
+    <!--底部-->
+    <view class="footer" v-if="uSlots.footer" :style="{
+      background: footerBackgroundColor,
+    }">
+      <slot name="footer"></slot>
+      <view :style="{ height: footer_safe_distance + 'rpx' }" />
+    </view>
+
+    <p-page-loading :visible="pageLoading"> </p-page-loading>
+
+    <view class="pendant" v-if="uSlots.pendant">
+      <slot name="pendant"> </slot>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.page {
+  width: 750rpx;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .header {
+    width: 750rpx;
+    // border: 1px solid black;
+
+    .header-slot {
+      height: 44px;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .back-button {
+    position: fixed;
+    top: 100rpx;
+    z-index: 10;
+  }
+
+  .body-scroll {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+
+    .body-slot {
+      height: 100%;
+      position: relative;
+    }
+  }
+
+  .footer {
+    width: 750rpx;
+  }
+
+  .popup {
+    height: 0;
+  }
+
+  .pendant {
+    position: fixed;
+    height: 80rpx;
+    width: 80rpx;
+    z-index: 9999;
+  }
+}
+</style>

package/components/p-page-loading/p-page-loading.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, useSlots } from 'vue';
+const uSlots = useSlots();
+
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
+</script>
+
+<template>
+  <view v-if="visible" class="p-page-loading">
+    <slot name="custom" v-if="uSlots.custom"></slot>
+    <view v-else class="login-card">加载中</view>
+  </view>
+</template>
+
+<style lang="scss">
+.p-page-loading {
+  inset: 0;
+  position: absolute;
+  background-color: #fff;
+  z-index: 9999999999;
+}
+</style>

package/components/p-preview-image/p-preview-image-register.ts

@@ -0,0 +1,30 @@
+import { ref } from "vue";
+
+const visible = ref(false);
+let resolver: ((value: any) => void) | null = null;
+const urls = ref<string[]>([])
+const current = ref(0)
+
+const open = async (pics: string[], currentIndex: number) => {
+    urls.value = pics
+    current.value = currentIndex
+    visible.value = true;
+    return new Promise((resolve) => {
+        resolver = resolve;
+    });
+};
+
+// 取消
+const cancel = () => {
+    visible.value = false;
+    resolver && resolver(false);
+    resolver = null;
+};
+
+export const RegisterPPreviewImage = {
+    urls,
+    current,
+    visible,
+    open,
+    cancel
+}

package/components/p-preview-image/p-preview-image.vue

@@ -0,0 +1,126 @@
+<template>
+    <view class="previewImage" v-if="visible" @click="close">
+        <view class="page" v-if="urls.length > 0">
+            <text class="text">{{ current + 1 }} / {{ urls.length }}</text>
+        </view>
+        <swiper class="swiper" :current="current" @change="swiperChange" @touchstart="handleTouchStart"
+            @touchend="handleTouchEnd">
+            <swiper-item v-for="(item, index) in urls" :key="index">
+                <movable-area class="movable-area" scale-area>
+                    <movable-view class="movable-view" direction="all" :inertia="true" damping="100" scale="true"
+                        scale-min="1" scale-max="4" :scale-value="scale">
+                        <scroll-view scroll-y="true" class="uni-scroll-view">
+                            <view class="scroll-view">
+                                <image :key="index" class="image" :src="item" mode="widthFix"
+                                    @longpress="onLongpress(item)" />
+                            </view>
+                        </scroll-view>
+                    </movable-view>
+                </movable-area>
+            </swiper-item>
+        </swiper>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref,withDefaults } from "vue";
+
+const props = withDefaults(defineProps<{
+    urls:string[],
+    current:number,
+    visible:boolean
+}>(),{
+    visible:false,
+    current:0
+})
+
+
+const emits = defineEmits(['update:visible','update:current'])
+
+
+const scale = ref(1)
+const isZooming = ref(false)
+
+
+
+const close = () => {
+    emits('update:visible',false)
+}
+
+
+//图片改变
+const swiperChange = (e) => {
+    emits('update:current',e.detail.current)
+}
+
+const handleTouchStart = () => {
+    isZooming.value = true;
+}
+const handleTouchEnd = () => {
+    isZooming.value = false;
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+.previewImage {
+    z-index: 9999;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000000;
+
+    .swiper {
+        width: 100%;
+        height: 100vh;
+
+        swiper-item {
+            .movable-area {
+                height: 100%;
+                width: 100%;
+
+                .movable-view {
+                    width: 100%;
+                    min-height: 100%;
+
+                    .uni-scroll-view {
+                        height: 100vh;
+                    }
+
+                    .scroll-view {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        min-height: 100vh;
+
+                        .image {
+                            width: 100%;
+                            height: auto;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .page {
+        position: absolute;
+        z-index: 9999;
+        width: 100%;
+        top: 60rpx;
+        text-align: center;
+
+        .text {
+            color: #fff;
+            font-size: 32rpx;
+            background-color: rgba(0, 0, 0, 0.5);
+            padding: 3rpx 16rpx;
+            border-radius: 20rpx;
+            user-select: none;
+        }
+    }
+}
+</style>

package/index.ts

@@ -0,0 +1,4 @@
+import { RegisterPPreviewImage } from "./components/p-preview-image/p-preview-image-register"
+
+export { RegisterPPreviewImage }
+

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "p-pc-ui",
-  "version": "1.2.2",
+  "version": "1.2.5",
   "type": "module",
-  "module": "dist/index.ts",
-  "main": "dist/index.ts",
+  "module": "index.ts",
+  "main": "index.ts",
   "files": [
-    "dist"
+    "components",
+    "utils",
+    "index.ts"
   ],
   "peerDependencies": {
     "vue": "^3.0.0"
@@ -18,17 +20,10 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@ant-design/icons-vue": "^7.0.1",
-    "ant-design-vue": "4.2.6",
-    "dayjs": "^1.11.13",
-    "v-viewer": "^3.0.21",
-    "vue": "3.5.13",
-    "@wangeditor/editor": "^5.1.23",
-    "@wangeditor/editor-for-vue": "next"
+    "vue": "3.5.13"
   },
   "devDependencies": {
-    "typescript": "5.8.3"
-  },
-  "_from": "p-pc-ui@1.1.7",
-  "_resolved": "https://registry.npmmirror.com/p-pc-ui/-/p-pc-ui-1.1.7.tgz"
-}
+    "typescript": "5.8.3",
+    "@dcloudio/types": "^3.4.8"
+  }
+}

package/{dist/utils → utils}/dataUtils.ts

@@ -94,9 +94,9 @@ export const set = (obj: object, path: string | string[], value: any) => {
 }
 
 
-export const formatTime = (input:any) => {
+export const formatTime = (input: any) => {
   const date = new Date(input)
-  const pad = (n:any) => n.toString().padStart(2, '0')
+  const pad = (n: any) => n.toString().padStart(2, '0')
   return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ` +
     `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
 }
@@ -108,11 +108,47 @@ export const formatTime = (input:any) => {
 export const pickBy = (object, predicate) => {
   const result = {}
   for (const key in object) {
-      if (Object.prototype.hasOwnProperty.call(object, key)) {
-          if (predicate(object[key], key)) {
-              result[key] = object[key]
-          }
+    if (Object.prototype.hasOwnProperty.call(object, key)) {
+      if (predicate(object[key], key)) {
+        result[key] = object[key]
       }
+    }
   }
   return result
-}
+}
+
+
+
+const paramsToString = (params) => {
+  let query: string[] = []
+  for (const key in params) {
+    query.push(`${key}=${params[key]}`)
+  }
+
+  let url = ''
+
+  if (query.length > 0) {
+    url += `?${query.join('&')}`
+  }
+
+  return url
+}
+
+
+export const navTo = (url, params = {}) => {
+  uni.navigateTo({ url: url + paramsToString(params) })
+}
+
+
+export const dirTo = (url, params = {}) => {
+  uni.redirectTo({ url: url + paramsToString(params) })
+}
+
+export const switchTo = (url) => {
+  uni.switchTab({ url })
+}
+
+export const backTo = (delta = 1) => {
+  uni.navigateBack({ delta })
+}
+

package/utils/index.ts

@@ -0,0 +1,3 @@
+import * as dataUtils from './dataUtils'
+
+export {dataUtils}

package/dist/components/p-form/index.d.ts

@@ -1,118 +0,0 @@
-type FieldRule = { msg?: string, required?: boolean, min?: number, max?: number, decimal?: number }
-
-interface Base {
-    key: string,
-    label: string,
-    default?: any,
-    placeholder?: string,
-    fieldType?: 'string' | 'number' | 'array' | 'date',
-    fieldRules?: FieldRule[];
-    visibleHook?: Function,
-    tooltip?: string,
-    hideLabel?: boolean
-    colon?: boolean,
-    labelSpan?: number,
-    valueSpan?: number,
-    labelAlign?: 'left' | 'right'
-}
-
-
-export interface Input extends Base {
-    type: 'input',
-    prefix?: any,
-    suffix?: any
-}
-
-export interface InputNumber extends Base {
-    type: 'number',
-    prefix?: any,
-    suffix?: any
-}
-
-export interface InputPassword extends Base {
-    type: 'password',
-    prefix?: any,
-}
-
-export interface InputCode extends Base {
-    type: 'code',
-    interval: number,
-    codeName: string,
-    sendNoticeFunc: Function
-    activityFunc?: Function
-    prefix?: any,
-    suffix?: any,
-    sendStatus?: 'waitSend' | 'sending' | 'end',
-}
-
-
-
-type LoadOptionsData = () => Promise<{ label: string, value: any }[]>
-
-
-interface SelectBase extends Base {
-    type: 'select' | 'treeSelect' | 'radio',
-    fieldNames?: {
-        label?: string;
-        value?: string;
-    };
-    isMultiple?: boolean
-}
-
-type GetOptionList =
-    | { optionList: any[]; mapPath?: never; loadDataFunc?: LoadOptionsData }
-    | { optionList?: any[]; mapPath: string[], loadDataFunc?: LoadOptionsData }
-    | { optionList?: any[]; mapPath?: string[], loadDataFunc: LoadOptionsData }
-
-export type Select = SelectBase & GetOptionList;
-
-
-interface UploadBase extends Base {
-    uploadType: 'pic' | 'file',
-    maxCount?: number,
-}
-
-export interface UploadOss extends UploadBase {
-    type: 'uploadOss',
-    getOssToken: ({file_name}) => Promise<any>,
-    baseOssUrl: string,
-}
-
-
-export interface Upload extends UploadBase {
-    type: 'upload',
-}
-
-export interface Textarea extends Base {
-    type: 'textarea',
-}
-
-export interface DatePicker extends Base {
-    type: 'datePicker',
-}
-
-
-export interface Component extends Base {
-    type: 'component',
-    component: any
-}
-
-export interface Editor extends Base {
-    type: 'editor',
-    getOssToken: ({ file_name: string }) => Promise<any>,
-    baseOssUrl?: string,
-}
-
-
-export type FormDataItem =
-    | Input
-    | InputNumber
-    | InputPassword
-    | InputCode
-    | Select
-    | Upload
-    | UploadOss
-    | Textarea
-    | DatePicker
-    | Component
-    | Editor