装备资源库

packageA/resourceLibrary/detail.vue

@@ -0,0 +1,334 @@
+<template>
+    <view>
+        <block v-if="detail.typestr == '图片' && painter.imageUrl" style="">
+            <l-painter ref="painter" isCanvasToTempFilePath hidden :css="painter.css" @success="imageSuccess">
+                <!-- 背景图片 -->
+                <l-painter-image :src="painter.imageUrl" :css="painter.css" />
+                <!-- 二维码 -->
+                <l-painter-qrcode v-if="detail.qrcodecontent" :text="detail.qrcodecontent"
+                    css="width: 84px; height: 84px;position: absolute;bottom: 24px;right:24px;z-index: 2;background:#fff;" />
+            </l-painter>
+        </block>
+
+        <view class="orientation" />
+        <view class="head" v-if="detail.candownload_c">
+            <view class="sendmail" hover-class="navigator-hover" @click="showUModal = true">
+                <text class="iconfont icon-fayouxiang" />
+                发送文件到邮箱
+            </view>
+            <view class="download" hover-class="navigator-hover" @click="download">
+                <text class="iconfont icon-xiazai" />
+                下载
+            </view>
+        </view>
+        <swiper class="swiper" :current="current" :style="{ height: tovw(height) }" @change="swiperChange">
+            <swiper-item class="swipeout-item" v-for="( item, index ) in  detail.attinfos_pic " :key="item.attachmentid">
+                <image v-if="detail.typestr == '图片'" class="image" :style="{ height: tovw(height - 47) }" :src="item.cover"
+                    mode="aspectFit" lazy-load="true" />
+                <video :id="'myVideo' + index" v-else-if="detail.typestr == '视频'" class="image"
+                    :style="{ height: tovw(height - 47) }" :src="item.url" :poster="item.cover" />
+                <view class="paging">
+                    {{ index + 1 + '/' + detail.attinfos_pic.length }}
+                </view>
+            </swiper-item>
+        </swiper>
+        <view class="bottom">
+            {{ detail.title }}
+        </view>
+        <u-modal :show="showUModal" confirmColor='#C30D23' ref="uModal" showCancelButton :asyncClose="true"
+            @confirm="onSend" @cancel="showUModal = false">
+            <view class="slot-content">
+                <view class="slot-title">
+                    发送邮件
+                </view>
+                <view class="slot-tips">
+                    文件将以邮件的形式发送到指定邮箱
+                </view>
+                <u--input :focus="showUModal" placeholder="请输入邮箱" v-model="eMail" border="bottom" clearable />
+            </view>
+        </u-modal>
+
+    </view>
+</template>
+
+<script>
+import lPainter from "../../uni_modules/lime-painter/components/l-painter/l-painter.vue"
+import lPainterImage from "../../uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue"
+import lPainterQrcode from "../../uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue"
+import { viewMedias, wxSaveFile } from "../../utils/settleFiles";
+export default {
+    components: { lPainter, lPainterImage, lPainterQrcode },
+    data() {
+        return {
+            current: 0,
+            sat_sharematerialid: 0,
+            detail: { attinfos_pic: [], typestr: '' },
+            height: 0,
+            showUModal: false,
+            eMail: "",
+            painter: { imageUrl: "" }
+        }
+    },
+    onLoad(options) {
+        this.sat_sharematerialid = options.id;
+        this.getDetail();
+    },
+    methods: {
+        getDetail() {
+            this.$Http.basic({
+                "id": 20240407094602,
+                "content": {
+                    "sat_sharematerialid": this.sat_sharematerialid
+                }
+            }).then(res => {
+                console.log("装备资源库详情", res)
+                if (this.cutoff(res.msg)) return;
+
+                res.data.attinfos_pic = res.data.attinfos_pic.map(v => {
+                    if (res.data.typestr == '视频') {
+                        v.cover = this.getSpecifiedImage(v.attinfos[0], "cover")
+                        v.url = this.getSpecifiedImage(v.attinfos[0], "hls")
+                    } else {
+                        v.cover = this.getSpecifiedImage(v.attinfos[0])
+                    }
+                    return v
+                })
+                this.detail = res.data;
+                this.setHeight();
+                uni.setNavigationBarTitle({
+                    title: res.data.title
+                })
+            })
+        },
+        onSend() {
+            let { CheckEmail } = require("../../utils/basicInspection");
+            if (!CheckEmail(this.eMail || '')) return this.$refs.uModal.loading = false;
+            this.$Http.basic({
+                "id": "20240408154702",
+                "content": {
+                    "sat_sharematerialid": this.detail.sat_sharematerialid,
+                    "email": this.eMail
+                }
+            }).then(res => {
+                console.log("发送邮件", res)
+                if (this.cutoff(res.msg, '发送成功')) return this.$refs.uModal.loading = false;
+                this.showUModal = false;
+            })
+        },
+        /* 设置组件高度 */
+        setHeight() {
+            this.getHeight(".orientation", this).then(res => {
+                let info = uni.getSystemInfoSync(),
+                    safeAreaBottom = info.screenHeight - info.safeArea.bottom;
+                if (this.detail.candownload_c == 1) safeAreaBottom += 40;
+                this.height = res - safeAreaBottom - 40
+            });
+        },
+        swiperChange(e) {
+            uni.createVideoContext('myVideo' + this.current).pause()
+            this.current = e.detail.current;
+        },
+        download() {
+            let that = this,
+                file = that.detail.attinfos_pic[that.current].attinfos[0];
+            uni.showModal({
+                title: '提示',
+                content: `是否确定将当前${this.detail.typestr}保存到相册`,
+                success: ({ confirm }) => {
+                    if (confirm) {
+                        if (that.detail.typestr == '视频') {
+                            wxSaveFile(file)
+                        } else {
+                            uni.getImageInfo({
+                                src: file.url,
+                                success: res => {
+                                    console.log("getImageInfo", res)
+                                    let upperLimit = 4080;
+                                    if (uni.getSystemInfoSync().platform == 'ios') upperLimit = 1360;
+                                    let arr = [res.width, res.height];
+                                    let maxNum = Math.max(...arr);
+                                    if (maxNum > upperLimit) {
+                                        let MP = (maxNum / upperLimit).toFixed(2);
+                                        console.log("缩小倍率", MP)
+                                        res.width = res.width / MP;
+                                        res.height = res.height / MP;
+                                    }
+                                    that.painter = {
+                                        imageUrl: file.url,
+                                        css: `position: relative;width: ${res.width}px; height: ${res.height}px;object-fit:cover;`
+                                    }
+                                    console.log("that.painter", that.painter)
+                                }
+                            })
+                        }
+                    }
+                },
+            })
+        },
+        imageSuccess() {
+            let that = this;
+            that.$refs.painter.canvasToTempFilePathSync({
+                fileType: "jpg",
+                // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
+                pathType: 'url',
+                quality: 1,
+                success: (res) => {
+                    console.log(res.tempFilePath);
+                    // 非H5 保存到相册
+                    // H5 提示用户长按图另存
+                    uni.saveImageToPhotosAlbum({
+                        filePath: res.tempFilePath,
+                        success: function (e) {
+                            uni.showModal({
+                                title: '提示',
+                                content: '图片已保存到系统相册',
+                                showCancel: false
+                            })
+                            that.loading = false;
+                            this.$Http.basic({
+                                "id": 20240319142702,
+                                "content": {
+                                    sat_sharematerialid: that.detail.sat_sharematerialid, type: 1
+                                }
+                            }).then(res => {
+                                console.log(type, '记录', res)
+                            })
+
+                        },
+                        fail: ({ errMsg }) => {
+                            if (errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
+                                uni.showModal({
+                                    title: '提示',
+                                    content: '请授权添加到相册权限后再试！',
+                                    showCancel: false,
+                                    complete: (complete) => {
+                                        uni.openSetting({
+                                            success: res => {
+                                                that.loading = false;
+                                                if (res.authSetting['scope.writePhotosAlbum']) {
+                                                    this.saveTheImage()
+                                                } else {
+                                                    uni.showModal({
+                                                        title: '提示',
+                                                        content: '未获取授权！已取消保存',
+                                                        showCancel: false,
+                                                    })
+                                                }
+                                            }
+                                        })
+                                    },
+                                })
+                            } else {
+                                that.loading = false;
+                                uni.showModal({
+                                    title: '提示',
+                                    content: '已取消保存',
+                                    showCancel: false,
+                                })
+                            }
+                        },
+                    });
+                },
+            });
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.head {
+    display: flex;
+    justify-content: space-between;
+    background: #333333;
+    width: 100vw;
+    height: 40px;
+
+    .sendmail {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 160px;
+        height: 40px;
+        background: #C30D23;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 14px;
+        color: #FFFFFF;
+
+        .iconfont {
+            margin-right: 5px;
+        }
+    }
+
+    .download {
+        font-size: 12px;
+        color: #FFFFFF;
+        line-height: 40px;
+        padding-right: 10px;
+
+        .iconfont {
+            margin-right: 5px;
+        }
+    }
+}
+
+.swiper {
+    width: 100vw;
+    background: #333333;
+
+    .swipeout-item {
+        width: 100%;
+        height: 100%;
+
+        .image {
+            width: 100%;
+        }
+
+        .paging {
+            width: 100vw;
+            text-align: center;
+            line-height: 17px;
+            font-family: Source Han Sans SC, Source Han Sans SC;
+            font-size: 12px;
+            color: #FFFFFF;
+            margin-top: 10px;
+        }
+    }
+
+
+}
+
+.slot-content {
+    width: 100%;
+    text-align: center;
+
+    .slot-title {
+        height: 26px;
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: bold;
+        font-size: 18px;
+        color: #000000;
+    }
+
+    .slot-tips {
+        line-height: 20px;
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-size: 14px;
+        color: #666666;
+        margin-bottom: 30px;
+        margin-top: 10px;
+    }
+}
+
+.bottom {
+    min-height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
+    padding: 0 10px;
+    box-sizing: border-box;
+    font-size: 14px;
+    color: #333333;
+}
+</style>

packageA/resourceLibrary/index.vue

@@ -0,0 +1,262 @@
+<template>
+    <view>
+        <view class="head" catchtouchmove="true" @touchmove.stop.prevent="() => { }">
+            <My_search :value="content.where.condition" @onSearch="onSearch">
+                <view class="filtrate" v-if="filtrateList.length" hover-class="navigator-hover" @click="openFiltrate">
+                    筛选
+                    <text class="iconfont icon-shaixuan" />
+                </view>
+            </My_search>
+            <view class="crumbs">
+                <view class="crumb" v-for="item in crumbs" :key="item.classname">{{ item.classname }}</view>
+            </view>
+        </view>
+        <view style="height: 1px;" />
+        <filtrate ref="Filtrate" :filtrateList="filtrateList" @onFiltration="onFiltration" @onInterrupt="onInterrupt" />
+        <view style="height: 9px;" />
+        <My_listbox ref="List" @getlist="getList" boxBackground="#fff">
+            <view class="waterfalls">
+                <custom-waterfalls-flow ref="waterfallsFlowRef" :value="list" :column="2" :columnSpace="1.5" :seat="2"
+                    @wapperClick="wapperClick" @imageClick="wapperClick">
+                    <!-- #ifdef MP-WEIXIN -->
+                    <view class="waterfalls-item" v-for="(item, index) in list" :key="index" slot="slot{{index}}">
+                        <view class="waterfalls-item-title u-line-2">{{ item.title }}</view>
+                    </view>
+                    <!-- #endif -->
+                    <!-- #ifndef MP-WEIXIN -->
+                    <template v-slot:default="item">
+                        <view class="waterfalls-item">
+                            <view class="waterfalls-item-title u-line-2">{{ item.title }}</view>
+                        </view>
+                    </template>
+                    <!-- #endif -->
+                </custom-waterfalls-flow>
+            </view>
+        </My_listbox>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            crumbs: [],
+            list: [],
+            "content": {
+                "isDataAuth": true,//小程序默认传true
+                pageSize: 3,
+                "where": {
+                    "condition": "",
+                    "status": "",
+                    "type": "",//1:图片，2：视频，3：图文
+                    "sat_sharematerial_classids": [[]],
+                    "begindate_create": "",//创建时间
+                    "enddate_create": "",//创建时间
+                    "begindate": "",//发布时间
+                    "enddate": ""//发布时间
+                }
+            },
+            filtrateList: []
+        }
+    },
+    onLoad(options) {
+        this.crumbs = [{
+            classname: options.name,
+            parentid: options.id
+        }, {
+            classname: "全部",
+            parentid: ''
+        }]
+        this.getType()
+        this.getList(true)
+        uni.setNavigationBarTitle({
+            title: '装备资源库',
+        })
+    },
+    onShow() {
+        this.updateList()
+    },
+    methods: {
+        getType() {
+            this.$Http.basic({
+                "id": "20221102143202",
+                content: {
+                    pageSize: 9999,
+                    parentid: this.crumbs[0].parentid,
+                    "where": {
+                        "isenable": 1
+                    }
+                }
+            }).then(res => {
+                console.log("获取分类列表", res)
+                if (this.cutoff(res.msg)) return;
+                this.filtrateList = [{
+                    title: "分类",
+                    key: '一级分类',//提交时返回的Key
+                    showKey: "classname",//显示的key
+                    selected: "sat_sharematerial_classid",//选择时选择的字段
+                    value: "",//提交时选中的value
+                    defaultVal: "",//返回的默认值
+                    isAll: true,
+                    interrupt: true,
+                    rang: [{ classname: "全部", sat_sharematerial_classid: "", children: [] }].concat(res.data),//选择的范围
+                }]
+            })
+        },
+        getList(init = false) {
+            if (this.paging(this.content, init)) return;
+            let ids = this.crumbs.map(v => v.parentid).filter(v => v);
+            this.content.where.sat_sharematerial_classids = ids.length ? [[ids[ids.length - 1]]] : []
+            this.$Http.basic({
+                "id": 20240407094702,
+                content: this.content
+            }).then(res => {
+                this.$refs.List.RefreshToComplete()
+                console.log("获取装备资源库列表", res)
+                if (this.cutoff(res.msg)) return;
+                res.data = res.data.map(v => {
+                    v.image = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => s.usetype == "avatar") || v.attinfos[0]) : ''
+                    return v
+                })
+                this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
+                if (init) this.$refs.waterfallsFlowRef.refresh()
+                this.content = this.$refs.List.paging(this.content, res)
+            })
+        },
+        updateList() {
+            if (this.content.pageNumber && this.content.pageNumber >= 2) {
+                let content = this.paging(this.content, true, true)
+                this.$Http.basic({
+                    "id": "20240407094702",
+                    content
+                }).then(res => {
+                    console.log("更新装备资源库列表", res)
+                    if (this.cutoff(res.msg)) return;
+                    this.list = res.data;
+                })
+            }
+        },
+        wapperClick(e) {
+            uni.navigateTo({ url: '/packageA/resourceLibrary/detail?id=' + e.sat_sharematerialid })
+        },
+        openFiltrate() {
+            this.$refs.Filtrate.changeShow();
+        },
+        onSearch(condition) {
+            this.content.where.condition = condition;
+            this.getList(true)
+        },
+        onInterrupt({ item, index, option }) {
+            let filtrateList = this.$refs.Filtrate.list;
+            const i = filtrateList.findIndex(v => v.title == '下级分类');
+            if (option.children.length) {
+                const obj = {
+                    title: "下级分类",
+                    key: '二级分类',
+                    showKey: "classname",
+                    selected: "sat_sharematerial_classid",
+                    value: "",
+                    defaultVal: "",
+                    isAll: true,
+                    rang: [{ classname: "全部", sat_sharematerial_classid: "" }].concat(option.children),
+                };
+                i == -1 ? filtrateList.push(obj) : filtrateList[i] = obj;
+            } else {
+                i == -1 ? '' : filtrateList.pop();
+            }
+            this.$refs.Filtrate.list = filtrateList || JSON.parse(JSON.stringify());
+        },
+        onFiltration(e) {
+            let crumbs = [this.crumbs[0]]
+            crumbs.push({
+                classname: e.一级分类.classname,
+                parentid: e.一级分类.sat_sharematerial_classid
+            })
+            if (e.二级分类) crumbs.push({
+                classname: e.二级分类.classname,
+                parentid: e.二级分类.sat_sharematerial_classid
+            })
+
+            this.crumbs = crumbs;
+            this.getList(true)
+        },
+        statusChange({ name }) {
+            this.content.where.status = name == '全部' ? '' : name;
+            this.getList(true)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped >
+.head {
+    padding: 10px;
+    width: 100%;
+    background: #fff;
+    box-sizing: border-box;
+
+    .filtrate {
+        line-height: 30px;
+        padding: 0 10px;
+        font-family: PingFang SC, PingFang SC;
+        font-size: 14px;
+        color: #333333;
+        border-radius: 3px;
+        margin-left: 10px;
+
+        .iconfont {
+            margin-left: 3px;
+            color: #BBBBBB;
+        }
+    }
+}
+
+.crumbs {
+    display: flex;
+    line-height: 17px;
+    font-family: PingFang SC, PingFang SC;
+    font-size: 12px;
+    flex-wrap: wrap;
+    width: 100%;
+    margin-top: 10px;
+
+    .crumb {
+        flex-shrink: 0;
+
+    }
+
+    .crumb::after {
+        content: ">";
+        padding: 0 2px;
+    }
+
+    .crumb:last-child {
+        font-weight: bold;
+    }
+
+    .crumb:last-child::after {
+        content: "";
+    }
+}
+
+.waterfalls {
+    width: 100vw;
+    padding: 10px;
+    box-sizing: border-box;
+
+    &-item {
+        border-radius: 0 !important;
+
+        &-title {
+            text-align: center;
+            line-height: 18.5px;
+            width: 100%;
+            background: #FFFFFF;
+            font-family: PingFang SC, PingFang SC;
+            font-size: 12px;
+            color: #333333;
+        }
+    }
+
+}
+</style>

pages.json

@@ -33,6 +33,10 @@
 			"path": "advertising/shareable"
 		}, {
 			"path": "advertising/unshareable"
+		}, {
+			"path": "resourceLibrary/index"
+		}, {
+			"path": "resourceLibrary/detail"
 		}]
 	}],
 	"globalStyle": {

pages/index/cloud/dataBank.vue

@@ -6,10 +6,11 @@
                 <image v-if="item.cover" class="image" :src="item.cover" mode="aspectFill" lazy-load="false" />
                 <text v-else>{{ item.remark }}</text>
             </navigator>
-            <navigator class="nav-box" v-for="item in list" :url="'/packageA/resourceLibrary/index?id=' + item.parentid"
-                :key="item.name" hover-class="navigator-hover">
+            <navigator class="nav-box" v-for="item in list"
+                :url="'/packageA/resourceLibrary/index?id=' + item.sat_sharematerial_classid + '&name=' + item.classname"
+                :key="item.sat_sharematerial_classid" hover-class="navigator-hover">
                 <image v-if="item.cover" class="image" :src="item.cover" mode="aspectFill" lazy-load="false" />
-                <text v-else>{{ item.title }}</text>
+                <text v-else>{{ item.classname }}</text>
             </navigator>
         </view>
     </My_listbox>
@@ -22,12 +23,9 @@ export default {
             appList: [],
             list: [],
             "content": {
-                "pageNumber": 1,
-                "pageSize": 20,
-                "isDataAuth": true,//小程序默认传true
+                "parentid": 0,
                 "where": {
-                    "condition": "",
-                    "sat_sharematerial_classids": [],
+                    "isenable": 1
                 }
             }
         }
@@ -39,7 +37,7 @@ export default {
             } catch (error) {
                 console.log("未获取到授权")
             }
-            this.getList().then(res => {
+            this.getList(true).then(res => {
                 callBack()
             })
         },
@@ -47,7 +45,7 @@ export default {
             return new Promise((resolve, reject) => {
                 if (this.paging(this.content, init)) return resolve();
                 this.$Http.basic({
-                    "id": "20240407094702",
+                    "id": "20221102143202",
                     content: this.content
                 }).then(res => {
                     console.log("获取装备资源库一级分类", res)

static/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4131149 */
-  src: url('//at.alicdn.com/t/c/font_4131149_cbwqjfj5ug.woff2?t=1712816912483') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4131149_cbwqjfj5ug.woff?t=1712816912483') format('woff'),
-       url('//at.alicdn.com/t/c/font_4131149_cbwqjfj5ug.ttf?t=1712816912483') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_4131149_hnlabw43go6.woff2?t=1713148879943') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4131149_hnlabw43go6.woff?t=1713148879943') format('woff'),
+       url('//at.alicdn.com/t/c/font_4131149_hnlabw43go6.ttf?t=1713148879943') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-xiazai:before {
+  content: "\e6c8";
+}
+
+.icon-fayouxiang:before {
+  content: "\e6c7";
+}
+
 .icon-jiaose:before {
   content: "\e6c1";
 }

uni_modules/custom-waterfalls-flow/components/custom-waterfalls-flow/custom-waterfalls-flow.vue

@@ -1,8 +1,11 @@
 <template>
 	<view class="waterfalls-flow">
-		<view v-for="(item,index) in data.column" :key="index" class="waterfalls-flow-column" :id="`waterfalls_flow_column_${index+1}`" :msg="msg" :style="{'width':w,'margin-left':index==0?0:m}">
-			<view :class="['column-value',{'column-value-show':item2.o}]" v-for="(item2,index2) in columnValue(index)" :key="index2" :style="[s1]" @click.stop="wapperClick(item2)">
-				<view class="inner" v-if="data.seat==1">
+		<view v-for="(item, index) in data.column" :key="index" class="waterfalls-flow-column"
+			:id="`waterfalls_flow_column_${index + 1}`" :msg="msg"
+			:style="{ 'width': w, 'margin-left': index == 0 ? 0 : m }">
+			<view :class="['column-value', { 'column-value-show': item2.o }]" v-for="(item2, index2) in columnValue(index)"
+				:key="index2" :style="[s1]" @click.stop="wapperClick(item2)">
+				<view class="inner" v-if="data.seat == 1">
 					<!-- #ifdef MP-WEIXIN -->
 					<!-- #ifdef VUE2 -->
 					<slot name="slot{{item2.index}}"></slot>
@@ -15,8 +18,11 @@
 					<slot v-bind="item2"></slot>
 					<!-- #endif -->
 				</view>
-				<image :class="['img',{'img-hide':item2[hideImageKey]==true||item2[hideImageKey]==1},{'img-error':!item2[data.imageKey]}]" :src="item2[data.imageKey]" mode="widthFix" @load="imgLoad(item2,index+1)" @error="imgError(item2,index+1)" @click.stop="imageClick(item2)"></image>
-				<view class="inner" v-if="data.seat==2">
+				<image
+					:class="['img', { 'img-hide': item2[hideImageKey] == true || item2[hideImageKey] == 1 }, { 'img-error': !item2[data.imageKey] }]"
+					:src="item2[data.imageKey]" mode="widthFix" @load="imgLoad(item2, index + 1)"
+					@error="imgError(item2, index + 1)" @click.stop="imageClick(item2)"></image>
+				<view class="inner" v-if="data.seat == 2">
 					<!-- #ifdef MP-WEIXIN -->
 					<!-- #ifdef VUE2 -->
 					<slot name="slot{{item2.index}}"></slot>
@@ -34,290 +40,292 @@
 	</view>
 </template>
 <script>
-	export default {
-		props: {
-			value: Array,
-			column: { // 列的数量 
-				type: [String, Number],
-				default: 2
-			},
-			maxColumn: { // 最大列数 
-				type: [String, Number],
-				default: 5
-			},
-			columnSpace: { // 列之间的间距 百分比
-				type: [String, Number],
-				default: 2
-			},
-			imageKey: { // 图片key
-				type: [String],
-				default: 'image'
-			},
-			hideImageKey: { // 隐藏图片key
-				type: [String],
-				default: 'hide'
-			},
-			seat: { // 文本的位置，1图片之上 2图片之下
-				type: [String, Number],
-				default: 2
-			},
-			listStyle: { // 单个展示项的样式：eg:{'background':'red'}
-				type: Object
-			}
+export default {
+	props: {
+		value: Array,
+		column: { // 列的数量 
+			type: [String, Number],
+			default: 2
 		},
-		data() {
-			return {
-				data: {
-					list: this.value ? this.value : [],
-					column: this.column < 2 ? 2 : this.column,
-					columnSpace: this.columnSpace <= 5 ? this.columnSpace : 5,
-					imageKey: this.imageKey,
-					seat: this.seat
-				},
-				msg: 0,
-				listInitStyle: {
-					'border-radius': '12rpx',
-					'margin-bottom': '20rpx',
-					'background-color': '#fff'
-				},
-				adds: [], //预置数据
-				isLoaded: true,
-				curIndex: 0,
-				isRefresh: true,
-				flag: false,
-				refreshDatas: []
-			}
+		maxColumn: { // 最大列数 
+			type: [String, Number],
+			default: 5
 		},
-		computed: {
-			// 计算列宽
-			w() {
-				const column_rate = `${100 / this.data.column - (+this.data.columnSpace)}%`;
-				return column_rate;
-			},
-			// 计算margin
-			m() {
-				const column_margin = `${(100-(100 / this.data.column - (+this.data.columnSpace)).toFixed(5)*this.data.column)/(this.data.column-1)}%`;
-				return column_margin;
-			},
-			// list样式
-			s1() {
-				return { ...this.listInitStyle, ...this.listStyle };
-			}
+		columnSpace: { // 列之间的间距 百分比
+			type: [String, Number],
+			default: 2
 		},
-		created() {
-			// 初始化
-			this.refresh();
+		imageKey: { // 图片key
+			type: [String],
+			default: 'image'
 		},
-		methods: {
-			// 预加载图片
-			loadImages(idx = 0) {
-				let count = 0;
-				const newList = this.data.list.filter((item, index) => index >= idx);
-				for (let i = 0; i < newList.length; i++) {
-					// #ifndef APP-PLUS
-					uni.getImageInfo({
-						src: `${newList[i][this.imageKey]}.jpg`,
-						complete: res => {
-							count++;
-							if (count == newList.length) this.initValue(idx);
-						}
-					})
-					// #endif
-					// #ifdef APP-PLUS
-					plus.io.getImageInfo({
-						src: `${newList[i][this.imageKey]}.jpg`,
-						complete: res => {
-							count++;
-							if (count == newList.length) this.initValue(idx);
-						}
-					})
-					// #endif
-				}
-			},
-			// 刷新
-			refresh() {
-				if (!this.isLoaded) {
-					this.refreshDatas = this.value;
-					return false;
-				};
-				setTimeout(() => {
-					this.refreshDatas = [];
-					this.isRefresh = true;
-					this.adds = [];
-					this.data.list = this.value ? this.value : [];
-					this.data.column = this.column < 2 ? 2 : this.column >= this.maxColumn ? this.maxColumn : this.column;
-					this.data.columnSpace = this.columnSpace <= 5 ? this.columnSpace : 5;
-					this.data.imageKey = this.imageKey;
-					this.data.seat = this.seat;
-					this.curIndex = 0;
-					// 每列的数据初始化
-					for (let i = 1; i <= this.data.column; i++) {
-						this.data[`column_${i}_values`] = [];
-						this.msg++;
-					}
-					this.$nextTick(() => {
-						this.initValue(this.curIndex, 'refresh==>');
-					})
-				}, 1)
+		hideImageKey: { // 隐藏图片key
+			type: [String],
+			default: 'hide'
+		},
+		seat: { // 文本的位置，1图片之上 2图片之下
+			type: [String, Number],
+			default: 2
+		},
+		listStyle: { // 单个展示项的样式：eg:{'background':'red'}
+			type: Object
+		}
+	},
+	data() {
+		return {
+			data: {
+				list: this.value ? this.value : [],
+				column: this.column < 2 ? 2 : this.column,
+				columnSpace: this.columnSpace <= 5 ? this.columnSpace : 5,
+				imageKey: this.imageKey,
+				seat: this.seat
 			},
-			columnValue(index) {
-				return this.data[`column_${index+1}_values`];
+			msg: 0,
+			listInitStyle: {
+				'border-radius': '12rpx',
+				'margin-bottom': '20rpx',
+				'background-color': '#fff'
 			},
-			change(newValue) {
-				for (let i = 0; i < this.data.list.length; i++) {
-					const cv = this.data[`column_${this.data.list[i].column}_values`];
-					for (let j = 0; j < cv.length; j++) {
-						if (newValue[i] && i === cv[j].index) {
-							this.data[`column_${this.data.list[i].column}_values`][j] = Object.assign(cv[j], newValue[i]);
-							this.msg++;
-							break;
-						}
-					}
-				}
-			},
-			getMin(a, s) {
-				let m = a[0][s];
-				let mo = a[0];
-				for (var i = a.length - 1; i >= 0; i--) {
-					if (a[i][s] < m) {
-						m = a[i][s];
+			adds: [], //预置数据
+			isLoaded: true,
+			curIndex: 0,
+			isRefresh: true,
+			flag: false,
+			refreshDatas: []
+		}
+	},
+	computed: {
+		// 计算列宽
+		w() {
+			const column_rate = `${100 / this.data.column - (+this.data.columnSpace)}%`;
+			return column_rate;
+		},
+		// 计算margin
+		m() {
+			const column_margin = `${(100 - (100 / this.data.column - (+this.data.columnSpace)).toFixed(5) * this.data.column) / (this.data.column - 1)}%`;
+			return column_margin;
+		},
+		// list样式
+		s1() {
+			return { ...this.listInitStyle, ...this.listStyle };
+		}
+	},
+	created() {
+		// 初始化
+		this.refresh();
+	},
+	methods: {
+		// 预加载图片
+		loadImages(idx = 0) {
+			let count = 0;
+			const newList = this.data.list.filter((item, index) => index >= idx);
+			for (let i = 0; i < newList.length; i++) {
+				// #ifndef APP-PLUS
+				uni.getImageInfo({
+					src: `${newList[i][this.imageKey]}.jpg`,
+					complete: res => {
+						count++;
+						if (count == newList.length) this.initValue(idx);
 					}
-				}
-				mo = a.filter(i => i[s] == m);
-				return mo[0];
-			},
-			// 计算每列的高度
-			getMinColumnHeight() {
-				return new Promise(resolve => {
-					const heightArr = [];
-					for (let i = 1; i <= this.data.column; i++) {
-						const query = uni.createSelectorQuery().in(this);
-						query.select(`#waterfalls_flow_column_${i}`).boundingClientRect(data => {
-							heightArr.push({ column: i, height: data.height });
-						}).exec(() => {
-							if (this.data.column <= heightArr.length) {
-								resolve(this.getMin(heightArr, 'height'));
-							}
-						});
+				})
+				// #endif
+				// #ifdef APP-PLUS
+				plus.io.getImageInfo({
+					src: `${newList[i][this.imageKey]}.jpg`,
+					complete: res => {
+						count++;
+						if (count == newList.length) this.initValue(idx);
 					}
 				})
-			},
-			async initValue(i, from) {
-				this.isLoaded = false;
-				if (i >= this.data.list.length || this.refreshDatas.length) {
+				// #endif
+			}
+		},
+		// 刷新
+		refresh() {
+			if (!this.isLoaded) {
+				this.refreshDatas = this.value;
+				return false;
+			};
+			setTimeout(() => {
+				this.refreshDatas = [];
+				this.isRefresh = true;
+				this.adds = [];
+				this.data.list = this.value ? this.value : [];
+				this.data.column = this.column < 2 ? 2 : this.column >= this.maxColumn ? this.maxColumn : this.column;
+				this.data.columnSpace = this.columnSpace <= 5 ? this.columnSpace : 5;
+				this.data.imageKey = this.imageKey;
+				this.data.seat = this.seat;
+				this.curIndex = 0;
+				// 每列的数据初始化
+				for (let i = 1; i <= this.data.column; i++) {
+					this.data[`column_${i}_values`] = [];
 					this.msg++;
-					this.loaded();
-					return false;
 				}
-				const minHeightRes = await this.getMinColumnHeight();
-				const c = this.data[`column_${minHeightRes.column}_values`];
-				this.data.list[i].column = minHeightRes.column;
-				c.push({ ...this.data.list[i], cIndex: c.length, index: i, o: 0 });
-				this.msg++;
-			},
-			// 图片加载完成
-			imgLoad(item, c) {
-				const i = item.index;
-				item.o = 1;
-				this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
-				this.initValue(i + 1);
-			},
-			// 图片加载失败
-			imgError(item, c) {
-				const i = item.index;
-				item.o = 1;
-				item[this.data.imageKey] = null;
-				this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
-				this.initValue(i + 1);
-			},
-			// 渲染结束
-			loaded() {
-				if (this.refreshDatas.length) {
-					this.isLoaded = true;
-					this.refresh();
-					return false;
+				this.$nextTick(() => {
+					this.initValue(this.curIndex, 'refresh==>');
+				})
+			}, 1)
+		},
+		columnValue(index) {
+			return this.data[`column_${index + 1}_values`];
+		},
+		change(newValue) {
+			for (let i = 0; i < this.data.list.length; i++) {
+				const cv = this.data[`column_${this.data.list[i].column}_values`];
+				for (let j = 0; j < cv.length; j++) {
+					if (newValue[i] && i === cv[j].index) {
+						this.data[`column_${this.data.list[i].column}_values`][j] = Object.assign(cv[j], newValue[i]);
+						this.msg++;
+						break;
+					}
 				}
-				this.curIndex = this.data.list.length;
-				if (this.adds.length) {
-					this.data.list = this.adds[0];
-					this.adds.splice(0, 1);
-					this.initValue(this.curIndex);
-				} else {
-					if (this.data.list.length) this.$emit('loaded');
-					this.isLoaded = true;
-					this.isRefresh = false;
+			}
+		},
+		getMin(a, s) {
+			let m = a[0][s];
+			let mo = a[0];
+			for (var i = a.length - 1; i >= 0; i--) {
+				if (a[i][s] < m) {
+					m = a[i][s];
 				}
-			},
-			// 单项点击事件
-			wapperClick(item) {
-				this.$emit('wapperClick', item);
-			},
-			// 图片点击事件
-			imageClick(item) {
-				this.$emit('imageClick', item);
 			}
+			mo = a.filter(i => i[s] == m);
+			return mo[0];
 		},
-		watch: {
-			value: {
-				deep: true,
-				handler(newValue, oldValue) {
-					setTimeout(() => {
-						this.$nextTick(() => {
-							if (this.isRefresh) return false;
-							if (this.isLoaded) {
-								// if (newValue.length <= this.curIndex) return this.refresh();
-								if (newValue.length <= this.curIndex) return this.change(newValue);
-								this.data.list = newValue;
-								this.$nextTick(() => {
-									this.initValue(this.curIndex, 'watch==>');
-								})
-							} else {
-								this.adds.push(newValue);
-							}
-						})
-					}, 10)
+		// 计算每列的高度
+		getMinColumnHeight() {
+			return new Promise(resolve => {
+				const heightArr = [];
+				for (let i = 1; i <= this.data.column; i++) {
+					const query = uni.createSelectorQuery().in(this);
+					query.select(`#waterfalls_flow_column_${i}`).boundingClientRect(data => {
+						heightArr.push({ column: i, height: data.height });
+					}).exec(() => {
+						if (this.data.column <= heightArr.length) {
+							resolve(this.getMin(heightArr, 'height'));
+						}
+					});
 				}
-			},
-			column(newValue) {
+			})
+		},
+		async initValue(i, from) {
+			this.isLoaded = false;
+			if (i >= this.data.list.length || this.refreshDatas.length) {
+				this.msg++;
+				this.loaded();
+				return false;
+			}
+			const minHeightRes = await this.getMinColumnHeight();
+			const c = this.data[`column_${minHeightRes.column}_values`];
+			this.data.list[i].column = minHeightRes.column;
+			c.push({ ...this.data.list[i], cIndex: c.length, index: i, o: 0 });
+			this.msg++;
+		},
+		// 图片加载完成
+		imgLoad(item, c) {
+			const i = item.index;
+			item.o = 1;
+			this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
+			this.initValue(i + 1);
+		},
+		// 图片加载失败
+		imgError(item, c) {
+			const i = item.index;
+			item.o = 1;
+			item[this.data.imageKey] = null;
+			this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
+			this.initValue(i + 1);
+		},
+		// 渲染结束
+		loaded() {
+			if (this.refreshDatas.length) {
+				this.isLoaded = true;
 				this.refresh();
+				return false;
 			}
+			this.curIndex = this.data.list.length;
+			if (this.adds.length) {
+				this.data.list = this.adds[0];
+				this.adds.splice(0, 1);
+				this.initValue(this.curIndex);
+			} else {
+				if (this.data.list.length) this.$emit('loaded');
+				this.isLoaded = true;
+				this.isRefresh = false;
+			}
+		},
+		// 单项点击事件
+		wapperClick(item) {
+			this.$emit('wapperClick', item);
+		},
+		// 图片点击事件
+		imageClick(item) {
+			this.$emit('imageClick', item);
+		}
+	},
+	watch: {
+		value: {
+			deep: true,
+			handler(newValue, oldValue) {
+				setTimeout(() => {
+					this.$nextTick(() => {
+						if (this.isRefresh) return false;
+						if (this.isLoaded) {
+							// if (newValue.length <= this.curIndex) return this.refresh();
+							if (newValue.length <= this.curIndex) return this.change(newValue);
+							this.data.list = newValue;
+							this.$nextTick(() => {
+								this.initValue(this.curIndex, 'watch==>');
+							})
+						} else {
+							this.adds.push(newValue);
+						}
+					})
+				}, 10)
+			}
+		},
+		column(newValue) {
+			this.refresh();
 		}
 	}
+}
 </script>
+
 <style lang="scss" scoped>
-	.waterfalls-flow {
-		overflow: hidden;
+.waterfalls-flow {
+	overflow: hidden;
 
-		&-column {
-			float: left;
-		}
+	&-column {
+		float: left;
 	}
+}
 
-	.column-value {
-		width: 100%;
-		font-size: 0;
-		overflow: hidden;
-		transition: opacity .4s;
-		opacity: 0;
+.column-value {
+	width: 100%;
+	font-size: 0;
+	overflow: hidden;
+	transition: opacity .4s;
+	opacity: 0;
 
-		&-show {
-			opacity: 1;
-		}
+	&-show {
+		opacity: 1;
+	}
 
-		.inner {
-			font-size: 30rpx;
-		}
+	.inner {
+		font-size: 30rpx;
+	}
 
-		.img {
-			width: 100%;
+	.img {
+		width: 100%;
+		border-radius: 8px;
 
-			&-hide {
-				display: none;
-			}
+		&-hide {
+			display: none;
+		}
 
-			&-error {
-				background: #f2f2f2 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiAQMAAAAatXkPAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAAIZJREFUCNdlzjEKwkAUBNAfEGyCuYBkLyLuxRYW2SKlV1JSeA2tUiZg4YrLjv9PGsHqNTPMSAQuyAJgRDHSyvBPwtZoSJXakeJI9iuRLGDygdl6V0yKDtyMAeMPZySj8yfD+UapvRPj2JOwkyAooSV5IwdDjPdCPspe8LyTl9IKJvDETKKRv6vnlUasgg0fAAAAAElFTkSuQmCC) no-repeat center center;
-			}
+		&-error {
+			background: #f2f2f2 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiAQMAAAAatXkPAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAAIZJREFUCNdlzjEKwkAUBNAfEGyCuYBkLyLuxRYW2SKlV1JSeA2tUiZg4YrLjv9PGsHqNTPMSAQuyAJgRDHSyvBPwtZoSJXakeJI9iuRLGDygdl6V0yKDtyMAeMPZySj8yfD+UapvRPj2JOwkyAooSV5IwdDjPdCPspe8LyTl9IKJvDETKKRv6vnlUasgg0fAAAAAElFTkSuQmCC) no-repeat center center;
 		}
 	}
+}
 </style>

utils/settleFiles.js

@@ -152,7 +152,7 @@ function wxSaveFile(file) {
                         console.log("保存图片", res)
                         uni.showModal({
                             title: '提示',
-                            content: '图片已保存到系统相册',
+                            content: '文件已保存到系统相册',
                             showCancel: false
                         })
                         uni.hideLoading()