fix: 农事详情

src/components/upload.vue

@@ -10,7 +10,7 @@
       <span>上传照片可精准预测最佳病虫防治时间</span>
     </div>
     <div class="upload-content">
-      <img v-if="exampleImg" @click="showExample" class="example" src="@/assets/img/home/example-4.png" alt="" />
+      <img v-if="exampleImg" @click="showExample(null)" class="example" src="@/assets/img/home/example-4.png" alt="" />
       <uploader class="uploader" :class="{ 'uploader-list': exampleImg }" v-model="fileList"
         :multiple="props.maxCount > 1" :max-count="props.maxCount" :after-read="afterRead" @delete="deleteImg">
         <template v-if="exampleImg">

src/views/old_mini/agri_record/subPages/statusDetail.vue

@@ -2,7 +2,7 @@
     <div class="status-detail">
         <custom-header name="农事详情" isGoBack @goback="handleClose"></custom-header>
 
-        <div class="detail-content">
+        <div class="detail-content" :class="{ 'has-group': isLocked }">
             <!-- 橙色状态头部 -->
             <div class="status-header" :class="'status-' + status">
                 <div class="status-left">
@@ -41,58 +41,77 @@
                             <span class="info-value">{{ prescriptionData.executeTime }}</span>
                         </div>
                         <div class="info-item">
-                            <span class="info-label">施用方式</span>
-                            <span class="info-value">{{ prescriptionData.applyMethod }}</span>
+                            <span class="info-label">农事建议</span>
+                            <span class="info-value">{{ prescriptionData.advice }}</span>
                         </div>
                     </div>
 
                     <div class="card-actions">
                         <div class="action-btn" @click="handleViewPrescription">
-                            {{ showPrescription ? '收起药物处方' : '查看药物处方' }}
+                            <el-icon class="action-btn-icon" :class="{ 'rotate': showPrescription }" :size="16"><DArrowRight /></el-icon>
+                            药物处方
                         </div>
                         <div class="action-btn" @click="handleViewArea">
-                            {{ showMapArea ? '收起执行区域' : '查看执行区域' }}
+                            <el-icon class="action-btn-icon" :class="{ 'rotate': showMapArea }" :size="16"><DArrowRight /></el-icon>
+                            执行区域
                         </div>
                     </div>
 
                     <transition name="prescription-slide">
                         <div class="new-wrap"
+                            :class="{'has-lock': isLocked}"
                             v-show="showPrescription && detailData?.prescriptionList?.length && detailData?.prescriptionList[0]?.pesticideFertilizerList?.length > 0">
-                            <div class="new-title">
-                                <div class="title-1">
-                                    <div class="table-name">药肥类型</div>
-                                </div>
-                                <div class="title-2">
-                                    <div class="table-name">药肥名称</div>
-                                </div>
-                                <div class="title-4">
-                                    <div class="table-name">药肥配比</div>
-                                </div>
-                                <div class="title-5">
-                                    <div class="table-name">单亩用量</div>
-                                </div>
+                            
+                            <div class="info-item pb-8">
+                                <span class="info-label">施用方式</span>
+                                <span class="info-value">{{ prescriptionData.applyMethod }}</span>
                             </div>
-                            <div class="new-table-wrap"
-                                v-for="(prescriptionItem, prescriptionI) in detailData?.prescriptionList"
-                                :key="prescriptionI">
-                                <div class="new-prescription"
-                                    v-for="(subP, subI) in prescriptionItem.pesticideFertilizerList" :key="subI">
-                                    <div class="new-table">
-                                        <div class="line-l">
-                                            <div class="line-1 title-1">{{ subP.typeName }}</div>
-                                            <div class="line-2">{{ subP.defaultName || subP.pesticideFertilizerName }}
+
+                            <div class="new-wrap-inner">
+                                <div class="new-title">
+                                    <div class="title-1">
+                                        <div class="table-name">药肥类型</div>
+                                    </div>
+                                    <div class="title-2">
+                                        <div class="table-name">药肥名称</div>
+                                    </div>
+                                    <div class="title-4">
+                                        <div class="table-name">药肥配比</div>
+                                    </div>
+                                    <div class="title-5">
+                                        <div class="table-name">单亩用量</div>
+                                    </div>
+                                </div>
+                                <div class="new-table-wrap"
+                                    v-for="(prescriptionItem, prescriptionI) in detailData?.prescriptionList"
+                                    :key="prescriptionI">
+                                    <div class="new-prescription"
+                                        v-for="(subP, subI) in prescriptionItem.pesticideFertilizerList" :key="subI">
+                                        <div class="new-table">
+                                            <div class="line-l">
+                                                <div class="line-1 title-1">{{ subP.typeName }}</div>
+                                                <div class="line-2">{{ subP.defaultName || subP.pesticideFertilizerName }}
+                                                </div>
                                             </div>
-                                        </div>
-                                        <div class="line-r">
-                                            <div class="line-3">
-                                                <div class="sub-line title-4">{{ quotationData.executionMethod === 1 ?
-                                                    subP.ratio2 : subP.ratio }}倍</div>
-                                                <div class="sub-line title-5">{{ quotationData.executionMethod === 1 ?
-                                                    subP.muUsage2 : subP.muUsage }}{{ subP.unit }}</div>
+                                            <div class="line-r">
+                                                <div class="line-3">
+                                                    <div class="sub-line title-4">{{ quotationData.executionMethod === 1 ?
+                                                        subP.ratio2 : subP.ratio }}倍</div>
+                                                    <div class="sub-line title-5">{{ quotationData.executionMethod === 1 ?
+                                                        subP.muUsage2 : subP.muUsage }}{{ subP.unit }}</div>
+                                                </div>
                                             </div>
                                         </div>
+                                        <div class="note-text" v-if="subP.remark">{{ subP.remark }}</div>
                                     </div>
-                                    <div class="note-text" v-if="subP.remark">{{ subP.remark }}</div>
+                                </div>
+                            </div>
+
+                            <!-- 带锁 -->
+                            <div class="lock-wrap" v-if="isLocked">
+                                <img class="lock-img" src="@/assets/img/home/lock.png" alt="">
+                                <div class="lock-text">
+                                    加入下方指导群可解锁
                                 </div>
                             </div>
                         </div>
@@ -113,9 +132,20 @@
                         <div class="forward-link" @click="handleForward">转发操作指南</div>
                     </div>
                     <div class="video-wrap">
-                        <video src="https://birdseye-img-ali-cdn.sysuimars.com/bbs_post/video/1767872309467.mp4"
+                        <photo-provider :photo-closable="true">
+                            <photo-consumer
+                                :src="guideSrc"
+                            >
+                            <img class="video-img" :src="guideSrc" alt="">
+                            </photo-consumer>
+                        </photo-provider>
+                        <div class="video-play-icon van-multi-ellipsis--l2">
+                            内膛喷施内膛喷施内膛喷施内膛喷施内膛喷施内膛喷施内膛喷施内膛喷施内膛喷施内膛喷施内膛喷施内膛喷施内膛喷施...
+                            <span class="expand-text">展开详细操作指南</span>
+                        </div>
+                        <!-- <video src="https://birdseye-img-ali-cdn.sysuimars.com/bbs_post/video/1767872309467.mp4"
                             controls style="width: 100%; max-width: 100%; height: auto; border-radius: 8px"
-                            preload="metadata" playsinline webkit-playsinline x5-playsinline></video>
+                            preload="metadata" playsinline webkit-playsinline x5-playsinline></video> -->
                     </div>
                 </div>
 
@@ -125,18 +155,18 @@
                         <div class="card-title-wrap">
                             <div class="card-title">执行档案</div>
                         </div>
-                        <div class="forward-link" @click="handleShowQrCodePopup(1)">邀请拍照</div>
+                        <!-- <div class="forward-link" @click="handleShowQrCodePopup(1)">邀请拍照</div> -->
                     </div>
                     <div class="exe-upload">
                         <upload :maxCount="10" ref="uploadRef" exampleImg class="upload-wrap" @handleUpload="handleUpload">
                             <img class="example" src="@/assets/img/home/plus.png" alt="" />
                         </upload>
                     </div>
-                    <div class="no-text">暂未检测到拍照</div>
+                    <!-- <div class="no-text">暂未检测到拍照</div> -->
                 </div>
 
                 <!-- 执行轨迹 -->
-                <div class="card-box execution-file">
+                <!-- <div class="card-box execution-file">
                     <div class="card-header">
                         <div class="card-title-wrap">
                             <div class="card-title">执行轨迹</div>
@@ -149,8 +179,28 @@
                         </upload>
                     </div>
                     <div class="no-text">暂未检测到工人执行</div>
-                </div>
+                </div> -->
             </div>
+
+            <!-- 群 -->
+             <div class="group-wrap" v-if="isLocked">
+                <div class="group-left">
+                    <el-avatar :size="34" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
+                    <div class="group-name">
+                        <div class="name-text">加入冼老师种植群</div>
+                        <div class="group-desc">每日农情打卡，享一对一专家指导</div>
+                    </div>
+                </div>
+                <div class="group-right">
+                    <photo-provider :photo-closable="true">
+                        <photo-consumer
+                            :src="groupSrc"
+                        >
+                        <img class="group-img" :src="groupSrc" alt="">
+                        </photo-consumer>
+                    </photo-provider>
+                </div>
+             </div>
         </div>
 
         <!-- 二维码弹窗 -->
@@ -202,8 +252,9 @@ const status = ref(1);
 const prescriptionData = ref({
     id: 280962,
     title: "秋梢防虫",
+    advice: "当前为秋梢期，建议巡园，重点关注叶片、嫩梢等部位",
     type: "标准农事",
-    expert: "韦帮稳",
+    expert: "冼继东",
     executeTime: "2025.02.18",
     applyMethod: "内膛喷施",
 });
@@ -212,6 +263,9 @@ const handleClose = () => {
     router.go(-1);
 };
 
+const guideSrc = ref("https://birdseye-img-ali-cdn.sysuimars.com/2d75eb9c-822a-46e1-a5da-8ac0823619bb/a9e5dcdf-ab88-4098-8a1a-51873c9afe2d/DJI_202511290800_001_a9e5dcdf-ab88-4098-8a1a-51873c9afe2d/DJI_20251129081259_0112_V_code-ws0gefzht1u7.jpeg?x-oss-process=image/resize,p_50/format,webp/quality,q_50");
+const groupSrc = ref(require("@/assets/img/home/qrcode.png"));
+
 const handleForward = async () => {
     // 转发处方：复制处方链接到剪贴板
     const url = `${window.location.origin}/#/prescription_page?id=${prescriptionData.value.id}`;
@@ -406,6 +460,8 @@ const handleShowQrCodePopup = (type) => {
     qrCodeType.value = type;
     showQrCodePopup.value = true;
 };
+
+const isLocked = ref(true);
 </script>
 
 <style lang="scss" scoped>
@@ -419,6 +475,9 @@ const handleShowQrCodePopup = (type) => {
         overflow: auto;
         box-sizing: border-box;
         padding-bottom: 10px;
+        &.has-group {
+            padding-bottom: 104px;
+        }
     }
 }
 
@@ -538,25 +597,28 @@ const handleShowQrCodePopup = (type) => {
         padding-top: 12px;
         border-top: 1px solid #f5f5f5;
 
-        .info-item {
-            display: flex;
-            align-items: center;
-            font-size: 14px;
-            color: #767676;
-            height: 24px;
+    }
+    .info-item {
+        display: flex;
+        font-size: 14px;
+        color: #767676;
+        line-height: 24px;
 
-            .info-label {
-                width: 80px;
-                color: rgba(0, 0, 0, 0.2);
-            }
+        .info-label {
+            width: 80px;
+            color: rgba(0, 0, 0, 0.2);
+        }
 
-            .info-value {
-                flex: 1;
-                color: #767676;
-            }
+        .info-value {
+            flex: 1;
+            color: #767676;
         }
     }
 
+    .pb-8 {
+        padding-bottom: 8px;
+    }
+
     .card-actions {
         display: flex;
         gap: 8px;
@@ -566,21 +628,60 @@ const handleShowQrCodePopup = (type) => {
             padding: 0 16px;
             height: 32px;
             line-height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             text-align: center;
             background: #f7f8fa;
             color: #4e5969;
             font-size: 14px;
             cursor: pointer;
+            .action-btn-icon {
+                margin-right: 4px;
+                transform: rotate(270deg);
+                transition: transform 0.3s ease;
+                &.rotate {
+                    transform: rotate(90deg);
+                }
+            }
         }
     }
 }
 
 .new-wrap {
     margin-top: 12px;
-    border-radius: 5px;
-    text-align: center;
-    border: 1px solid rgba(225, 225, 225, 0.5);
-
+    position: relative;
+    .lock-wrap {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 5px;
+        backdrop-filter: blur(4px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        .lock-img {
+            width: 50px;
+            height: 50px;
+        }
+        .lock-text {
+            margin-top: 8px;
+            font-size: 14px;
+            color: #fff;
+            padding: 0px 36px;
+            height: 22px;
+            line-height: 22px;
+            background: linear-gradient(90deg, rgba(60, 60, 60, 0) 0%, rgba(60, 60, 60, 0.5) 50%, rgba(60, 60, 60, 0) 100%);
+        }
+    }
+    .new-wrap-inner {
+        border-radius: 5px;
+        text-align: center;
+        border: 1px solid rgba(225, 225, 225, 0.5);
+    }
     .new-title {
         background: rgba(241, 241, 241, 0.4);
         border-radius: 5px 5px 0 0;
@@ -690,6 +791,19 @@ const handleShowQrCodePopup = (type) => {
 
     .video-wrap {
         padding-top: 4px;
+        .video-img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 5px;
+        }
+        .video-play-icon {
+            padding-top: 12px;
+            font-size: 14px;
+            .expand-text {
+                color: #2199f8;
+            }
+        }
     }
 }
 
@@ -723,6 +837,43 @@ const handleShowQrCodePopup = (type) => {
     padding-top: 12px;
 }
 
+.group-wrap {
+    position: fixed;
+    bottom: 30px;
+    left: 12px;
+    width: calc(100% - 24px);
+    height: 64px;
+    background: #fff;
+    box-shadow: 0px 2px 2px 0px #0000000D;
+    border-radius: 8px;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 2;
+    .group-left {
+        display: flex;
+        align-items: center;
+        .group-name {
+            padding-left: 6px;
+            font-size: 14px;
+            line-height: 18px;
+            color: rgba(81, 81, 81, 0.5);
+            .name-text {
+                color: #515151;
+            }
+        }
+    }
+    .group-img {
+        width: 44px;
+        height: 44px;
+        border-radius: 3px;
+        border: 0.59px solid rgba(221, 225, 231, 1);
+        object-fit: cover;
+    }
+}
+
 .code-popup {
     width: 330px;
     border-radius: 8px;