2025/2/8第一次更新

node_modules/@tuniao/tnui-vue3-uniapp/components/photo-album/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './use-photo-album'

node_modules/@tuniao/tnui-vue3-uniapp/components/photo-album/src/composables/use-photo-album.ts

@@ -0,0 +1,31 @@
+import { computed } from 'vue'
+import {} from '../../../../utils'
+
+import type { SetupContext } from 'vue'
+import type { PhotoAlbumEmit, PhotoAlbumProps } from '../photo-album'
+
+export const usePhotoAlbum = (
+  props: PhotoAlbumProps,
+  emits: SetupContext<PhotoAlbumEmit>['emit']
+) => {
+  // 相册图片数据
+  const imageData = computed<string[]>(() => {
+    const maxLength = Math.min(props.data.length, props.max)
+    return props.data.slice(0, maxLength)
+  })
+
+  // 图片点击事件
+  const imageClickEvent = (index: number) => {
+    emits('click', index)
+    if (!props.preview) return
+    uni.previewImage({
+      urls: imageData.value,
+      current: index,
+    })
+  }
+
+  return {
+    imageData,
+    imageClickEvent,
+  }
+}

node_modules/@tuniao/tnui-vue3-uniapp/components/photo-album/src/instance.ts

@@ -0,0 +1,3 @@
+import type PhotoAlbum from './photo-album.vue'
+
+export type TnPhotoAlbumInstance = InstanceType<typeof PhotoAlbum>

node_modules/@tuniao/tnui-vue3-uniapp/components/photo-album/src/photo-album.ts

@@ -0,0 +1,60 @@
+import { componentImgModes } from '../../../constants'
+import { buildProps, definePropType, isNumber } from '../../../utils'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const photoAlbumProps = buildProps({
+  /**
+   * @description 图片地址列表
+   */
+  data: {
+    type: definePropType<Array<string>>(Array),
+    default: () => [],
+  },
+  /**
+   * @description 最大允许显示图片的数量
+   */
+  max: {
+    type: Number,
+    default: 9,
+  },
+  /**
+   * @description 一行显示的图片数量
+   */
+  column: {
+    type: Number,
+    default: 3,
+  },
+  /**
+   * @description 图片模式
+   */
+  imgMode: {
+    type: String,
+    values: componentImgModes,
+    default: 'aspectFill',
+  },
+  /**
+   * @description 是否开启懒加载
+   */
+  lazyLoad: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @description 点击图片进行预览
+   */
+  preview: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+export const photoAlbumEmits = {
+  /**
+   * @description 点击图片时触发
+   */
+  click: (index: number) => isNumber(index),
+}
+
+export type PhotoAlbumProps = ExtractPropTypes<typeof photoAlbumProps>
+export type PhotoAlbumEmit = typeof photoAlbumEmits

node_modules/@tuniao/tnui-vue3-uniapp/components/photo-album/src/photo-album.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import TnLazyLoad from '../../lazy-load/src/lazy-load.vue'
+import { useNamespace } from '../../../hooks'
+import { photoAlbumEmits, photoAlbumProps } from './photo-album'
+import { usePhotoAlbum } from './composables'
+
+import type { CSSProperties } from 'vue'
+
+const props = defineProps(photoAlbumProps)
+const emits = defineEmits(photoAlbumEmits)
+
+const ns = useNamespace('photo-album')
+
+const { imageData, imageClickEvent } = usePhotoAlbum(props, emits)
+
+const containerStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {}
+
+  let width = `calc(100% / ${props.column} - 20rpx)`
+  // #ifdef MP-ALIPAY
+  width = `calc(100% / ${props.column} - 22rpx)`
+  // #endif
+
+  style.width = style.paddingBottom = width
+
+  return style
+})
+</script>
+
+<template>
+  <view :class="[ns.b()]">
+    <view
+      v-for="(item, index) in imageData"
+      :key="index"
+      :class="[ns.e('container')]"
+      :style="containerStyle"
+      @tap.stop="imageClickEvent(index)"
+    >
+      <view :class="ns.e('item')">
+        <TnLazyLoad v-if="lazyLoad" :src="item" :mode="props.imgMode" />
+        <image
+          v-else
+          :class="ns.e('item__image')"
+          :src="item"
+          :mode="props.imgMode"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../theme-chalk/src/photo-album.scss';
+</style>