|
|
@@ -0,0 +1,424 @@
|
|
|
+<template>
|
|
|
+ <div class="service-detail-page">
|
|
|
+ <custom-header name="服务详情"></custom-header>
|
|
|
+ <div class="service-detail-content">
|
|
|
+ <div class="record-box">
|
|
|
+ <div class="item-left">
|
|
|
+ <img class="map-img" src="/map.png" alt="地图" />
|
|
|
+ <div class="item-cont">
|
|
|
+ <div class="item-header">
|
|
|
+ <div class="farm-name">从化荔博园</div>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag tag-area">200亩</span>
|
|
|
+ <span class="tag tag-variety">桂味</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="farm-address">广东省广州市从化区从化区</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-right">在线沟通</div>
|
|
|
+ </div>
|
|
|
+ <div class="farm-service-box">
|
|
|
+ <div class="service-title">
|
|
|
+ <img src="@/assets/img/home/label-icon.png" alt="" />
|
|
|
+ <span>农事服务</span>
|
|
|
+ </div>
|
|
|
+ <div class="stats">
|
|
|
+ <div class="col">
|
|
|
+ <div class="num">1258<span class="unit"> 元</span></div>
|
|
|
+ <div class="desc">总收益</div>
|
|
|
+ </div>
|
|
|
+ <div class="col">
|
|
|
+ <div class="num">1258<span class="unit"> 元</span></div>
|
|
|
+ <div class="desc">投入成本</div>
|
|
|
+ </div>
|
|
|
+ <div class="col">
|
|
|
+ <div class="num">118<span class="unit"> 次</span></div>
|
|
|
+ <div class="desc">服务次数</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-for="(section, index) in contentData" :key="index" class="content-section">
|
|
|
+ <record-item
|
|
|
+ :record-item-data="section"
|
|
|
+ :onlyRecipeName="true"
|
|
|
+ :showContent="true"
|
|
|
+ class="recipe-item"
|
|
|
+ >
|
|
|
+ <template #title>
|
|
|
+ <div class="box-title">
|
|
|
+ <div class="title-l">
|
|
|
+ {{ section.title }}
|
|
|
+ <span class="parent-text">{{ section.parentTitle || "秋梢期" }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="title-r">分享成果</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #content>
|
|
|
+ <div class="content-info">
|
|
|
+ <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">
|
|
|
+ <div class="image-wrapper">
|
|
|
+ <span class="image-label">农事前</span>
|
|
|
+ <img
|
|
|
+ src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="image-wrapper">
|
|
|
+ <span class="image-label">农事后</span>
|
|
|
+ <img
|
|
|
+ src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </record-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import customHeader from "@/components/customHeader.vue";
|
|
|
+import { ref } from "vue";
|
|
|
+import recordItem from "@/components/recordItem.vue";
|
|
|
+
|
|
|
+const getPrescriptionInfo = (section) => {
|
|
|
+ // 从section的prescriptionList中获取药物信息
|
|
|
+ if (section.prescriptionList && section.prescriptionList.length > 0) {
|
|
|
+ const firstPrescription = section.prescriptionList[0];
|
|
|
+ if (firstPrescription.pesticideFertilizerList && firstPrescription.pesticideFertilizerList.length > 0) {
|
|
|
+ const firstDrug = firstPrescription.pesticideFertilizerList[0];
|
|
|
+ const ratio = firstDrug.ratio || firstDrug.defaultRatio || 1000;
|
|
|
+ return `${ratio}倍${firstDrug.brand}${firstDrug.pesticideFertilizerName}`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return "1000倍国光乙烯利"; // 默认值
|
|
|
+};
|
|
|
+
|
|
|
+const contentData = ref([
|
|
|
+ {
|
|
|
+ targetId: "part1",
|
|
|
+ title: "巡园农事",
|
|
|
+ parentTitle: "秋梢期",
|
|
|
+ isExpanded: false, // 添加展开状态
|
|
|
+ hasApplied: false, // 是否已发起需求
|
|
|
+ reCheckText: "本次农事复核成效优异，作物产量潜力实现大幅增长，虫害风险控制优异，未发现虫害风险",
|
|
|
+ expert: 91356,
|
|
|
+ orderStatus: 3,
|
|
|
+ activeStatus: 0,
|
|
|
+ regionId: 2,
|
|
|
+ speciesId: "1",
|
|
|
+ speciesName: "荔枝",
|
|
|
+ farmWorkId: "699343457474318336",
|
|
|
+ farmWorkLibId: "699343457474318336",
|
|
|
+ farmWorkLibName: "梢期防虫",
|
|
|
+ farmWorkName: "梢期防虫",
|
|
|
+ expertIcon:
|
|
|
+ "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
|
|
|
+ expertName: "韦帮稳",
|
|
|
+ icon: 4,
|
|
|
+ beforeExecuteDate: "2025-08-01",
|
|
|
+ executeDate: "2025-08-15",
|
|
|
+ code: "BZ-BC-04-SQFC-20",
|
|
|
+ expertPrescription: "",
|
|
|
+ condition: "单树嫩叶率大于20.0%",
|
|
|
+ defaultFarmWork: 0,
|
|
|
+ farmWorkType: 3,
|
|
|
+ farmWorkTypeName: "病虫",
|
|
|
+ usageMode: "叶面施",
|
|
|
+ serviceMain: "广州泽秾丰农资有限公司",
|
|
|
+ updateDate6: null,
|
|
|
+ confirmPicture: [],
|
|
|
+ executeMain: "广州泽秾丰农资有限公司",
|
|
|
+ storeShortName: "泽秾丰",
|
|
|
+ serviceRegion: "广州市从化区荔枝博览园",
|
|
|
+ prescriptionList: [
|
|
|
+ {
|
|
|
+ name: "营养",
|
|
|
+ pesticideFertilizerList: [
|
|
|
+ {
|
|
|
+ defaultDroneRatio: null,
|
|
|
+ defaultName: "尿素",
|
|
|
+ defaultRatio: 0,
|
|
|
+ id: null,
|
|
|
+ muPrice: null,
|
|
|
+ muUsage: 15000.0,
|
|
|
+ muUsage2: 15000.0,
|
|
|
+ ratio: 0,
|
|
|
+ ratio2: 0,
|
|
|
+ remark: "",
|
|
|
+ usageMode: "",
|
|
|
+ usageModeList: ["叶面施、根部施"],
|
|
|
+ orderId: null,
|
|
|
+ pesticideFertilizerCode: "1001",
|
|
|
+ pesticideFertilizerId: "1",
|
|
|
+ pesticideFertilizerName: "尿素",
|
|
|
+ brand: "山东联盟",
|
|
|
+ typeName: "营养",
|
|
|
+ price: 132,
|
|
|
+ unit: "g",
|
|
|
+ executeStyle: null,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ defaultDroneRatio: null,
|
|
|
+ defaultName: "15-15-15复合肥",
|
|
|
+ defaultRatio: 0,
|
|
|
+ id: null,
|
|
|
+ muPrice: null,
|
|
|
+ muUsage: 45000.0,
|
|
|
+ muUsage2: 45000.0,
|
|
|
+ ratio: 0,
|
|
|
+ ratio2: 0,
|
|
|
+ remark: "",
|
|
|
+ usageMode: "",
|
|
|
+ usageModeList: ["根部施"],
|
|
|
+ orderId: null,
|
|
|
+ pesticideFertilizerCode: "1002",
|
|
|
+ pesticideFertilizerId: "2",
|
|
|
+ pesticideFertilizerName: "15-15-15复合肥",
|
|
|
+ brand: "金正大",
|
|
|
+ typeName: "营养",
|
|
|
+ price: 220,
|
|
|
+ unit: "g",
|
|
|
+ executeStyle: null,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+]);
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.service-detail-page {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background: #f7f7f7;
|
|
|
+ .service-detail-content {
|
|
|
+ padding: 10px 12px;
|
|
|
+ .record-box {
|
|
|
+ background: #fff;
|
|
|
+ padding: 16px 12px;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .item-left {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+ .map-img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 6px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ .item-cont {
|
|
|
+ .item-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ .farm-name {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .tags {
|
|
|
+ display: flex;
|
|
|
+ gap: 6px;
|
|
|
+ .tag {
|
|
|
+ padding: 1px 8px;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 12px;
|
|
|
+ &.tag-area {
|
|
|
+ background: #f4f4f4;
|
|
|
+ color: #1d2129;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.tag-variety {
|
|
|
+ background: rgba(232, 243, 255, 1);
|
|
|
+ color: #2199f8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .farm-address {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #86909c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-right {
|
|
|
+ text-align: center;
|
|
|
+ color: #888b8d;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 5px 12px;
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 1px solid #888b8d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .farm-service-box {
|
|
|
+ padding: 16px 12px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-top: 12px;
|
|
|
+ .service-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 500;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .stats {
|
|
|
+ display: flex;
|
|
|
+ align-items: stretch;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ border: 1px solid rgba(33, 153, 248, 0.2);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 10px 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 12px;
|
|
|
+ .col {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ .num {
|
|
|
+ color: #2199f8;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ .unit {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ color: #000;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .col + .col {
|
|
|
+ border-left: 1px solid rgba(33, 153, 248, 0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-section {
|
|
|
+ .recipe-item {
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ margin: 12px 0 0 0;
|
|
|
+ .box-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ .title-l {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #000;
|
|
|
+ .parent-text {
|
|
|
+ margin-left: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: normal;
|
|
|
+ padding: 4px 6px;
|
|
|
+ border-radius: 14px;
|
|
|
+ background: rgba(119, 119, 119, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title-btn {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #2199f8;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .title-r {
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 1px solid #FF953D;
|
|
|
+ color: #FF953D;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-info {
|
|
|
+ padding-top: 8px;
|
|
|
+ .info-line {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #bbbbbb;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ line-height: 1.4;
|
|
|
+ .info-val {
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .review-title {
|
|
|
+ .info-val {
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .review-image {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ .image-wrapper {
|
|
|
+ position: relative;
|
|
|
+ flex: 1;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 105px;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ .image-label {
|
|
|
+ position: absolute;
|
|
|
+ top: 4px;
|
|
|
+ left: 4px;
|
|
|
+ padding: 4px 10px;
|
|
|
+ background: rgba(54, 52, 52, 0.6);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ border-radius: 8px 0 8px 0;
|
|
|
+ z-index: 1;
|
|
|
+ backdrop-filter: blur(4px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .reminder-box {
|
|
|
+ background: linear-gradient(90deg, #d9ebfc, transparent);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 6px 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #2e2e2e;
|
|
|
+ line-height: 1.4;
|
|
|
+ margin-top: 8px;
|
|
|
+ .highlight-number {
|
|
|
+ color: #2199f8;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wangsisi