Bläddra i källkod

feat:添加转发聊天页面和修改报告详情页面

wangsisi 3 dagar sedan
förälder
incheckning
b4bd448f62

+ 6 - 0
src/router/globalRoutes.js

@@ -194,4 +194,10 @@ export default [
         name: "ReviewWork",
         component: () => import("@/views/old_mini/modify_work/reviewWork.vue"),
     },
+    // 分享好友页面
+    {
+        path: "/share_page",
+        name: "SharePage",
+        component: () => import("@/views/old_mini/modify_work/sharePage.vue"),
+    },
 ];

+ 7 - 1
src/views/old_mini/modify_work/completedWork.vue

@@ -139,7 +139,7 @@
                 </div>
             </div>
             <div class="fixed-btn-wrap">
-                <div class="fixed-btn orange" v-if="curRole == 0">发起需求</div>
+                <div class="fixed-btn orange" v-if="curRole == 0" @click="handleDemand">发起需求</div>
                 <div class="fixed-btn" v-if="curRole == 0" @click="handleOk">{{ status === 0 ? "我已完成" : "立即复核" }}</div>
             </div>
         </div>
@@ -154,7 +154,9 @@ import { onMounted, ref } from "vue";
 import NewFarmMap from "./newFarmMap";
 import { useStore } from "vuex";
 import offerPopup from "@/components/popup/offerPopup.vue";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 const store = useStore();
 
 // 角色
@@ -175,6 +177,10 @@ const handleOk = () =>{
     }
 }
 
+const handleDemand = () => {
+    router.push("/share_page");
+}
+
 const prescriptioData = ref({
     prescriptionList: [
         {

+ 2 - 2
src/views/old_mini/modify_work/reviewWork.vue

@@ -119,7 +119,7 @@
                     </div>
                     <div class="recheck-box" v-if="workItem?.farmId">
                         <div class="recheck-ablum">
-                            <div class="img-list over-img-box">
+                            <!-- <div class="img-list over-img-box">
                                 <album-carousel7d
                                     :key="1"
                                     :farmId="workItem.farmId"
@@ -128,7 +128,7 @@
                                         executeDate: workItem.executeDate,
                                     }"
                                 ></album-carousel7d>
-                            </div>
+                            </div> -->
                             <div class="img-list" v-if="!workItem.reviewImage.length && workItem.activeStatus === 0">
                                 <div
                                     class="recheck-text-wrap no-events"

+ 178 - 0
src/views/old_mini/modify_work/sharePage.vue

@@ -0,0 +1,178 @@
+<template>
+    <div class="share-page">
+        <custom-header name="选择发送到" />
+        <div class="share-content">
+            <div class="search-wrap">
+                <div class="search-input">
+                    <el-input v-model="search" placeholder="搜索昵称">
+                        <template #prefix>
+                            <el-icon><Search /></el-icon>
+                        </template>
+                    </el-input>
+                </div>
+            </div>
+            <div class="recent-chat-wrap">
+                <div class="recent-title">最近聊天</div>
+                <div class="recent-list">
+                    <div class="recent-item" v-for="(item, index) in recentList" :key="index">
+                        <img class="recent-img" src="" alt="" />
+                        <div class="recent-name">{{ item.name }}</div>
+                        <checkbox class="recent-checkbox" v-model="item.checked"></checkbox>
+                    </div>
+                </div>
+            </div>
+            <div class="chat-list">
+                <div class="chat-item" v-for="(item, index) in chatList" :key="index">
+                    <checkbox @change="changeCheck(item)" v-model="item.checked"></checkbox>
+                    <div class="chat-info" :class="{'checked': item.checked}">
+                        <img class="chat-img" src="" alt="" />
+                        <span class="chat-name">{{ item.name }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="bottom-btn" v-show="checkedList.length > 0">
+        <div class="btn">取消</div>
+        <div class="btn primary">完成</div>
+    </div>
+</template>
+
+<script setup>
+import customHeader from "@/components/customHeader.vue";
+import { Checkbox } from "vant";
+import { ref } from "vue";
+
+const search = ref("");
+
+const chatList = ref([
+    {
+        name: "张三",
+        checked: false,
+    },
+    {
+        name: "张三",
+        checked: false,
+    },
+]);
+
+const recentList = ref([
+    {
+        name: "农资11",
+        checked: false,
+    },
+    {
+        name: "农资12",
+        checked: false,
+    },
+]);
+
+const checkedList = ref([]);
+const changeCheck = (item) => {
+    console.log(item,chatList.value);
+    checkedList.value = chatList.value.filter((item) => item.checked);
+};
+</script>
+
+<style lang="scss" scoped>
+.share-page {
+    width: 100%;
+    height: 100vh;
+    background-color: #f5f7fb;
+    .share-content {
+        .search-wrap {
+            padding: 20px 20px 0 20px;
+            .search-input {
+                width: 100%;
+                ::v-deep {
+                    .el-input__wrapper {
+                        box-shadow: none;
+                        border-radius: 25px;
+                    }
+                }
+            }
+        }
+        .recent-chat-wrap {
+            padding: 0 20px 20px 20px;
+            .recent-title {
+                font-weight: 500;
+                margin: 12px 0;
+            }
+            .recent-list {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 10px;
+                .recent-item {
+                    position: relative;
+                    .recent-img {
+                        width: 54px;
+                        height: 54px;
+                        border-radius: 2px;
+                        background: red;
+                    }
+                    .recent-name {
+                        text-align: center;
+                        margin-top: 5px;
+                    }
+                    .recent-checkbox{
+                        position: absolute;
+                        right: 3px;
+                        top: 3px;
+                    }
+                }
+            }
+        }
+        .chat-list {
+            background-color: #fff;
+            padding-top: 6px;
+            .chat-item {
+                padding: 10px 20px;
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                .chat-info {
+                    display: flex;
+                    align-items: center;
+                    gap: 10px;
+                    .chat-img {
+                        width: 46px;
+                        height: 46px;
+                        border-radius: 2px;
+                    }
+                    &.checked {
+                        .chat-name {
+                            color: #2199F8;
+                            font-weight: 500;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.bottom-btn {
+    position: fixed;
+    bottom: 10px;
+    left: 20px;    
+    width: calc(100% - 40px);
+    display: flex;
+
+    .btn {
+        flex: 1;
+        text-align: center;
+        color: #2199F8;
+        padding: 10px;
+        border-radius: 25px;
+        border: 1px solid #2199F8;
+        font-size: 16px;
+        &.primary{
+            background: #2199F8;
+            color: #fff;
+        }
+    }
+    .btn + .btn {
+        margin-left: 15px;
+    }
+}
+</style>

+ 92 - 17
src/views/old_mini/report_detail/index.vue

@@ -22,7 +22,7 @@
                     </div>
                 </div>
             </div>
-            <tabs v-model:active="active" class="tabs" scrollspy>
+            <tabs v-model:active="active" class="tabs" scrollspy sticky offset-top="40" background="#f5f7fb">
                 <tab title="果园总览" class="tab-item">
                     <div class="item-title">果园总览</div>
                     <div class="item-content">
@@ -34,33 +34,69 @@
                             目前XX%的树体暂未萌动新梢,需要进行剪枝农事,提高树体光合效率与通风效率。
                         </div>
                     </div>
+                    <div class="item-content">
+                        <div class="photo-list">
+                            <div class="img-item" v-for="(item, index) in 6" :key="index">
+                                <img
+                                    class="photo-item"
+                                    src="https://birdseye-img-ali-cdn.sysuimars.com/16926861-1e20-4cbd-8bf2-90208db5a2d0/806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_202509010800_001_806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_20250901080536_0045_V_code-ws0fsmge97gh.jpeg"
+                                    alt=""
+                                />
+                            </div>
+                        </div>
+                        <div class="list-text" @click="handleSeeMore">点击查看更多</div>
+                    </div>
                 </tab>
                 <tab title="整体园相" class="tab-item">
                     <div class="item-title">整体园相</div>
                     <div class="item-content">
-                        <div class="item-text">果园面积共XX亩,共有XX棵生产树。</div>
-                        <div class="item-text">
-                            本次飞巡拍摄了XX张照片,包括了XX棵树,目前为施用根部有机肥阶段,根据树体冠幅大小,果园预计施用有机肥XXkg。
+                        <div class="item-name">透光率</div>
+                        <div class="item-value">
+                            透光率体现树体自身郁闭程度,当前XX%的树体透光性较差,可能造成整体减产XX%,需立即执行剪枝农事;XX%的树体透光正常,建议继续保持现有管理措施并及时巡园
                         </div>
-                        <div class="item-text">
-                            目前XX%的树体暂未萌动新梢,需要进行剪枝农事,提高树体光合效率与通风效率。
+                    </div>
+                    <div class="item-content">
+                        <div class="item-name">通风率</div>
+                        <div class="item-value">
+                            透光率体现树体自身郁闭程度,当前XX%的树体透光性较差,可能造成整体减产XX%,需立即执行剪枝农事;XX%的树体透光正常,建议继续保持现有管理措施并及时巡园。
+                        </div>
+                        <div class="map-wrap">
+                            <img class="map-img" src="@/assets/img/home/map.png" alt="" />
+                            <div class="map-text">剪枝农事地图</div>
                         </div>
                     </div>
                 </tab>
                 <tab title="营养管理" class="tab-item">
                     <div class="item-title">营养管理</div>
                     <div class="item-content">
-                        <div class="item-text">果园面积共XX亩,共有XX棵生产树。</div>
-                        <div class="item-text">
-                            本次飞巡拍摄了XX张照片,包括了XX棵树,目前为施用根部有机肥阶段,根据树体冠幅大小,果园预计施用有机肥XXkg
+                        <div class="item-name">根肥</div>
+                        <div class="item-value">
+                            透光率体现树体自身郁闭程度,当前XX%的树体透光性较差,可能造成整体减产XX%,需立即执行剪枝农事;XX%的树体透光正常,建议继续保持现有管理措施并及时巡园
                         </div>
-                        <div class="item-text">
-                            目前XX%的树体暂未萌动新梢,需要进行剪枝农事,提高树体光合效率与通风效率。
+                        <div class="map-wrap">
+                            <img class="map-img" src="@/assets/img/home/map.png" alt="" />
+                            <div class="map-text">根肥农事地图</div>
+                        </div>
+                    </div>
+                </tab>
+                <tab title="病虫管理" class="tab-item">
+                    <div class="item-title">病虫管理</div>
+                    <div class="item-content">
+                        <div class="item-value">
+                            透光率体现树体自身郁闭程度,当前XX%的树体透光性较差,可能造成整体减产XX%,需立即执行剪枝农事;XX%的树体透光正常,建议继续保持现有管理措施并及时巡园。
+                        </div>
+                        <div class="map-wrap">
+                            <img class="map-img" src="@/assets/img/home/map.png" alt="" />
+                            <div class="map-text">防虫农事地图</div>
                         </div>
                     </div>
                 </tab>
-                <tab title="病虫管理">内容 3</tab>
-                <tab title="农事记录">内容 3</tab>
+                <tab title="农事记录" class="tab-item">
+                    <div class="item-title">农事记录</div>
+                    <div class="item-content">
+                        农事记录
+                    </div>
+                </tab>
             </tabs>
         </div>
         <!-- 底部 -->
@@ -86,8 +122,10 @@
 import customHeader from "@/components/customHeader.vue";
 import { Icon, Tab, Tabs } from "vant";
 import { ref } from "vue";
-import reportPopup from "@/components/reportPopup.vue"
+import reportPopup from "@/components/reportPopup.vue";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 const value = ref("");
 
 const options = [
@@ -115,10 +153,14 @@ const options = [
 
 const active = ref(0);
 
-const reportPopupRef = ref(null)
+const reportPopupRef = ref(null);
 function sharePopup() {
-    reportPopupRef.value.handleShow()
+    reportPopupRef.value.handleShow();
 }
+
+const handleSeeMore = () => {
+    router.push("/farm_photo");
+};
 </script>
 
 <style lang="scss" scoped>
@@ -187,8 +229,20 @@ function sharePopup() {
         }
         .tabs {
             margin-top: 10px;
+            ::v-deep {
+                .van-tabs__nav {
+                    height: 70%;
+                    .van-tab--active{
+                        color: #2199F8;
+                        background: rgba(33, 153, 248, 0.2);
+                        border-radius: 25px;
+                    }
+                }
+                .van-tabs__line{
+                    display: none;
+                }
+            }
             .tab-item {
-                margin-top: 10px;
                 border-radius: 14px;
                 padding: 12px;
                 background: #fff;
@@ -217,6 +271,27 @@ function sharePopup() {
                     background: rgba(238, 238, 238, 0.3);
                     padding: 10px;
                     line-height: 21px;
+                    .photo-list {
+                        display: flex;
+                        align-items: center;
+                        width: 100%;
+                        overflow: auto;
+                        padding-bottom: 10px;
+                        .photo-item {
+                            width: 92px;
+                            height: 92px;
+                            border-radius: 8px;
+                            object-fit: cover;
+                        }
+                        .img-item + .img-item {
+                            margin-left: 12px;
+                        }
+                    }
+                    .list-text {
+                        text-align: center;
+                        color: rgba(0, 0, 0, 0.5);
+                        padding-top: 2px;
+                    }
                     .item-name {
                         font-weight: 500;
                     }