file-list 样式 支持预览图片

wechatMp/components/Func/file-list/index.ts

@@ -1,4 +1,5 @@
 import { isMockId } from "oak-frontend-base/src/utils/mockId";
+import { composeFileUrl } from '../../../../src/utils/extraFile';
 
 Component({
     data: {
@@ -45,6 +46,11 @@ Component({
             type: Number,
             value: 3,
         },
+        // 图片是否可预览
+        disableDelete: {
+            type: Boolean,
+            value: false,
+        },
     },
 
     methods: {
@@ -150,16 +156,26 @@ Component({
                 )
             );
         },
-        onItemTapped(event: WechatMiniprogram.Touch) {
+        async onItemTapped(event: WechatMiniprogram.Touch) {
+            const { oakValue } = this.data;
             const { index } = event.currentTarget.dataset;
-            if (this.data.selected === index) {
-                this.setData({
-                    selected: -1,
-                });
-            } else {
-                this.setData({
-                    selected: index,
+            const imageUrl = composeFileUrl(oakValue[index]);
+            const urls = oakValue?.map((ele) => composeFileUrl(ele));
+
+            const detail = {
+                all: oakValue,
+                index,
+                urls: urls,
+                current: imageUrl,
+            };
+            this.triggerEvent('tap', detail);
+            // 预览图片
+            if (this.data.preview) {
+                const rrr = await wx.previewImage({
+                    urls: urls,
+                    current: imageUrl,
                 });
+                this.triggerEvent('preview', detail);
             }
         },
         async onDelete(event: WechatMiniprogram.Touch) {
@@ -208,10 +224,11 @@ Component({
                 this,
                 '.file-list__container'
             );
-            const widthRpx = this.px2rpx((res.right - res.left));
+            const widthRpx = this.px2rpx(res.right - res.left);
 
             // 根据容器宽度计算单张图片宽度百分比
-            const itemSizePercentage = (10 / size) * 10 - (20 / widthRpx) * 100 + '%;';
+            const itemSizePercentage =
+                (10 / size) * 10 - (20 / widthRpx) * 100 + '%;';
             this.setData({ itemSizePercentage: itemSizePercentage });
         },
     },

wechatMp/components/Func/file-list/index.wxml

@@ -2,18 +2,12 @@
     <block wx:for="{{oakValue}}" wx:key="index">
        <view
           class="file-list__item  file-list__item--{{size}} l-item-class"
-          bind:tap="onItemTapped"
-          data-index="{{index}}"
           style="{{itemSizePercentage?'width:'+itemSizePercentage+'padding-bottom:'+itemSizePercentage:'xxx'}}"
         >
-        <item mode="{{mode}}" oakValue="{{item}}" oakPath="{{index}}" oakParent="{{oakFullpath}}" />
-          <!-- <view mut-bind:tap="onDelete" class="file-list__remove" data-value="{{item}}" data-index="{{ index }}">
-              <g-icon name="delete" color="#ffffff" size="24" />
-          </view> -->
-        <view wx:if="{{selected === index}}" class="file-list__item--selected">
-            <g-icon name="aspect_ratio" color="#ffffff" />
-            <g-icon name="delete"  color="#ffffff" catchtap="onDelete" data-value="{{item}}" data-index="{{index}}" />
-        </view>
+        <item data-index="{{index}}" bind:tap="onItemTapped" mode="{{mode}}" oakValue="{{item}}" oakPath="{{index}}" oakParent="{{oakFullpath}}" />
+          <view wx:if="{{!disableDelete}}" mut-bind:tap="onDelete" class="file-list__remove" data-value="{{item}}" data-index="{{ index }}">
+              <g-icon name="clear" color="#ffffff" size="24" />
+          </view>
     </view>
     </block>