leromro-mini/pages_home/pages/serviceManagement/CategoryImags.vue

<template>
    <view class="certification-card">
        <view class="serve-box flex_c_s">
            <view>{{ viewStatus ? '已' : '请' }}上传图片({{ fileCount }}/6)</view>
            <view class="decs">注:第一张用于封面展示</view>
        </view>
        <view class="serve-img-contnt">
            <view class="serve-img" v-for="item in files" :key="item">
                <view class="img-close" @click="deleteImg(item)" v-if="viewStatus"></view>
                <view class="serve-is-img flex_c_c">
                    <image-viewer :src="item" :width="170" :height="230" :preview="true"></image-viewer>
                </view>
            </view>
            <view class="serve-up-img flex_c_c" @click="upImg" v-if="fileCount < 3 && viewStatus">
                <up-icon name="plus" color="#C9CDD4" size="16"></up-icon>
            </view>
        </view>
    </view>

</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { wxUploadFile } from '@/utils/wxRequest.js';
import { provide, inject } from 'vue'
import ImageViewer from './image-viewer.vue'

const viewStatus = inject('viewStatus');
const formData = inject('formData');
console.log("TCL: formData", formData)

const fileList = ref([]);
const maxImgCount = 3;


const fileCount = computed(() => {
    return formData.projectImages ? formData.projectImages.length : 0;
});

const files = computed(() => {
    return formData.projectImages || [];
});

const deleteImg = (url) => {
    fileList.value = fileList.value.filter(item => item.url !== url);
    uni.$u.debounce(changeFile, 300)
};
const upImg = async () => {
    try {
        const res = await wxUploadFile('img', maxImgCount);
        fileCount.value < 3 ? fileList.value = [...fileList.value, ...res] : uni.showToast({
            title: `最多可上传${maxImgCount}个资质证件!`,
            icon: 'none',
        });
    } catch (error) {
        console.log("TCL: upImg -> error", error)
    } finally {
        uni.$u.debounce(changeFile, 300)
    }
}

// 存储上传的文件
const changeFile = () => {
    formData.projectImages = fileList.value.map(item => item.url);
}

</script>

<style lang="scss" scoped>
@import "./index.scss";

.decs {
    font-family: PingFang SC;
    font-size: 28rpx;
    font-weight: normal;
    line-height: 40rpx;
    letter-spacing: normal;
    color: rgba(0, 0, 0, 0.5);
}

.serve-is-img {
    height: 230rpx !important;
}

.serve-img:first-child {
    position: relative;

    &::before {
        content: '';

        // width: 170rpx;
        // height: 230rpx;
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0;
        bottom: 0;
        background: rgba(216, 216, 216, 0.6);
        z-index: 2;
    }

    &::after {

        content: '封面展示';

        // width: 170rpx;
        // height: 230rpx;
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0;
        bottom: 0;
        z-index: 3;

        font-family: PingFang SC;
        font-size: 28rpx;
        font-weight: normal;
        line-height: 40rpx;
        letter-spacing: normal;
        color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;


    }
}

.serve-up-img {
    padding: 90rpx 0;
}
</style>