Pārlūkot izejas kodu

feat:添加复合成效上传功能和农事成效里面的上传前后样式

wangsisi 1 nedēļu atpakaļ
vecāks
revīzija
8cfef22f10

+ 9 - 4
src/views/old_mini/modify_work/reviewWork.vue

@@ -87,6 +87,9 @@
                         <div class="result-text">
                             通过精准农业技术的应用,作物产量实现了两位数的增长,病虫害的发生率大幅下降,土壤肥力的提升
                         </div>
+                        <!-- <div class="result-text time-text">
+                            距离农事执行已 15 天,请抓紧时间上传照片!系统为您生成农事成效分析!
+                        </div> -->
                     </div>
                     <div class="recheck-box" v-if="workItem?.farmId">
                         <div class="recheck-ablum">
@@ -539,9 +542,6 @@ function toUpload() {
                     color: #2199f8;
                 }
             }
-            .result-box {
-                padding-bottom: 12px;
-            }
             .info-box {
                 &.subject-content {
                     border: none;
@@ -734,7 +734,6 @@ function toUpload() {
                     }
                 }
                 .comment {
-                    // margin-top: 12px;
                     .user-info {
                         display: flex;
                         align-items: center;
@@ -756,6 +755,12 @@ function toUpload() {
                 color: #666666;
                 line-height: 18px;
             }
+            .time-text{
+                color: #FF953D;
+                padding: 4px 12px;
+                border-radius: 5px;
+                background: rgba(255, 149, 61, 0.1);
+            }
             .img-list + .img-list,
             .upload-wrap {
                 margin-top: 12px;

+ 107 - 23
src/views/old_mini/monitor/subPages/reviewResults.vue

@@ -5,7 +5,13 @@
             <div class="expert-content" ref="containerRef">
                 <div v-for="(section, index) in contentData" :key="index" class="content-section">
                     <div class="section-id" :id="section.targetId"></div>
-                    <record-item :record-item-data="section" :onlyRecipeName="true" :showContent="true" class="recipe-item" @click="handleClick(section, index)">
+                    <record-item
+                        :record-item-data="section"
+                        :onlyRecipeName="true"
+                        :showContent="true"
+                        class="recipe-item"
+                        @click="handleClick(section, index)"
+                    >
                         <template #title>
                             <div class="box-title">
                                 <div class="title-l">
@@ -21,23 +27,38 @@
                         <template #content>
                             <!-- 未上传图片时显示 -->
                             <div class="content-info" v-if="index === 0 || index === 2">
-                                <div class="info-line">执行时间:<span class="info-val">{{ section.executeDate || '2025年11月11日' }}</span></div>
-                                <div class="info-line">药物处方:<span class="info-val">{{ getPrescriptionInfo(section) }}</span></div>
+                                <div class="info-line">
+                                    执行时间:<span class="info-val">{{
+                                        section.executeDate || "2025年11月11日"
+                                    }}</span>
+                                </div>
+                                <div class="info-line">
+                                    药物处方:<span class="info-val">{{ getPrescriptionInfo(section) }}</span>
+                                </div>
                                 <div class="reminder-box">
                                     距离农事执行已<span class="highlight-number">15</span>天,请抓紧时间上传照片!
                                 </div>
                             </div>
                             <!-- 已上传图片时显示 -->
                             <div class="content-info" v-else>
-                                <div class="info-line">药物处方:<span class="info-val">{{ getPrescriptionInfo(section) }}</span></div>
-                                <div class="review-title info-line">复核成效
+                                <div class="info-line">
+                                    药物处方:<span class="info-val">{{ getPrescriptionInfo(section) }}</span>
+                                </div>
+                                <div class="review-title info-line">
+                                    复核成效
                                     <div class="info-val">
                                         通过精准农业技术的应用,作物产量实现了两位数的增长,病虫害的发生率大幅下降,土壤肥力的提升
                                     </div>
                                 </div>
                                 <div class="review-image">
-                                    <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
-                                    <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
+                                    <img
+                                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+                                        alt=""
+                                    />
+                                    <img
+                                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+                                        alt=""
+                                    />
                                 </div>
                             </div>
                         </template>
@@ -45,8 +66,14 @@
                             <div class="action-group" v-if="index === 0 || index === 2">
                                 <div class="action-l">查看详情</div>
                                 <div class="action-r">
-                                    <div class="action-item warning-item" :class="{ 'has-applied': section.hasApplied }" @click="handleApply(section, index)">{{ section.hasApplied ? '已发起需求' : '发起需求' }}</div>
-                                    <div class="action-item primary-item">上传照片</div>
+                                    <div
+                                        class="action-item warning-item"
+                                        :class="{ 'has-applied': section.hasApplied }"
+                                        @click="handleApply(section, index)"
+                                    >
+                                        {{ section.hasApplied ? "已发起需求" : "发起需求" }}
+                                    </div>
+                                    <div class="action-item primary-item" @click.stop="handleUploadPhoto">上传照片</div>
                                 </div>
                             </div>
                         </template>
@@ -57,10 +84,21 @@
     </div>
     <!-- 需求发送成功弹窗 -->
     <popup v-model:show="showApplyPopup" round class="apply-popup">
-        <img class="check-icon" src="@/assets/img/home/right.png" alt="">
+        <img class="check-icon" src="@/assets/img/home/right.png" alt="" />
         <div class="apply-text">需求发送成功</div>
         <div class="apply-btn" @click="showApplyPopup = false">我知道了</div>
     </popup>
+
+    <!-- 上传照片弹窗 -->
+    <popup v-model:show="showUpload" closeable :close-on-click-overlay="false" class="upload-popup">
+        <div class="upload-content">
+            <div class="upload-title">上传照片</div>
+            <upload :textShow="true"> </upload>
+            <div class="upload-footer">
+                <div class="btn" @click="handleUploadConfirm">确认上传</div>
+            </div>
+        </div>
+    </popup>
 </template>
 <script setup>
 import { ref } from "vue";
@@ -68,11 +106,25 @@ import recordItem from "@/components/recordItem.vue";
 import { Popup } from "vant";
 import customHeader from "@/components/customHeader.vue";
 import { useRouter } from "vue-router";
+import upload from "@/components/upload";
 
 const showApplyPopup = ref(false);
+const showUpload = ref(false);
 const containerRef = ref(null);
 const router = useRouter();
 
+// 上传照片处理函数
+const handleUploadPhoto = () => {
+    showUpload.value = true;
+};
+
+// 确认上传处理函数
+const handleUploadConfirm = () => {
+    // 这里可以添加上传逻辑
+    console.log("确认上传");
+    showUpload.value = false;
+};
+
 const handleApply = (section, index) => {
     // 更新当前项的发起需求状态
     showApplyPopup.value = true;
@@ -1194,23 +1246,23 @@ const contentData = ref([
                 padding-top: 8px;
                 .info-line {
                     font-size: 12px;
-                    color: #BBBBBB;
+                    color: #bbbbbb;
                     margin-bottom: 8px;
                     line-height: 1.4;
-                    .info-val{
+                    .info-val {
                         color: #666666;
                     }
                 }
                 .review-title {
-                    .info-val{
+                    .info-val {
                         margin-top: 5px;
                     }
                 }
-                .review-image{
+                .review-image {
                     display: flex;
                     align-items: center;
                     gap: 8px;
-                    img{
+                    img {
                         flex: 1;
                         height: 82px;
                         object-fit: cover;
@@ -1222,7 +1274,7 @@ const contentData = ref([
                     border-radius: 4px;
                     padding: 6px 8px;
                     font-size: 12px;
-                    color: #2E2E2E;
+                    color: #2e2e2e;
                     line-height: 1.4;
                     margin-top: 8px;
                     .highlight-number {
@@ -1231,8 +1283,8 @@ const contentData = ref([
                     }
                 }
             }
-            .action-r{
-                color: #1D2129;
+            .action-r {
+                color: #1d2129;
             }
             .action-group {
                 display: flex;
@@ -1268,7 +1320,7 @@ const contentData = ref([
                             color: #ff831d;
                             &.has-applied {
                                 background: transparent;
-                                color: #AFAFAF;
+                                color: #afafaf;
                                 pointer-events: none;
                             }
                         }
@@ -1299,26 +1351,58 @@ const contentData = ref([
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    .check-icon{
+    .check-icon {
         width: 68px;
         height: 68px;
         margin-bottom: 12px;
     }
-    .apply-text{
+    .apply-text {
         font-size: 24px;
         font-weight: 500;
         margin-bottom: 32px;
         text-align: center;
     }
-    .apply-btn{
+    .apply-btn {
         width: 100%;
         box-sizing: border-box;
         padding: 8px;
         border-radius: 25px;
         font-size: 16px;
-        background: #2199F8;
+        background: #2199f8;
         color: #fff;
         text-align: center;
     }
 }
+
+.upload-popup {
+    width: 90%;
+    box-sizing: border-box;
+    padding: 20px 18px;
+    background: linear-gradient(0deg, #ffffff 70%, #d1ebff 100%);
+    border-radius: 10px;
+
+    .upload-content {
+        .upload-title {
+            font-size: 18px;
+            font-weight: 500;
+            text-align: center;
+            margin-bottom: 12px;
+        }
+        .upload-footer {
+            margin-top: 20px;
+            display: flex;
+            justify-content: center;
+
+            .btn {
+                width: 80%;
+                padding: 12px;
+                background: #2199f8;
+                border-radius: 25px;
+                color: #fff;
+                font-size: 16px;
+                text-align: center;
+            }
+        }
+    }
+}
 </style>