feiniao-farm-h5/src/views/old_mini/task_condition/components/uploadExecute.vue

<template>
    <popup
        class="active-upload-popup"
        v-model:show="show"
        closeable
        :close-on-click-overlay="false"
    >
        <div class="header">
            <div class="title">
                <span class="required">*</span>
                请上传执行照片
            </div>
        </div>
        <upload exampleImg class="upload-wrap" @handleUpload="handleUpload">
            <img class="example" src="@/assets/img/home/example-4.png" alt="" />
            <img class="example" src="@/assets/img/home/plus.png" alt="">
        </upload>
        <div class="btn" @click="handleConfirm">请求确认</div>
    </popup>
    <FnShareSheet v-model:show="showShare" @select="onSelect" :class="className" />
</template>

<script setup>
import { Popup } from "vant";
import { ref } from "vue";
import upload from "@/components/upload";
import { ElMessage } from "element-plus";
import FnShareSheet from "@/components/pageComponents/FnShareSheet.vue";

const props = defineProps({
    onlyShare: {
        type: Boolean,
        default: false,
    },
});

const show = ref(false);
const className = ref(null);
const farmWorkRecordId = ref(null);
function showPopup(id,classNameVal) {
    if (props.onlyShare) {
        showShare.value = true;
        className.value = classNameVal;
    } else {
        show.value = true;
        farmWorkRecordId.value = id;
    }
}

const images = ref([]);
function handleUpload({imgArr}) {
    images.value = imgArr;
}

function handleConfirm() {
    const params = {
        recordId: farmWorkRecordId.value,
        executeEvidence: images.value,
    };
    VE_API.z_farm_work_record.addExecuteImg(params).then((res) => {
        if (res.code === 0) {
            ElMessage.success('请求确认成功');
            show.value = false;
            showShare.value = true;
        }
    });
}

const showShare = ref(false);
const onSelect = ({type}) => {
    console.log(type);
};

defineExpose({
    showPopup,
});

</script>

<style lang="scss" scoped>
.active-upload-popup {
    width: 90%;
    box-sizing: border-box;
    padding: 24px 18px 20px;
    background: linear-gradient(0deg, #ffffff 70%, #d1ebff 100%);
    border-radius: 10px;
    ::v-deep {
        .van-popup__close-icon {
            color: #000;
        }
    }
    .header {
        .title {
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
            .required {
                color: #ff4d4f;
                margin-right: 4px;
            }
        }
        .date-input {
            margin: 12px 0;
        }
    }
    .tips-text {
        font-weight: 500;
    }
    .upload-wrap {
        margin: 12px 0 24px;
    }
    .example {
        width: 80px;
        height: 80px;
    }
    .example + .example {
        margin-left: 12px;
    }
}

.btn {
    padding: 8px;
    background: #2199f8;
    border-radius: 25px;
    color: #fff;
    font-size: 16px;
    text-align: center;
}

</style>
<style>
.share-sheet{
    bottom: 50px;
}
</style>