Client-Teapay/src/pagesC/components/up/index.vue

<template>
    <div class="upimgList">
        <div class="upimg" v-for="(i,s) in imgs" :key="s">
            <img :src="i" class="logo" alt="" srcset="" />
            <div class="del iconfont" @click="del">&#xe609;</div>
        </div>
        <div v-if="imgs.length < count" class="upimg flex_c flex_ac flex_jc flex_wrap" @click="upimg">
            <div class="upico iconfont">&#xe674;</div>
            <div class="upmsg" v-if="!desc">最多{{ count }}张</div>
            <div class="upmsg" v-else>{{ desc }}</div>
        </div>
        <center-popup ref="centerPopup" :title="Popuptitle" @confirmClick="delimg" />
    </div>
</template>
<script>
import centerPopup from "@/pagesC/components/centerPopup/centerPopup"
export default {
    name: "upimgList",
    props: {
        count: {
            type: Number,
            default: 1
        },
        value: {
            type: String,
            default: ""
        },
        desc: "",
    },
    components: { centerPopup },
    data() {
        return {
            imgs: [],
            Popuptitle: "",
            Popuptitle: "",
            delinx: "", // 要删除的图片索引
        };
    },
    methods: {
        upimg() {
            let that = this
            uni.chooseMedia({
                count: that.count,
                mediaType: ["image"],
                sizeType: ["compressed"],
                sourceType: ["album", "camera"],
                success: async (res) => {
                    let arr = res.tempFiles.slice(0,this.count - this.imgs.length)
                    for (const it of arr) {
                        if (it.size/1024/1024 <= 1) {
                            let url = await that.$up(it.tempFilePath)
                            this.imgs.push(url)
                        }else{
                            return uni.showToast({
                                title: "图片大小超出1M",
                                icon: "none",
                            });
                        }
                    }
                    that.emitI(this.imgs);
                },
            });
        },
        del(inx) {
            this.delinx = inx
            this.Popuptitle = "确认要删除这张图片吗？"
            this.$refs.centerPopup.open()
        },
        delimg() {
            this.imgs.splice(this.delinx, 1)
            this.emitI(this.imgs)
            this.$refs.centerPopup.close()
        },
        emitI(arr){
            let va = ""
            if(this.count == 1) va = arr[0]
            else va = JSON.stringify(arr)
            this.$emit("input", va);
        },
    },
    watch: {
        value: {
            immediate: true,
            deep: true,
            handler(str) {
                if (str){
                    if(this.count == 1) this.imgs = [str]
                    else this.imgs = JSON.parse(str)
                }
            }
        }
    },
    onLoad(da) {},
    onShow() {},
    mounted() {},
};
</script>
<style scoped lang='scss'>
.upimgList {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 170rpx);
    grid-gap: 0 1px;
}

.upimg {
    width: 170rpx;
    height: 130rpx;
    font-size: 23rpx;
    border-radius: 15rpx;
    border: 2rpx dashed #999;
    color: #999;
    margin-bottom: 6rpx;
    position: relative;

    .upico {
        color: #999;
        font-size: 70rpx;
    }

    .logo {
        width: 100%;
        height: 100%;
        border-radius: 15rpx;
    }

    .del {
        position: absolute;
        top: 6rpx;
        right: 6px;
        color: #fff;
        padding: 6rpx 12rpx;
        font-weight: 600;
        border-radius: 12rpx;
        background-color: rgba($color: #f20, $alpha: 0.6);
    }
}
</style>