feiniao-farm-h5/src/views/old_mini/agri_file/components/albumUploadPopup.vue

<template>
    <popup
        v-model:show="showValue"
        round
        :close-on-click-overlay="false"
        :z-index="20000"
        class="album-upload-popup"
        @closed="handleClosed"
    >
        <div class="album-upload-popup__content">
            <div class="album-upload-popup__title">上传照片</div>

            <uploader
                class="album-upload-popup__uploader"
                v-model="fileList"
                multiple
                :max-count="maxCount"
                :after-read="afterRead"
                @delete="onDelete"
            >
                <div class="album-upload-popup__add">
                    <el-icon size="22" color="rgba(0, 0, 0, 0.6)"><Plus /></el-icon>
                    <!-- <span class="album-upload-popup__add-icon">+</span> -->
                </div>
            </uploader>

            <div class="album-upload-popup__date">
                <div class="album-upload-popup__date-label">上传日期</div>
                <el-date-picker
                    v-model="uploadDate"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择上传日期"
                    :editable="false"
                    :disabled-date="disableAfterToday"
                    style="width: 100%"
                    size="large"
                />
            </div>

            <el-input
                v-model="description"
                class="album-upload-popup__desc"
                type="textarea"
                :rows="4"
                resize="none"
                placeholder="为您的照片添加描述吧~"
                maxlength="200"
            />

            <div class="album-upload-popup__actions">
                <div class="album-upload-popup__btn album-upload-popup__btn--cancel" @click="handleCancel">
                    取消
                </div>
                <div
                    class="album-upload-popup__btn album-upload-popup__btn--confirm"
                    :class="{ disabled: confirming }"
                    @click="handleConfirm"
                >
                    {{ confirming ? "上传中..." : "确认上传" }}
                </div>
            </div>
        </div>
    </popup>
</template>

<script setup>
import { ref, watch } from "vue";
import { Popup, Uploader } from "vant";
import { ElMessage } from "element-plus";
import { getFileExt } from "@/utils/util";
import UploadFile from "@/utils/upliadFile";
import { useStore } from "vuex";
import "vant/lib/uploader/style";

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    maxCount: {
        type: Number,
        default: 9,
    },
});

const emit = defineEmits(["update:show", "confirm", "cancel"]);

const store = useStore();
const miniUserId = store.state.home.miniUserId || localStorage.getItem("MINI_USER_ID");
const uploadFileObj = new UploadFile();

const showValue = ref(false);
const fileList = ref([]);
const uploadedKeys = ref([]);
const description = ref("");
const uploadDate = ref("");
const confirming = ref(false);

function formatDate(date = new Date()) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
}

const disableAfterToday = (date) => {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    return date.getTime() > today.getTime();
};

watch(
    () => props.show,
    (val) => {
        showValue.value = val;
        if (val) {
            resetForm();
        }
    },
    { immediate: true },
);

watch(showValue, (val) => {
    emit("update:show", val);
});

function resetForm() {
    fileList.value = [];
    uploadedKeys.value = [];
    description.value = "";
    uploadDate.value = formatDate();
    confirming.value = false;
}

const afterRead = (file) => {
    const files = Array.isArray(file) ? file : [file];
    files.forEach((item) => {
        const fileVal = item.file;
        if (!fileVal) return;
        item.status = "uploading";
        item.message = "上传中...";
        const ext = getFileExt(fileVal.name);
        const key = `birdseye-look-mini/${miniUserId}/${Date.now()}_${Math.random()
            .toString(36)
            .slice(2, 8)}.${ext}`;
        uploadFileObj
            .put(key, fileVal)
            .then((resFilename) => {
                item.status = "done";
                item.message = "";
                item.resFilename = resFilename || key;
                uploadedKeys.value.push(item.resFilename);
            })
            .catch(() => {
                item.status = "failed";
                item.message = "上传失败";
                ElMessage.error("图片上传失败，请稍后再试！");
            });
    });
};

const onDelete = (file) => {
    const key = file?.resFilename;
    if (!key) return;
    uploadedKeys.value = uploadedKeys.value.filter((item) => item !== key);
};

const handleCancel = () => {
    showValue.value = false;
    emit("cancel");
};

const handleConfirm = () => {
    if (confirming.value) return;
    const uploading = fileList.value.some((item) => item.status === "uploading");
    if (uploading) {
        ElMessage.warning("图片上传中，请稍候");
        return;
    }
    const failed = fileList.value.some((item) => item.status === "failed");
    if (failed) {
        ElMessage.warning("存在上传失败的图片，请删除后重试");
        return;
    }
    if (!uploadedKeys.value.length) {
        ElMessage.warning("请先上传照片");
        return;
    }

    confirming.value = true;
    emit("confirm", {
        images: [...uploadedKeys.value],
        description: description.value.trim(),
        date: uploadDate.value,
    });
    confirming.value = false;
    showValue.value = false;
};

const handleClosed = () => {
    resetForm();
};
</script>

<style scoped lang="scss">
.album-upload-popup {
    width: 90%;
    max-width: 420px;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;

    &__content {
        padding: 20px 16px 16px;
        box-sizing: border-box;
    }

    &__title {
        margin-bottom: 14px;
        font-size: 16px;
        line-height: 22px;
        font-weight: 500;
        color: #111;
    }

    &__uploader {
        width: 100%;
        margin-bottom: 12px;

        :deep(.van-uploader__wrapper) {
            gap: 8px;
        }

        :deep(.van-uploader__preview),
        :deep(.van-uploader__upload),
        :deep(.van-uploader__preview-image) {
            width: calc((100vw * 0.9 - 32px - 24px) / 4);
            height: calc((100vw * 0.9 - 32px - 24px) / 4);
            margin: 0;
            border-radius: 6px;
            overflow: hidden;
        }

        :deep(.van-uploader__upload) {
            background: transparent;
        }

        :deep(.van-uploader__preview-delete) {
            top: 0;
            right: 0;
        }
    }
    :deep(.van-uploader__input-wrapper) {
        width: calc(25% - 8px);
        min-height: 66px;
    }

    &__add {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #F6F6F6;
        border: 1px dashed #DDDDDD;
        border-radius: 6px;
        box-sizing: border-box;
    }

    &__add-icon {
        font-size: 28px;
        line-height: 1;
        color: #999;
        font-weight: 300;
    }

    &__date {
        margin-bottom: 12px;

        &-label {
            margin-bottom: 8px;
            font-size: 14px;
            line-height: 20px;
            color: #333;
        }
    }

    &__desc {
        border: 1px solid rgba(220, 220, 220, 1);
        margin-bottom: 16px;
        border-radius: 3px;

        :deep(.el-textarea__inner) {
            min-height: 96px;
            padding: 10px 12px;
            border-radius: 6px;
            border-color: #e5e5e5;
            box-shadow: none;
            font-size: 14px;
            line-height: 20px;
            color: #333;

            &::placeholder {
                color: rgba(0, 0, 0, 0.3);
            }
        }
    }

    &__actions {
        display: flex;
        gap: 10px;
    }

    &__btn {
        height: 40px;
        line-height: 40px;
        border-radius: 4px;
        text-align: center;
        font-size: 15px;
        box-sizing: border-box;
        cursor: pointer;

        &--cancel {
            width: 96px;
            flex-shrink: 0;
            color: #666;
            background: #fff;
            border: 1px solid #dcdfe6;
        }

        &--confirm {
            flex: 1;
            color: #fff;
            background: #2199f8;

            &.disabled {
                opacity: 0.6;
                pointer-events: none;
            }
        }
    }
}
</style>