|
|
@@ -12,7 +12,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="task-content">
|
|
|
- <div class="plan-menu">
|
|
|
+ <!-- <div class="plan-menu">
|
|
|
<el-anchor :container="containerRef" direction="vertical" type="default" @click="handleClick">
|
|
|
<el-menu :default-active="defaultActive" class="el-menu-vertical-demo">
|
|
|
<el-sub-menu v-for="(menu, index) in menuData" :key="index" :index="String(menu.id)">
|
|
|
@@ -26,7 +26,7 @@
|
|
|
</el-sub-menu>
|
|
|
</el-menu>
|
|
|
</el-anchor>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div class="expert-content" ref="containerRef">
|
|
|
<div v-for="(section, index) in contentData" :key="index" class="content-section">
|
|
|
<div class="section-id" :id="section.targetId"></div>
|
|
|
@@ -44,41 +44,56 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<template #footer>
|
|
|
- <div class="apply-wrap" v-if="section.orderStatus === 3">
|
|
|
+ <div class="info-item" v-if="activePlanIndex === 1 || activePlanIndex === 2">
|
|
|
+ 服务报价：
|
|
|
+ <span class="info-val">农资农资组织</span>
|
|
|
+ <div class="info-price">
|
|
|
+ <span>￥ 5,642</span>
|
|
|
+ <el-icon><ArrowRight /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="apply-wrap" v-if="activePlanIndex === 0">
|
|
|
<div class="apply-title">申请列表</div>
|
|
|
<div class="apply-list">
|
|
|
- <div class="apply-item" v-for="(item, index) in 2" :key="index">
|
|
|
+ <div class="apply-item" v-for="(item, itemIndex) in (section.isExpanded ? 4 : 2)" :key="itemIndex">
|
|
|
<div class="apply-info">
|
|
|
<el-avatar
|
|
|
- :size="17"
|
|
|
+ :size="36"
|
|
|
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
|
|
/>
|
|
|
- <span class="apply-name">农资农服农资1</span>
|
|
|
- <span class="apply-score">5.0分</span>
|
|
|
+ <div class="apply-text">
|
|
|
+ <div>农资农服农资{{ itemIndex + 1 }}</div>
|
|
|
+ <span>位于广东省广州市</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="apply-text">服务设备：无人机、水肥一体机、水肥</div>
|
|
|
- <div class="action-r apply-action">
|
|
|
- <div class="action-item default-item">联系他们</div>
|
|
|
- <div class="action-item primary-item">接受申请</div>
|
|
|
+ <div class="action-r apply-price">
|
|
|
+ <span>￥ 5,642</span>
|
|
|
+ <el-icon><ArrowRight /></el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="expand-more" @click="toggleExpand(index)">
|
|
|
+ <span>展开更多</span>
|
|
|
+ <el-icon :class="{ 'rotate': section.isExpanded }">
|
|
|
+ <ArrowDown />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="action-group">
|
|
|
- <div class="action-l">查看详情</div>
|
|
|
+ <div class="action-group" :class="{'flex-end': activePlanIndex === 0}">
|
|
|
+ <div class="action-l" v-if="activePlanIndex !== 0">查看详情</div>
|
|
|
<div class="action-r" v-if="section.orderStatus === 0">
|
|
|
<div class="action-item second-item">拍照识别</div>
|
|
|
<div class="action-item primary-item">去确认</div>
|
|
|
</div>
|
|
|
- <div class="action-r" v-if="section.orderStatus === 1">
|
|
|
+ <div class="action-r" v-if="activePlanIndex === 1">
|
|
|
<div class="action-item warning-item">发起需求</div>
|
|
|
<div class="action-item primary-item">确认完成</div>
|
|
|
</div>
|
|
|
- <div class="action-r" v-if="section.orderStatus === 2">
|
|
|
+ <div class="action-r" v-if="activePlanIndex === 2">
|
|
|
<div class="action-item warning-item">发起需求</div>
|
|
|
<div class="action-item primary-item">去复核</div>
|
|
|
</div>
|
|
|
- <div class="action-r" v-if="section.orderStatus === 3 || section.orderStatus === 4">
|
|
|
+ <div class="action-r" v-if="activePlanIndex === 0">
|
|
|
<div class="action-item cancel-item">取消发起</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -91,14 +106,20 @@
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import { ref } from "vue";
|
|
|
+import { ArrowRight, ArrowDown } from "@element-plus/icons-vue";
|
|
|
import recordItem from "@/components/recordItem.vue";
|
|
|
|
|
|
-const filterType = ref(["申请列表", "未接单", "待触发"]);
|
|
|
+const filterType = ref(["待支付", "待执行", "已完成","售后"]);
|
|
|
const activePlanIndex = ref(0);
|
|
|
+
|
|
|
const handlePlanClick = (index) => {
|
|
|
activePlanIndex.value = index;
|
|
|
};
|
|
|
|
|
|
+const toggleExpand = (sectionIndex) => {
|
|
|
+ contentData.value[sectionIndex].isExpanded = !contentData.value[sectionIndex].isExpanded;
|
|
|
+};
|
|
|
+
|
|
|
const containerRef = ref(null);
|
|
|
const handleClick = (e) => {
|
|
|
e.preventDefault();
|
|
|
@@ -132,6 +153,7 @@ const contentData = ref([
|
|
|
targetId: "part1",
|
|
|
title: "巡园农事",
|
|
|
parentTitle: "秋梢期",
|
|
|
+ isExpanded: false, // 添加展开状态
|
|
|
reCheckText: "本次农事复核成效优异，作物产量潜力实现大幅增长，虫害风险控制优异，未发现虫害风险",
|
|
|
expert: 91356,
|
|
|
orderStatus: 3,
|
|
|
@@ -220,6 +242,7 @@ const contentData = ref([
|
|
|
targetId: "part2",
|
|
|
title: "梢期防虫",
|
|
|
parentTitle: "秋梢期",
|
|
|
+ isExpanded: false, // 添加展开状态
|
|
|
consequenceText: "如果不做本次农事，会导致您的产量、质量下降30%，管理得分降低10分",
|
|
|
id: "274654",
|
|
|
reCheckText: "本次农事复核成效优异，作物产量潜力实现大幅增长，树体营养较充足，土壤肥力增加",
|
|
|
@@ -391,6 +414,7 @@ const contentData = ref([
|
|
|
{
|
|
|
targetId: "part3",
|
|
|
title: "梢期营养",
|
|
|
+ isExpanded: false, // 添加展开状态
|
|
|
consequenceText: "如果不做本次农事，会导致您的产量、质量下降5%，管理得分降低2分",
|
|
|
reCheckText: "本次农事复核成效优异，作物产量潜力实现大幅增长，树体营养较充足，转色速度非常稳定，转色率超过80%",
|
|
|
farmName: "荔枝博览园",
|
|
|
@@ -631,6 +655,7 @@ const contentData = ref([
|
|
|
targetId: "part4",
|
|
|
title: "巡园农事",
|
|
|
parentTitle: "开花期",
|
|
|
+ isExpanded: false, // 添加展开状态
|
|
|
consequenceText: "如果不做本次农事，会导致您的产量、质量下降20%，管理得分降低8分",
|
|
|
id: "274672",
|
|
|
reCheckText: "本次农事复核成效优异，作物产量潜力实现大幅增长，病虫害基数得到大幅下降，未发现病虫害风险",
|
|
|
@@ -918,6 +943,7 @@ const contentData = ref([
|
|
|
id: "part5",
|
|
|
title: "摇花吹花",
|
|
|
parentTitle: "开花期",
|
|
|
+ isExpanded: false, // 添加展开状态
|
|
|
consequenceText: "如果不做本次农事，会导致您的产量、质量下降15%，管理得分降低5分",
|
|
|
id: "274671",
|
|
|
reCheckText: "本次农事复核成效优异，作物产量潜力实现大幅增长，树体营养较充足，膨果速度非常稳定，膨果率超过80%",
|
|
|
@@ -1164,83 +1190,83 @@ const contentData = ref([
|
|
|
display: flex;
|
|
|
padding-top: 10px;
|
|
|
height: calc(100% - 140px);
|
|
|
- .plan-menu {
|
|
|
- width: 90px;
|
|
|
- height: 100%;
|
|
|
- padding: 10px 0;
|
|
|
- box-sizing: border-box;
|
|
|
- background: #fff;
|
|
|
- border-radius: 0 10px 10px 0;
|
|
|
- .menu-icon {
|
|
|
- width: 13px;
|
|
|
- }
|
|
|
- .menu-text {
|
|
|
- padding: 0 4px;
|
|
|
- }
|
|
|
- ::v-deep {
|
|
|
- .el-anchor {
|
|
|
- height: 100%;
|
|
|
- background: none;
|
|
|
- }
|
|
|
- .el-anchor__marker {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .el-menu {
|
|
|
- background: none;
|
|
|
- border: none;
|
|
|
- .el-sub-menu__title {
|
|
|
- background: none;
|
|
|
- padding: 0 2px;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .el-sub-menu__title {
|
|
|
- height: 32px;
|
|
|
- }
|
|
|
- .el-sub-menu .el-sub-menu__icon-arrow {
|
|
|
- position: static;
|
|
|
- padding-top: 6px;
|
|
|
- }
|
|
|
- .el-sub-menu {
|
|
|
- margin-bottom: 16px;
|
|
|
- &.is-opened {
|
|
|
- .el-sub-menu__icon-arrow {
|
|
|
- padding-bottom: 6px;
|
|
|
- padding-top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-menu-item {
|
|
|
- height: 32px;
|
|
|
- line-height: 32px;
|
|
|
- margin: 4px 8px;
|
|
|
- padding: 0 2px;
|
|
|
- justify-content: center;
|
|
|
- background: none;
|
|
|
- }
|
|
|
- .el-menu-item.is-active {
|
|
|
- background: none;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .el-anchor__item {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .el-anchor__link {
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- .el-anchor__link.is-active {
|
|
|
- background: linear-gradient(180deg, #70bffe, #2199f8);
|
|
|
- border-radius: 20px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .el-anchor__list {
|
|
|
- padding-left: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ // .plan-menu {
|
|
|
+ // width: 90px;
|
|
|
+ // height: 100%;
|
|
|
+ // padding: 10px 0;
|
|
|
+ // box-sizing: border-box;
|
|
|
+ // background: #fff;
|
|
|
+ // border-radius: 0 10px 10px 0;
|
|
|
+ // .menu-icon {
|
|
|
+ // width: 13px;
|
|
|
+ // }
|
|
|
+ // .menu-text {
|
|
|
+ // padding: 0 4px;
|
|
|
+ // }
|
|
|
+ // ::v-deep {
|
|
|
+ // .el-anchor {
|
|
|
+ // height: 100%;
|
|
|
+ // background: none;
|
|
|
+ // }
|
|
|
+ // .el-anchor__marker {
|
|
|
+ // display: none;
|
|
|
+ // }
|
|
|
+ // .el-menu {
|
|
|
+ // background: none;
|
|
|
+ // border: none;
|
|
|
+ // .el-sub-menu__title {
|
|
|
+ // background: none;
|
|
|
+ // padding: 0 2px;
|
|
|
+ // justify-content: center;
|
|
|
+ // }
|
|
|
+ // .el-sub-menu__title {
|
|
|
+ // height: 32px;
|
|
|
+ // }
|
|
|
+ // .el-sub-menu .el-sub-menu__icon-arrow {
|
|
|
+ // position: static;
|
|
|
+ // padding-top: 6px;
|
|
|
+ // }
|
|
|
+ // .el-sub-menu {
|
|
|
+ // margin-bottom: 16px;
|
|
|
+ // &.is-opened {
|
|
|
+ // .el-sub-menu__icon-arrow {
|
|
|
+ // padding-bottom: 6px;
|
|
|
+ // padding-top: 0;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .el-menu-item {
|
|
|
+ // height: 32px;
|
|
|
+ // line-height: 32px;
|
|
|
+ // margin: 4px 8px;
|
|
|
+ // padding: 0 2px;
|
|
|
+ // justify-content: center;
|
|
|
+ // background: none;
|
|
|
+ // }
|
|
|
+ // .el-menu-item.is-active {
|
|
|
+ // background: none;
|
|
|
+ // color: #fff;
|
|
|
+ // }
|
|
|
+ // .el-anchor__item {
|
|
|
+ // width: 100%;
|
|
|
+ // text-align: center;
|
|
|
+ // }
|
|
|
+ // .el-anchor__link {
|
|
|
+ // color: #666666;
|
|
|
+ // }
|
|
|
+ // .el-anchor__link.is-active {
|
|
|
+ // background: linear-gradient(180deg, #70bffe, #2199f8);
|
|
|
+ // border-radius: 20px;
|
|
|
+ // color: #fff;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .el-anchor__list {
|
|
|
+ // padding-left: 0;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
.expert-content {
|
|
|
- width: calc(100% - 90px);
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
overflow: auto;
|
|
|
padding-bottom: 10px;
|
|
|
@@ -1254,7 +1280,7 @@ const contentData = ref([
|
|
|
height: 1px;
|
|
|
}
|
|
|
.recipe-item {
|
|
|
- margin-right: 0;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
}
|
|
|
.box-title {
|
|
|
@@ -1298,6 +1324,24 @@ const contentData = ref([
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .info-item {
|
|
|
+ color: #bbbbbb;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .info-val {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .info-price {
|
|
|
+ margin-left: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1D2129;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.apply-wrap {
|
|
|
.apply-title {
|
|
|
@@ -1307,6 +1351,9 @@ const contentData = ref([
|
|
|
}
|
|
|
.apply-list {
|
|
|
.apply-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
border-radius: 8px;
|
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
padding: 10px;
|
|
|
@@ -1314,24 +1361,50 @@ const contentData = ref([
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-weight: 500;
|
|
|
- .apply-name{
|
|
|
- margin: 0 5px;
|
|
|
- }
|
|
|
- .apply-score{
|
|
|
- font-size: 12px;
|
|
|
- color: #FF953D;
|
|
|
- }
|
|
|
}
|
|
|
.apply-text {
|
|
|
- font-size: 12px;
|
|
|
- color: #666666;
|
|
|
- margin: 5px 0 10px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1D2129;
|
|
|
+ margin-left: 8px;
|
|
|
+ span{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(29, 33, 41, 0.2);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.apply-item + .apply-item {
|
|
|
margin-top: 8px;
|
|
|
}
|
|
|
}
|
|
|
+ .expand-more {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: rgba(0, 0, 0, 0.4);
|
|
|
+ font-size: 12px;
|
|
|
+ span {
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .el-icon {
|
|
|
+ font-size: 12px;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+ &.rotate {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ color: rgba(0, 0, 0, 0.6);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .action-r{
|
|
|
+ color: #1D2129;
|
|
|
+ }
|
|
|
+ .apply-price{
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.action-group {
|
|
|
@@ -1341,6 +1414,9 @@ const contentData = ref([
|
|
|
padding-top: 8px;
|
|
|
margin-top: 8px;
|
|
|
border-top: 1px solid #f5f5f5;
|
|
|
+ &.flex-end{
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
.action-l {
|
|
|
font-size: 12px;
|
|
|
color: rgba(0, 0, 0, 0.4);
|
wangsisi
