feat：对接首页预警和问答详情接口和服务大厅农资列表接口

src/api/modules/farm.js

@@ -57,4 +57,9 @@ module.exports = {
         url: config.base_dev_url + "image_v2/images/queryByDate",
         type: "get",
     },
+    // 获取农资店列表
+    getStoreList: {
+        url: config.base_dev_url + "z_agricultural_store/list",
+        type: "get",
+    },
 }

src/api/modules/home.js

@@ -68,4 +68,14 @@ module.exports = {
         url: config.base_dev_url + "bbs_post/page/{page}/{limit}",
         type: "get",
     },
+    //预警 气象 详情
+    warningDetail: {
+        url: config.base_dev_url + "bbs_post/detail",
+        type: "get",
+    },
+    //专家问答详情
+    expertDetail: {
+        url: config.base_dev_url + "bbs_post/topicDetail",
+        type: "get",
+    },
 }

src/router/globalRoutes.js

@@ -234,12 +234,14 @@ export default [
     {
         path: "/warning_detail",
         name: "WarningDetail",
+        meta: { keepAlive: true },
         component: () => import("@/views/old_mini/home/subPages/warningDetail.vue"),
     },
     // 专家问答详情
     {
         path: "/expert_detail",
         name: "ExpertDetail",
+        meta: { keepAlive: true },
         component: () => import("@/views/old_mini/home/subPages/expertDetail.vue"),
     },
     //认证身份页面

src/views/old_mini/agri_services/components/servicesHall.vue

@@ -23,15 +23,7 @@
             <template #header>
                 <div class="header-bar"></div>
                 <div class="select-group">
-                    <el-select class="select-item" v-model="dateValue" placeholder="Select">
-                        <el-option
-                            v-for="item in dateOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
-                    <el-select class="select-item" v-model="areaValue" placeholder="Select">
+                    <el-select class="select-item" v-model="areaValue" placeholder="距离">
                         <el-option
                             v-for="item in areaOptions"
                             :key="item.value"
@@ -39,15 +31,7 @@
                             :value="item.value"
                         />
                     </el-select>
-                    <el-select class="select-item" v-model="areaValue1" placeholder="Select">
-                        <el-option
-                            v-for="item in areaOptions1"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
-                    <el-select class="select-item" v-model="areaValue2" placeholder="Select">
+                    <el-select class="select-item" v-model="areaValue2" placeholder="服务类型">
                         <el-option
                             v-for="item in areaOptions2"
                             :key="item.value"
@@ -59,12 +43,12 @@
             </template>
             <div class="hall-content">
                 <div class="farm-list" ref="cardContentRef" :style="{ height: `${cardContentHeight}px` }">
-                    <div class="task-item" v-for="item in 10" :key="item">
+                    <div class="task-item" v-for="item in agriculturalStoreList" :key="item.id">
                         <div class="task-content">
                             <div class="content-t">
-                                <img class="content-img" src="" alt="">
+                                <img class="content-img" src="" alt="" />
                                 <div class="content-info">
-                                    <div class="content-name">河南农资农服组织 <span>5.0分</span></div>
+                                    <div class="content-name">{{ item.storeName }} <span>{{ item.score }}分</span></div>
                                     <div class="content-text">
                                         <div class="text-item van-ellipsis">
                                             <span>服务类型：</span>
@@ -72,20 +56,23 @@
                                         </div>
                                         <div class="text-item van-ellipsis">
                                             <span>服务品种：</span>
-                                            <span class="text-value">荔枝、龙眼</span>
+                                            <span class="text-value" v-for="ele in item.speciesList" :key="ele"
+                                                >{{ ele }}{{ index !== item.speciesList.length - 1 ? "、" : "" }}</span>
                                         </div>
                                         <div class="text-item van-ellipsis">
                                             <span>服务区域：</span>
-                                            <span class="text-value">广东省广州市从化区市从化区南省</span>
+                                            <span class="text-value">{{ item.address }}</span>
                                         </div>
                                         <div class="text-item van-ellipsis">
                                             <span>服务设备：</span>
-                                            <span class="text-value">无人机、水肥一体机、水肥一体机</span>
+                                            <span class="text-value" v-for="ele in item.equipmentList" :key="ele"
+                                                >{{ ele
+                                                }}{{ index !== item.equipmentList.length - 1 ? "、" : "" }}</span>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                            <div class="content-b">
+                            <!-- <div class="content-b">
                                 <div class="hot-evaluate">
                                     <span>热门评价</span>
                                     <el-icon><CaretRight /></el-icon>
@@ -94,15 +81,15 @@
                                     <span class="van-ellipsis evaluate-text">“ 很用心，服务的很到位，下次还... ”</span>
                                     <span class="more">查看更多</span>
                                 </div>
-                            </div>
+                            </div> -->
                         </div>
                         <div class="btn-group">
                             <div class="btn-group-l">查看详情</div>
                             <div class="btn-group-r">
-                                <div class="r-item">
+                                <!-- <div class="r-item">
                                     <Icon name="phone-o" />
                                     <span>电话联系</span>
-                                </div>
+                                </div> -->
                                 <div class="r-item">
                                     <Icon name="chat-o" />
                                     <span>线上沟通</span>
@@ -117,7 +104,7 @@
 </template>
 
 <script setup>
-import { FloatingPanel,Icon } from "vant";
+import { FloatingPanel, Icon } from "vant";
 import { computed, nextTick, onMounted, ref } from "vue";
 import { useStore } from "vuex";
 import IndexMap from "../map/index";
@@ -133,8 +120,6 @@ const props = defineProps({
 const store = useStore();
 const tabBarHeight = computed(() => store.state.home.tabBarHeight);
 
-// const tabBarHeight = ref(localStorage.getItem("tabBarHeight") * 1 || 50);
-
 const anchors = ref([310 + tabBarHeight.value, Math.round(1 * window.innerHeight) - 44]);
 const height = ref(anchors.value[0]);
 
@@ -146,34 +131,40 @@ onMounted(() => {
     nextTick(() => {
         indexMap.initMap(point, mapContainer.value, props.isCapital);
     });
+
+    getStoreList();
 });
 
+const agriculturalStoreList = ref([]);
+const getStoreList = () => {
+    VE_API.farm.getStoreList({ type: 1 }).then((res) => {
+        if (res.data.length) {
+            agriculturalStoreList.value = res.data.map((item) => {
+                return {
+                    ...item,
+                    speciesList: JSON.parse(item.serviceSpecies || "[]"),
+                    equipmentList: JSON.parse(item.serviceEquipment || "[]"),
+                };
+            });
+            console.log(agriculturalStoreList.value);
+        }
+    });
+};
+
 const cardContentHeight = ref(245);
 const searchValue = ref("");
 const search = () => {
     console.log(searchValue.value);
 };
-const dateValue = ref("1");
-const dateOptions = [
-    { value: "1", label: "广东省" },
-    { value: "2", label: "2" },
-    { value: "3", label: "3" },
-];
-const areaValue = ref("1");
+const areaValue = ref("");
 const areaOptions = [
-    { value: "1", label: "距离" },
-    { value: "2", label: "2" },
-    { value: "3", label: "3" },
+    { value: "1", label: "5km" },
+    { value: "2", label: "3km" },
+    { value: "3", label: "1km" },
 ];
-const areaValue1 = ref("1");
-const areaOptions1 = [
-    { value: "1", label: "评分" },
-    { value: "2", label: "2" },
-    { value: "3", label: "3" },
-];
-const areaValue2 = ref("1");
+const areaValue2 = ref("");
 const areaOptions2 = [
-    { value: "1", label: "筛选" },
+    { value: "1", label: "服务类型" },
     { value: "2", label: "2" },
     { value: "3", label: "3" },
 ];
@@ -248,44 +239,44 @@ function toPage() {
             overflow: auto;
             height: calc(100% - 60px);
             padding: 0 12px;
-            .task-item{
+            .task-item {
                 border-top: 1px solid rgba(0, 0, 0, 0.1);
                 padding-top: 10px;
-                .task-content{
-                    .content-t{
+                .task-content {
+                    .content-t {
                         display: flex;
                         gap: 8px;
-                        .content-img{
+                        .content-img {
                             width: 90px;
                             height: 90px;
                             border-radius: 8px;
                         }
-                        .content-info{
-                            .content-name{
+                        .content-info {
+                            .content-name {
                                 font-size: 16px;
                                 font-weight: 500;
-                                span{
-                                    color: #FF953D;
+                                span {
+                                    color: #ff953d;
                                 }
                             }
-                            .content-text{
+                            .content-text {
                                 font-size: 12px;
-                                color: #BBBBBB;
-                                .text-item{
+                                color: #bbbbbb;
+                                .text-item {
                                     width: calc(100% - 10px);
-                                    .text-value{
+                                    .text-value {
                                         color: #666666;
                                     }
                                 }
                             }
                         }
                     }
-                    .content-b{
+                    .content-b {
                         margin: 10px 0;
                         font-size: 12px;
                         display: flex;
                         font-weight: 500;
-                        .hot-evaluate{
+                        .hot-evaluate {
                             display: flex;
                             align-items: center;
                             color: #574300;
@@ -294,36 +285,37 @@ function toPage() {
                             background: rgba(243, 193, 29, 0.1);
                             margin-right: 8px;
                         }
-                        .evaluate-content{
+                        .evaluate-content {
                             width: calc(100% - 89px);
                             display: flex;
                             align-items: center;
-                            .evaluate-text{
+                            .evaluate-text {
                                 width: calc(100% - 62px);
                             }
-                            .more{
-                                color: #B6B6B6;
+                            .more {
+                                color: #b6b6b6;
                                 font-weight: 400;
                                 margin-left: 10px;
                             }
                         }
                     }
                 }
-                .btn-group{
+                .btn-group {
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
                     font-size: 12px;
-                    .btn-group-r{
+                    margin-top: 10px;
+                    .btn-group-r {
                         display: flex;
                         align-items: center;
                         gap: 10px;
-                        .r-item{
+                        .r-item {
                             border-radius: 25px;
                             padding: 7px 12px;
-                            border: 1px solid #8B8B8B;
-                            color: #8B8B8B;
-                            
+                            border: 1px solid #8b8b8b;
+                            color: #8b8b8b;
+
                             display: flex;
                             align-items: center;
                             gap: 4px;

src/views/old_mini/home/components/AgriculturalDynamics.vue

@@ -25,7 +25,7 @@
                         <img :src="item.media[0]" />
                     </div>
                     <div class="item-content">
-                        <div class="item-text van-ellipsis" v-html="item.content"></div>
+                        <div class="item-text van-multi-ellipsis--l2">{{ item.title }}</div>
                         <div class="item-date">{{ item.createTime.slice(0, 10)  }}</div>
                     </div>
                 </div>
@@ -39,16 +39,14 @@
                         <div class="question-title">{{ item.title }}</div>
                     </div>
                     <div class="expert-info">
-                        <el-avatar class="expert-avatar" :size="16" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
+                        <el-avatar class="expert-avatar" :size="16" :src="item.icon" />
                         <div class="expert-details">
                             <span class="expert-name">{{ item.name }}</span>
-                            <span class="expert-title">{{ item.expertTitle }}</span>
+                            <span class="expert-title">{{ item.belongEnterprise }}</span>
                             <span class="qa-date">{{ item.createTime.slice(0, 10) }}</span>
                         </div>
                     </div>
-                    <div class="answer-content">
-                        {{ item.content }}
-                    </div>
+                    <div class="answer-content" v-html="item.content"></div>
                 </div>
             </div>
         </div>
@@ -79,11 +77,11 @@ const handleTabClick = (value) => {
     getWarningList();
 };
 
-const handleItem = () => {
+const handleItem = (item) => {
     if (activeTab.value === 4) {
-        router.push("/expert_detail");
+        router.push("/expert_detail?id=" + item.id);
     } else {
-        router.push("/warning_detail");
+        router.push("/warning_detail?id=" + item.id);
     }
 };
 

src/views/old_mini/home/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="home-index" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
-        <img class="banner" src="@/assets/img/home/banner.png" alt="" />
+        <img class="banner" @click="handleBannerClick" :src="bannerObj?.media?.[0]" alt="" />
         <!-- 天气遮罩 -->
         <div class="weather-mask" v-show="isExpanded" @click="handleMaskClick"></div>
         <!-- 天气 -->
@@ -142,6 +142,7 @@ const handleBtn = () => {
 };
 
 onActivated(() => {
+    getBannerList();
     isGarden.value = Boolean(localStorage.getItem('isGarden'));
     // 检测是否从创建农场页面成功返回
     if (route.query.showSuccess === "true") {
@@ -170,6 +171,18 @@ onActivated(() => {
     }
 });
 
+const bannerObj = ref({});
+const getBannerList = () => {
+    const params = {
+        page: 1,
+        limit: 1,
+        topicId: 5,
+    };
+    VE_API.home.warningPageList(params).then(({ data }) => {
+        bannerObj.value = data[0] || {};
+    });
+}
+
 const isExpanded = ref(false);
 const weatherInfoRef = ref(null);
 const weatherExpanded = (isExpandedValue) => {
@@ -182,6 +195,10 @@ const handleMaskClick = () => {
         weatherInfoRef.value.toggleExpand();
     }
 };
+
+const handleBannerClick = () => {
+    router.push(`/warning_detail?id=${bannerObj.value.id}`);
+}
 </script>
 
 <style scoped lang="scss">
@@ -193,6 +210,7 @@ const handleMaskClick = () => {
     .banner {
         width: 100%;
         height: 200px;
+        object-fit: cover;
         position: relative;
         z-index: 1;
     }

src/views/old_mini/home/subPages/expertDetail.vue

@@ -4,50 +4,56 @@
         <div class="expert-content">
             <div class="question-header">
                 <img class="question-icon" src="@/assets/img/home/ask-icon.png" alt="" />
-                <div class="question-title">怎么预估我的果园的今年荔枝的产量?</div>
+                <div class="question-title">{{ expertDetail.title }}</div>
             </div>
             <div class="expert-info">
                 <el-avatar
                     class="expert-avatar"
                     :size="16"
-                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+                    :src="expertDetail.icon"
                 />
                 <div class="expert-details">
-                    <span class="expert-name">高小波</span>
-                    <span class="expert-title">华南农业大学农业专家</span>
-                    <span class="qa-date">2024.11.01</span>
+                    <span class="expert-name">{{ expertDetail.name }}</span>
+                    <span class="expert-title">{{ expertDetail.belongEnterprise }}</span>
+                    <span class="qa-date">{{ expertDetail?.createTime && expertDetail?.createTime?.slice(0, 10) }}</span>
                 </div>
             </div>
 
             <!-- 专家信息卡片 -->
             <div class="expert-card">
-                <el-avatar :size="36" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
+                <el-avatar :size="36" :src="expertDetail.icon" />
                 <div class="expert-card-info">
-                    <div class="expert-card-name">高小波</div>
-                    <div class="expert-card-title">华南农业大学农业专家</div>
+                    <div class="expert-card-name">{{ expertDetail.name }}</div>
+                    <div class="expert-card-title">{{ expertDetail.belongEnterprise }}</div>
                 </div>
             </div>
 
-            <div class="answer-content">
-                <div class="answer-text">
-                    <span class="font-bold">遇雨补喷:</span> 选择在无风或微风天气进行, 以减少药物的漂移,
-                    如果喷药后4小时内遇到雨水冲刷, 应重新...
-                </div>
-                <div class="answer-text">
-                    <span class="font-bold">遇雨补喷:</span> 选择在无风或微风天气进行, 以减少药物的漂移,
-                    如果喷药后4小时内遇到雨水冲刷, 应重新...
-                </div>
-                <div class="answer-text">
-                    <span class="font-bold">遇雨补喷:</span> 选择在无风或微风天气进行, 以减少药物的漂移,
-                    如果喷药后4小时内遇到雨水冲刷, 应重新...
-                </div>
-            </div>
+            <div class="answer-content" v-html="expertDetail.content"></div>
         </div>
     </div>
 </template>
 
 <script setup>
 import customHeader from "@/components/customHeader.vue";
+import { ref,onActivated } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+const expertDetail = ref({});
+onActivated(() => {
+    getExpertDetail();
+});
+
+const getExpertDetail = () => {
+    const params = {
+        id: route.query.id,
+    };
+
+    VE_API.home.expertDetail(params).then((res) => {
+        expertDetail.value = res.data[0] || {};
+    });
+}
 </script>
 
 <style scoped lang="scss">
@@ -108,13 +114,13 @@ import customHeader from "@/components/customHeader.vue";
         }
 
         .answer-content {
-            color: #333333;
-            line-height: 1.5;
-            .font-bold {
-                font-weight: 500;
-            }
-            .answer-text + .answer-text {
-                margin-top: 8px;
+            ::v-deep{
+                img {
+                    width: 100%;
+                    height: 175px;
+                    border-radius: 5px;
+                    object-fit: cover;
+                }
             }
         }
     }

src/views/old_mini/home/subPages/warningDetail.vue

@@ -3,28 +3,20 @@
         <custom-header name="查看详情"></custom-header>
         <div class="article-content">
             <div class="article-header">
-                <div class="title">海南**月即将迎来**物候期及近期管理建议</div>
+                <div class="title">{{ warningDetail.title }}</div>
                 <div class="author-info">
-                    <el-avatar :size="16" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
-                    <span class="author-name">飞鸟管家 2024.11.01</span>
+                    <el-avatar :size="16" :src="warningDetail.icon" />
+                    <span class="author-name">{{ warningDetail.name }}</span>
+                    <span class="qa-date">{{ warningDetail?.createTime && warningDetail?.createTime?.slice(0, 10) }}</span>
                 </div>
             </div>
 
             <div class="article-image">
-                <img src="@/assets/img/home/banner.png" alt="荔枝开花图片" />
+                <img :src="warningDetail?.media && warningDetail?.media[0]" alt="荔枝开花图片" />
             </div>
 
             <div class="article-text">
-                <p class="intro-text">
-                    根据**{地区}近期气象数据与果园监测，您的荔枝园即将进入{具体物候期,如"盛花期"}(预计{时间范围,
-                    如"3月15-20日"**)。请及时做好以下管理:
-                </p>
-
-                <ul class="management-list">
-                    <li>疏花控穗:若花量过大(每穗超150朵),建议剪除基部弱花,保留中部健壮花穗。</li>
-                    <li>疏花控穗:若花量过大(每穗超150朵),建议剪除基部弱花,保留中部健壮花穗。</li>
-                    <li>疏花控穗:若花量过大(每穗超150朵),建议剪除基部弱花,保留中部健壮花穗。</li>
-                </ul>
+                <span v-html="warningDetail.content"></span>
             </div>
         </div>
     </div>
@@ -32,7 +24,24 @@
 
 <script setup>
 import customHeader from "@/components/customHeader.vue";
-import { ref } from "vue";
+import { ref,onActivated } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+const warningDetail = ref({});
+onActivated(() => {
+    getWarningDetail();
+});
+
+const getWarningDetail = () => {
+    const params = {
+        id: route.query.id,
+    };
+    VE_API.home.warningDetail(params).then((res) => {
+        warningDetail.value = res.data || {};
+    });
+};
 </script>
 
 <style scoped lang="scss">
@@ -42,6 +51,9 @@ import { ref } from "vue";
     height: 100vh;
     .article-content {
         padding: 8px 16px;
+        overflow-y: auto;
+        height: calc(100% - 40px);
+        box-sizing: border-box;
 
         .article-header {
             .title {
@@ -54,10 +66,11 @@ import { ref } from "vue";
             .author-info {
                 display: flex;
                 align-items: center;
+                gap: 10px;
                 padding-bottom: 12px;
                 border-bottom: 1px solid #f5f5f5;
 
-                .author-name {
+                .author-name,.qa-date {
                     font-size: 14px;
                     color: #666;
                     font-weight: normal;
@@ -73,40 +86,16 @@ import { ref } from "vue";
                 width: 100%;
                 height: 175px;
                 border-radius: 5px;
+                object-fit: cover;
             }
         }
-
-        .article-text {
-            .intro-text {
-                color: #252525;
-                margin-bottom: 10px;
-            }
-
-            .management-list {
-                list-style: none;
-                padding: 0;
-                margin: 0;
-
-                li {
-                    position: relative;
-                    color: #252525;
-                    margin-bottom: 10px;
-                    padding-left: 16px;
-
-                    &::before {
-                        content: "";
-                        position: absolute;
-                        left: 0;
-                        top: 8px;
-                        width: 6px;
-                        height: 6px;
-                        background-color: #333333;
-                        border-radius: 50%;
-                    }
-
-                    &:last-child {
-                        margin-bottom: 0;
-                    }
+        .article-text{
+            ::v-deep{
+                img {
+                    width: 100%;
+                    height: 175px;
+                    border-radius: 5px;
+                    object-fit: cover;
                 }
             }
         }