fix: 农事凭证

src/views/old_mini/work_detail/components/executePopup.vue

@@ -70,6 +70,8 @@ const props = defineProps({
 const showValue = ref(false);
 const fileList = ref([]);
 const fileArr = ref([]);
+const sourceEvidenceList = ref([]);
+const sourceAuditStatusList = ref([]);
 const executeTime = ref("");
 const serviceInput = ref("");
 const uploadFileObj = new UploadFile();
@@ -150,9 +152,16 @@ function handleRemind() {
 }
 
 const recordId = ref(null);
-function openPopup(id) {
+function openPopup(id, extraData = {}) {
     showValue.value = true;
     recordId.value = id;
+    // fileArr.value = extraData.evidenceList.map(item => item.url);
+    // fileList.value = extraData.evidenceList
+    executeTime.value = extraData.executeDate
+    serviceInput.value = extraData.executorOrganizationName
+    // sourceEvidenceList.value = Array.isArray(extraData.evidenceList) ? extraData.evidenceList : [];
+
+    // sourceAuditStatusList.value = Array.isArray(extraData.auditStatusList) ? extraData.auditStatusList : [];
 }
 
 defineExpose({

src/views/old_mini/work_detail/index copy.vue

@@ -0,0 +1,977 @@
+<template>
+    <div class="work-detail">
+        <custom-header name="农事详情" v-if="!miniJson?.hideDraw" :showClose="false" isGoBack @goback="handleBack" />
+
+        <div class="work-detail-content">
+            <!-- 顶部状态 -->
+            <div class="content-status" :class="['status-' + detail?.flowStatus, 'audit-' + getAuditStatusPriority(detail?.executeEvidenceAuditStatus)]">
+                <div class="status-l">
+                    <div class="status-title">{{ handleTagType(detail?.flowStatus) }}</div>
+                    <div class="status-sub" v-if="triggerDateText && (detail?.flowStatus == -1 || detail?.flowStatus == -2)">
+                        执行时间已经过去 {{ Math.abs(daysDiff) }} 天了
+                    </div>
+                    <div class="status-sub" v-if="detail?.flowStatus === 3 && getAuditStatusPriority(detail?.executeEvidenceAuditStatus) !== 2">
+                        <template v-if="daysDiff > 0">
+                            距离执行时间还差 {{ Math.abs(daysDiff) }} 天
+                        </template>
+                        <template v-else-if="daysDiff === 0">
+                            执行时间为今天
+                        </template>
+                        <template v-else>
+                            执行时间已过
+                        </template>
+                    </div>
+                    <div class="status-sub" v-if="!detail?.flowStatus || detail?.flowStatus === 0">
+                        预计触发时间 {{ detail?.executeDate || "--" }}
+                    </div>
+                </div>
+            </div>
+
+            <div class="work-wrap" :class="{ 'has-bottom': info?.appType === 2 || (info?.appType === 1 && detail?.flowStatus === 3) }">
+                <!-- 农事组信息 -->
+                <div class="box-wrap group-info group-box" v-if="(detail?.executionLimitDays || detail?.executionLimitDays === 0) && detail?.flowStatus !== 5">
+                    <div class="group-name">
+                        该农事为 <span class="light-text">标准防治溯源农事</span> ，请在<span v-if="detail?.flowStatus !== 3">触发后</span> <span class="light-text">{{detail?.executionLimitDays}}天内</span>
+                        完成溯源认证上传，如果逾期未认证，该农事将不可溯源认证，且不计入飞鸟有味平台
+                    </div>
+                </div>
+
+                <!-- 每一段农事 -->
+                <div v-for="(prescription, index) in stageList" :key="index" class="box-wrap stage-card">
+                    <div class="work-info">
+                        <div class="stage-header">
+                            <div class="stage-title">{{ detail.farmWorkName }}</div>
+                        </div>
+
+                        <div class="stage-info">
+                            <div class="form-item">
+                                <div class="item-name">农事目的</div>
+                                <div class="item-text">
+                                    {{ prescription.purpose || prescription.purposeName || "--" }}
+                                </div>
+                            </div>
+                            <div class="form-item">
+                                <div class="item-name">农事时间</div>
+                                <div class="item-text">
+                                    {{ detail.executeDate || "--" }}
+                                </div>
+                            </div>
+                            <div class="form-item">
+                                <div class="item-name">执行区域</div>
+                                <div class="item-text light-text area-text">
+                                    {{ detail?.executionRegion?.regionName }}种植区域
+                                    <div class="area-btn" v-if="detail?.executionRegion?.regionRange" @click="handleViewArea">查看区域</div>
+                                    <div class="area-btn area-btn-right" @click="toDraw" v-if="!detail?.executionRegion?.regionRange && !miniJson?.hideDraw">建议勾选<el-icon><ArrowRight /></el-icon></div>
+                                </div>
+                            </div>
+                            <div class="form-item">
+                                <div class="item-name">注意事项</div>
+                                <div class="item-text">
+                                    {{ detail.remark || "--" }}
+                                </div>
+                            </div>
+                            <div class="form-item" v-if="hasAnyAvailableExecutionMethod(prescription)">
+                                <div class="item-name">药肥处方</div>
+                            </div>
+                        </div>
+
+                        <!-- 执行方式 -->
+                        <div class="stage-tabs" v-if="hasAnyAvailableExecutionMethod(prescription)">
+                            <div v-for="tab in getAvailableExecutionTabs(prescription)" :key="tab.value" class="tab-pill"
+                                :class="{ active: getStageExecutionMethod(index) === tab.value }"
+                                @click="changeExecutionMethod(index, tab.value)">
+                                {{ tab.label }}
+                            </div>
+                        </div>
+
+                        <!-- 药物处方表 -->
+                        <div class="prescription-wrap"
+                            v-if="prescription.pesticideList && prescription.pesticideList.length && hasAnyAvailableExecutionMethod(prescription)">
+                            <div class="prescription-table">
+                                <div class="table-header">
+                                    <div class="col col-type">使用功效</div>
+                                    <div class="col col-name">药肥名称</div>
+                                    <div class="col col-ratio">药肥配比</div>
+                                </div>
+
+                                <div v-for="(item, i) in prescription.pesticideList" :key="i" class="table-row">
+                                    <div class="col col-type">
+                                        {{ item.typeName || "--" }}
+                                    </div>
+                                    <div class="col col-name">
+                                        {{ item.name || item.pesticideFertilizerName || "--" }}
+                                    </div>
+                                    <div class="col col-ratio">
+                                        {{ getPesticideParam(item, index)?.ratio || "--" }}倍
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div v-if="hasRemark(prescription, index)" class="prescription-remark">
+                                <span v-for="(item, idx) in [prescription.pesticideList[0]]" :key="idx">
+                                    <template v-if="getParamRemark(item, index)">
+                                        {{ getParamRemark(item, index) }}
+                                        <br />
+                                    </template>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+
+
+                    <!-- 农事凭证 -->
+                    <div class="work-info photo-box" v-if="prescription.cropAlbum && prescription.cropAlbum.length">
+                        <div class="photo-title">农事凭证</div>
+                        <div class="tips-text" v-if="detail?.imageAuditRejectReason">{{ detail?.imageAuditRejectReason }}</div>
+                        <div class="photo-sub-title" v-if="info?.appType === 1">来自于 {{ detail?.executorOrganizationName || "--" }}</div>
+                        <div class="photo-img-wrap">
+                            <photo-provider :photo-closable="true">
+                                <photo-consumer v-for="(src, index) in prescription.cropAlbum" intro="农事凭证" :key="index"
+                                    :src="base_img_url2 + src.filename">
+                                    <div class="photo-img">
+                                        <img :src="base_img_url2 + src.filename" />
+                                        <div class="fail-icon" v-if="failIndex(index) === 2">
+                                            <el-icon size="24" color="#FF953D"><WarningFilled /></el-icon>
+                                            <div class="fail-icon-text">审核失败</div>
+                                        </div>
+                                    </div>
+                                </photo-consumer>
+                            </photo-provider>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 底部按钮 -->
+                <div class="fixed-btn-wrap center-btn" v-if="info?.appType === 2">
+                    <div class="fixed-btn" @click="handleConvert">
+                        转发农事
+                    </div>
+                </div>
+
+                <div class="fixed-btn-wrap execute-action" :class="{ 'no-share': miniJson?.hideDraw }" v-if="info?.appType === 1 && detail?.flowStatus === 3">
+                    <div class="action-item second" v-if="!miniJson?.hideDraw" @click="handleConvert">转发农事</div>
+                    <div class="action-item primary" @click="handleExecute">溯源认证</div>
+                </div>
+            </div>
+        </div>
+        <ExecutePopup ref="executePopupRef" @executeSuccess="getDetail" />
+
+        <upload-tips v-model:show="showUploadTipsPopup" />
+    </div>
+    <!-- 执行区域地图弹窗 -->
+    <popup v-model:show="showMapPopup" closeable class="map-popup">
+        <map-info :rangeWkt="detail?.executionRegion?.regionRange" />
+    </popup>
+</template>
+
+<script setup>
+import { ElMessage } from "element-plus";
+import wx from "weixin-js-sdk";
+import customHeader from "@/components/customHeader.vue";
+import { ref, computed, onMounted, onActivated } from "vue";
+import { useRouter } from "vue-router";
+import { formatDate } from "@/common/commonFun";
+import ExecutePopup from "./components/executePopup.vue";
+import { base_img_url2 } from "@/api/config";
+import UploadTips from "@/components/popup/uploadTips.vue";
+import { Popup } from "vant";
+import MapInfo from "./components/mapInfo.vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const showUploadTipsPopup = ref(false);
+
+const router = useRouter();
+// const info = JSON.parse(localStorage.getItem("localUserInfo") || "{}");
+const info = { appType: 1 };
+
+/** 接口根级与 detail 合并后的详情（pesticideList、prescriptionList） */
+const detail = ref({
+    farmId: null,
+    farmWorkLibId: null,
+    farmWorkName: "",
+    flowStatus: null,
+    purpose: "",
+    speciesId: null,
+    speciesName: "",
+    executeDate: null,
+    intervelTime: null,
+    remark: "",
+    pesticideList: [],
+    prescriptionList: [],
+    confirmPicture: [],
+    executeEvidence: [],
+    expertName: "",
+    expertPrescription: "",
+    id: null,
+    postId: null,
+    post: null,
+    expertNameFromFarmBasicInfo: "",
+    rangeWkt: null,
+});
+
+/** 凭证图片统一为 { filename } */
+const normalizeCropAlbum = (album) => {
+    if (!album || !Array.isArray(album)) return [];
+    return album
+        .map((x) => {
+            if (!x) return null;
+            if (typeof x === "string") return { filename: x };
+            if (x.filename) return x;
+            return null;
+        })
+        .filter(Boolean);
+};
+
+
+const maybeShowUploadTips = () => {
+    if (detail.value?.flowStatus !== 1) return;
+    const shown = localStorage.getItem('upload_tips');
+    if (shown === "1") return;
+
+    localStorage.setItem('upload_tips', "1");
+    showUploadTipsPopup.value = true;
+};
+
+onMounted(() => {
+    maybeShowUploadTips();
+});
+
+const miniJson = ref(null);
+onActivated(() => {
+    if (route.query?.miniJson) {
+        const miniJsonObj = JSON.parse(route.query.miniJson);
+        miniJson.value = JSON.parse(miniJsonObj.paramsPage);
+    } else {
+        miniJson.value = null;
+    }
+    getDetail();
+});
+
+const getDetail = () => {
+    if (!miniJson.value) return;
+    const { farmWorkLibId, farmId, recordId } = miniJson.value;
+    VE_API.z_farm_work_record
+        .getDetailById({ farmWorkLibId, farmId, farmWorkRecordId: recordId })
+        .then(({ data }) => {
+            const inner =
+                data?.detail && typeof data.detail === "object"
+                    ? { ...data.detail }
+                    : {};
+            detail.value = {
+                ...inner,
+                post: data?.post ?? null,
+                executionRegion: data?.executionRegion ?? null,
+                expertNameFromFarmBasicInfo:
+                    data?.expertNameFromFarmBasicInfo ?? "",
+                rangeWkt: data?.rangeWkt ?? null,
+            };
+        });
+};
+
+
+// 计算距离执行时间的天数差
+const daysDiff = computed(() => {
+    if (!detail.value?.executeDate) {
+        return '--';
+    }
+
+    const executeDate = new Date(detail.value.executeDate);
+    const today = new Date();
+
+    // 将时间设置为 00:00:00，只比较日期
+    executeDate.setHours(0, 0, 0, 0);
+    today.setHours(0, 0, 0, 0);
+
+    // 计算天数差（毫秒转天数）
+    const diffTime = executeDate.getTime() - today.getTime();
+    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+
+    return diffDays;
+});
+
+// 执行方式 Tab 配置
+const executionTabs = [
+    { label: "植保机", value: 1 },
+    { label: "人工手持", value: 2 },
+    { label: "地面机械", value: 3 }
+];
+// 每一段农事的当前执行方式（索引 -> 执行方式），默认 1：植保机
+const stageExecutionMethods = ref({});
+const executePopupRef = ref(null);
+
+const hasTextValue = (val) => {
+    if (val === null || val === undefined) return false;
+    return String(val).trim() !== "";
+};
+
+const hasValidParamForMethod = (item, methodValue) => {
+    if (!item?.params || !Array.isArray(item.params)) return false;
+    const methodParam = item.params.find(
+        (param) => Number(param.executionMethod) === Number(methodValue)
+    );
+    if (!methodParam) return false;
+    return hasTextValue(methodParam.ratio) || hasTextValue(methodParam.remark);
+};
+
+const getAvailableExecutionTabs = (prescription) => {
+    const list = prescription?.pesticideList;
+    if (!Array.isArray(list) || !list.length) return [];
+    return executionTabs.filter((tab) =>
+        list.some((item) => hasValidParamForMethod(item, tab.value))
+    );
+};
+
+const hasAnyAvailableExecutionMethod = (prescription) => {
+    return getAvailableExecutionTabs(prescription).length > 0;
+};
+
+
+const triggerDateText = computed(() => {
+    if (!detail.value.executeDate) return "";
+    const d = formatDate(detail.value.executeDate);
+    return d.replace(/-/g, ".");
+});
+
+/**
+ * 展示用「分段」列表：detail.pesticideList 或 prescriptionList 推导
+ */
+const stageList = computed(() => {
+    const d = detail.value;
+    if (!d) return [];
+
+    // if (Array.isArray(d.pesticideList) && d.pesticideList.length) {
+        return [
+            {
+                ...d,
+                pesticideList: d.pesticideList,
+                cropAlbum: normalizeCropAlbum(
+                    d.confirmPicture?.length
+                        ? d.confirmPicture
+                        : d.executeEvidence
+                ),
+            },
+        ];
+    // }
+
+    // return [];
+});
+
+
+const hasRemark = (prescription, stageIndex) => {
+    if (!prescription?.pesticideList || !Array.isArray(prescription.pesticideList)) return false;
+    const currentMethod = getStageExecutionMethod(stageIndex);
+    return prescription.pesticideList.some((item) => {
+        if (!item.params || !Array.isArray(item.params)) return false;
+        const p = item.params.find((param) => param.executionMethod === currentMethod);
+        return !!(p && p.remark);
+    });
+};
+
+const handleTagType = (tagType) => {
+    if (tagType == 0) return "待触发";
+    if (tagType == -1) return "已过期";
+    if (tagType == -2) return "已过期";
+    if (tagType == 3) {
+        const status = getAuditStatusPriority(detail.value?.executeEvidenceAuditStatus);
+        if (status === 2) {
+            return "审核失败";
+        }
+        return "待认证"
+    }
+    if (tagType == 5) {
+        const status = getAuditStatusPriority(detail.value?.executeEvidenceAuditStatus);
+        if (status === 2) {
+            return "审核失败";
+        }
+        if (status === 0) {
+            return "审核中";
+        }
+        return "已完成";
+    }
+    return "待触发"
+}
+
+// 审核状态优先级：2 > 0 > 1
+const getAuditStatusPriority = (auditStatusList) => {
+    if (!Array.isArray(auditStatusList) || !auditStatusList.length) return 1;
+    const normalized = auditStatusList.map((x) => Number(x)).filter((x) => [0, 1, 2].includes(x));
+    if (!normalized.length) return 1;
+    if (normalized.includes(2)) return 2;
+    if (normalized.includes(0)) return 0;
+    return 1;
+};
+
+// 审核是否失败
+const failIndex = (index) => {
+    return detail.value?.executeEvidenceAuditStatus[index]
+}
+
+const handleExecute = () => {
+    // const today = new Date();
+    // const executeDate = new Date(detail.value.executeDate);
+    // if (executeDate.getTime() > today.getTime()) {
+    //     ElMessage.warning('未到农事执行时间，无法溯源认证');
+    //     return;
+    // }
+    const evidenceList = normalizeCropAlbum(
+        detail.value?.confirmPicture?.length
+            ? detail.value.confirmPicture
+            : detail.value.executeEvidence
+    ).map((item) => item.filename);
+    const auditStatusList = Array.isArray(detail.value?.executeEvidenceAuditStatus)
+        ? detail.value.executeEvidenceAuditStatus
+        : [];
+
+    let imgs = []
+    evidenceList.forEach((item, index) => {
+        imgs.push({
+            url: base_img_url2 + item,
+            status: auditStatusList[index] === 2 ? 'failed' : 'success',
+            message: auditStatusList[index] === 2 ? '审核失败' : '审核成功',
+        });
+    });
+    console.log("evideimgsnceList", imgs);
+    executePopupRef.value.openPopup(miniJson.value.recordId, {
+        evidenceList: imgs,
+        executeDate: detail.value.executeDate,
+        executorOrganizationName: detail.value.executorOrganizationName,
+    });
+};
+
+
+const showMapPopup = ref(false);
+
+const handleViewArea = () => {
+    showMapPopup.value = true;
+}
+
+const toDraw = () => {
+    router.push({
+        path: "/draw_area",
+        query: {
+            subjectId: localStorage.getItem('selectedFarmId'),
+            varietyId: miniJson.value.typeId,
+        },
+    });
+}
+
+const handleBack = () => {
+    router.back();
+};
+
+const handleConvert = () => {
+    const query = {
+        askInfo: { title: "农事执行", content: "是否分享该农事给好友" },
+        shareText: `${detail.value.farmWorkName}农事 已触发，请在最佳农时内执行`,
+        targetUrl: `work_detail`,
+        paramsPage: JSON.stringify({...miniJson.value, hideDraw: true}),
+        imageUrl: 'https://birdseye-img.sysuimars.com/birdseye-look-mini/work_img.png',
+    };
+    wx.miniProgram.navigateTo({
+        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
+    });
+};
+
+// 获取当前段的执行方式
+const getStageExecutionMethod = (stageIndex) => {
+    const stage = stageList.value?.[stageIndex];
+    const availableTabs = getAvailableExecutionTabs(stage);
+    if (!availableTabs.length) return 1;
+
+    const val = stageExecutionMethods.value[stageIndex];
+    const isValidSelected = availableTabs.some(
+        (tab) => Number(tab.value) === Number(val)
+    );
+    return isValidSelected ? val : availableTabs[0].value;
+};
+
+// 根据当前执行方式，获取对应的参数（配比、单亩用量、备注）
+const getPesticideParam = (item, stageIndex) => {
+    if (!item?.params || !Array.isArray(item.params)) return null;
+    const currentMethod = getStageExecutionMethod(stageIndex);
+    return (
+        item.params.find((param) => param.executionMethod === currentMethod) || null
+    );
+};
+
+const getParamRemark = (item, stageIndex) => {
+    const param = getPesticideParam(item, stageIndex);
+    return param?.remark || item.remark || "";
+};
+
+const changeExecutionMethod = (stageIndex, value) => {
+    const stage = stageList.value?.[stageIndex];
+    const availableTabs = getAvailableExecutionTabs(stage);
+    const isAllowed = availableTabs.some(
+        (tab) => Number(tab.value) === Number(value)
+    );
+    if (!isAllowed) return;
+
+    stageExecutionMethods.value = {
+        ...stageExecutionMethods.value,
+        [stageIndex]: value
+    };
+};
+</script>
+
+<style scoped lang="scss">
+.work-detail {
+    height: 100vh;
+    background: #f2f3f5;
+    display: flex;
+    flex-direction: column;
+
+    .work-detail-content {
+        flex: 1;
+        overflow: auto;
+    }
+}
+
+.content-status {
+    position: relative;
+    padding: 16px 12px 0 12px;
+    color: #fff;
+    z-index: 1;
+    height: 100px;
+    box-sizing: border-box;
+
+    &::after {
+        content: "";
+        z-index: -1;
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100px;
+        background: #C7C7C7;
+        // background: #FF953D;
+        width: 100%;
+    }
+
+    &.status-0 {
+        &::after {
+            background: #C7C7C7;
+        }
+    }
+
+    &.status-5 {
+        padding-top: 30px;
+
+        &::after {
+            background: #2199F8;
+        }
+    }
+
+    &.status-3, &.audit-2, &.audit-0 {
+        &::after {
+            background: #FF953D;
+        }
+    }
+
+    &.audit-2 {
+        padding-top: 30px;
+    }
+
+    &.status--1 {
+        &::after {
+            background: #FF4F4F;
+        }
+    }
+    &.status--2 {
+        &::after {
+            background: #C7C7C7;
+        }
+    }
+
+    .status-l {
+        .status-title {
+            font-size: 22px;
+        }
+
+        .status-sub {
+            font-size: 14px;
+        }
+    }
+}
+
+.work-wrap {
+    position: relative;
+    top: -16px;
+    padding: 0 12px 12px;
+    z-index: 2;
+    &.has-bottom {
+        margin-bottom: 76px;
+    }
+}
+
+.box-wrap {
+
+    // background: #ffffff;
+    // border-radius: 8px;
+    // padding: 14px 10px 10px 10px;
+    // box-shadow: 0 2px 8px rgba(15, 35, 52, 0.06);
+    .work-info {
+        background: #ffffff;
+        border-radius: 8px;
+        padding: 14px 10px 10px 10px;
+        box-shadow: 0 2px 8px rgba(15, 35, 52, 0.06);
+    }
+
+    .photo-box {
+        margin-top: 10px;
+        padding: 11px 10px;
+        font-size: 14px;
+
+        .tips-text {
+            color: #FA7406;
+            padding: 5px 10px;
+            border: 1px solid #FF953D;
+            border-radius: 5px;
+            margin-bottom: 10px;
+            background: #fff;
+        }
+
+        .photo-title {
+            color: #000;
+            padding-bottom: 9px;
+        }
+
+        .photo-sub-title {
+            padding-bottom: 9px;
+            color: #767676;
+        }
+    }
+}
+
+
+.group-info {
+    margin-bottom: 10px;
+    background: #ffffff;
+    border-radius: 8px;
+    padding: 14px 10px 10px 10px;
+    box-shadow: 0 2px 8px rgba(15, 35, 52, 0.06);
+
+    &.group-box {
+        padding: 10px;
+
+        .group-name {
+            font-size: 14px;
+            color: #767676;
+
+            .group-name-text {
+                color: #000;
+            }
+        }
+    }
+
+    .group-name {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.2);
+
+        .group-name-text {
+            color: #767676;
+        }
+    }
+
+    .group-sub {
+        margin-top: 6px;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.45);
+        line-height: 1.5;
+    }
+}
+
+.stage-card+.stage-card {
+    margin-top: 10px;
+}
+
+.stage-card {
+
+    .stage-header {
+        padding-bottom: 12px;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+
+        .stage-title {
+            font-size: 16px;
+            color: #000;
+        }
+
+        .title-tag {
+            width: fit-content;
+            font-size: 12px;
+            height: 26px;
+            line-height: 26px;
+            color: #2199F8;
+            background: rgba(33, 153, 248, 0.1);
+            border-radius: 20px;
+            padding: 0 8px;
+        }
+
+        .tag-0 {
+            color: #FF953D;
+            background: rgba(255, 149, 61, 0.1);
+        }
+    }
+
+    .stage-info {
+        padding: 8px 0 2px;
+        border-top: 1px solid #f5f5f5;
+    }
+}
+
+.form-item {
+    display: flex;
+    font-size: 14px;
+    color: #767676;
+    margin-top: 4px;
+
+    .area-btn {
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        padding: 0 10px;
+        color: #767676;
+    }
+
+    .area-btn-right {
+        padding-right: 4px;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    .item-name {
+        padding-right: 26px;
+        color: rgba(0, 0, 0, 0.2);
+    }
+
+    .item-text {
+        flex: 1;
+        line-height: 21px;
+
+        &.light-text {
+            color: #2199F8;
+        }
+    }
+    .area-text {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+    }
+}
+
+.light-text {
+    color: #2199F8;
+}
+
+.stage-tabs {
+    display: inline-flex;
+    gap: 8px;
+    margin-top: 8px;
+
+    .tab-pill {
+        padding: 0 8px;
+        font-size: 14px;
+        text-align: center;
+        border-radius: 2px;
+        height: 28px;
+        line-height: 28px;
+        color: #767676;
+        background: rgba(171, 171, 171, 0.1);
+
+        &.active {
+            background: rgba(33, 153, 248, 0.1);
+            color: #2199F8;
+        }
+    }
+}
+
+.prescription-wrap {
+    margin-top: 10px;
+    overflow: hidden;
+
+    .prescription-title {
+        padding: 8px 10px;
+        font-size: 13px;
+        font-weight: 500;
+        border-bottom: 1px solid rgba(225, 225, 225, 0.6);
+    }
+}
+
+.prescription-table {
+    font-size: 12px;
+    text-align: center;
+    border-radius: 6px;
+    border: 1px solid rgba(225, 225, 225, 0.6);
+
+    .table-header {
+        display: flex;
+        background: rgba(171, 171, 171, 0.1);
+        padding: 9px 6px;
+        color: #767676;
+    }
+
+    .table-row {
+        display: flex;
+        padding: 12px 6px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+        color: rgba(0, 0, 0, 0.76);
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    .col {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 2px;
+    }
+
+    .col-type {
+        width: 56px;
+    }
+
+    .col-name {
+        flex: 1;
+    }
+
+    .col-ratio {
+        width: 64px;
+    }
+
+    .col-dose {
+        width: 64px;
+    }
+}
+
+.prescription-remark {
+    margin-top: 8px;
+    padding: 7px 10px;
+    border-radius: 6px;
+    color: #767676;
+    background: rgba(171, 171, 171, 0.1);
+    line-height: 21px;
+}
+
+
+.photo-img-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    ::v-deep {
+        .PhotoConsumer {
+            width: 31%;
+            height: 92px;
+        }
+    }
+
+    .photo-img {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        box-sizing: border-box;
+        border: 2px solid transparent;
+        border-radius: 8px;
+        overflow: hidden;
+
+        .fail-icon {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.6);
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            gap: 4px;
+            .fail-icon-text {
+                color: #FF943D;
+                font-size: 12px;
+            }
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+            border-radius: 8px;
+            object-fit: cover;
+        }
+    }
+}
+
+.execute-action {
+    display: flex;
+    align-items: center;
+    // justify-content: center;
+    justify-content: space-between;
+    gap: 16px;
+
+    .action-item {
+        padding: 0 26px;
+        height: 40px;
+        line-height: 40px;
+        border-radius: 26px;
+        box-sizing: border-box;
+        font-size: 14px;
+
+        &.second {
+            background: #ffffff;
+            border: 0.5px solid rgba(153, 153, 153, 0.5);
+            color: #999999;
+        }
+
+        &.primary {
+            background: linear-gradient(180deg, #8ACBFF 0%, #2199F8 100%);
+            color: #ffffff;
+        }
+    }
+    &.no-share {
+        justify-content: center;
+    }
+}
+
+.fixed-btn-wrap {
+    display: flex;
+    // justify-content: center;
+    justify-content: space-between;
+
+    &.center-btn {
+        justify-content: center;
+    }
+
+    position: fixed;
+    bottom: 0px;
+    left: 0;
+    right: 0;
+    background: #fff;
+    padding: 10px 12px 36px 12px;
+    box-sizing: border-box;
+    // box-shadow: 0 -2px 8px rgba(15, 35, 52, 0.06);
+    box-shadow: 2px 2px 4.5px 0px #00000066;
+
+    .fixed-btn {
+        min-width: 110px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 20px;
+        background: linear-gradient(180deg, #70bffe, #2199f8);
+        color: #ffffff;
+        font-size: 14px;
+    }
+}
+
+.map-popup {
+    width: 92%;
+    // max-width: 420px;
+    border-radius: 8px;
+    padding: 12px;
+    box-sizing: border-box;
+}
+</style>

src/views/old_mini/work_detail/index.vue

@@ -122,7 +122,7 @@
                     <!-- 农事凭证 -->
                     <div class="work-info photo-box" v-if="prescription.cropAlbum && prescription.cropAlbum.length">
                         <div class="photo-title">农事凭证</div>
-                        <div class="tips-text" >由于系统审核，您照片拍摄位置与农场相差超 3 公里，请在农场现场使用水印相机重新拍摄上传，谢谢配合</div>
+                        <div class="tips-text" v-if="detail?.imageAuditRejectReason">{{ detail?.imageAuditRejectReason }}</div>
                         <div class="photo-sub-title" v-if="info?.appType === 1">来自于 {{ detail?.executorOrganizationName || "--" }}</div>
                         <div class="photo-img-wrap">
                             <photo-provider :photo-closable="true">
@@ -414,7 +414,29 @@ const handleExecute = () => {
     //     ElMessage.warning('未到农事执行时间，无法溯源认证');
     //     return;
     // }
-    executePopupRef.value.openPopup(miniJson.value.recordId);
+    const evidenceList = normalizeCropAlbum(
+        detail.value?.confirmPicture?.length
+            ? detail.value.confirmPicture
+            : detail.value.executeEvidence
+    ).map((item) => item.filename);
+    const auditStatusList = Array.isArray(detail.value?.executeEvidenceAuditStatus)
+        ? detail.value.executeEvidenceAuditStatus
+        : [];
+
+    let imgs = []
+    evidenceList.forEach((item, index) => {
+        imgs.push({
+            url: base_img_url2 + item,
+            status: auditStatusList[index] === 2 ? 'failed' : 'success',
+            message: auditStatusList[index] === 2 ? '审核失败' : '审核成功',
+        });
+    });
+    console.log("evideimgsnceList", imgs);
+    executePopupRef.value.openPopup(miniJson.value.recordId, {
+        evidenceList: imgs,
+        executeDate: detail.value.executeDate,
+        executorOrganizationName: detail.value.executorOrganizationName,
+    });
 };