Client-Teapay/src/pagesB/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" class="upimg flex_c flex_ac flex_jc flex_wrap" @click="upimg">
            <div class="upico iconfont">&#xe674;</div>
            <div class="upmsg">最多{{ count }}张</div>
        </div>
        <center-popup ref="centerPopup" :title="Popuptitle" @confirmClick="delimg" />
    </div>
</template>
<script>
import centerPopup from "@/pagesB/components/centerPopup/centerPopup"
export default {
    name: "upimgList",
    props: {
        count: {
            type: Number,
            default: 1
        },
        value: {
            type: String,
            default: ""
        }
    },
    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 = [];
                    for (const it of res.tempFiles) {
                        let url = await that.$up(it.tempFilePath)
                        arr.push(url)
                    }
                    that.imgs = arr; that.emitI(arr);
                },
            });
        },
        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) 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>