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