src/api/modules/farm.js

@@ -13,4 +13,8 @@ module.exports = {
         url: config.base_dev_url + "v2/farm/createFarm",
         type: "post",
     },
+    fetchFarmList: {
+        url: config.base_dev_url + "farm/listByUser",
+        type: "get",
+    }
 }

src/api/modules/home.js

@@ -5,4 +5,21 @@ module.exports = {
         url: config.base_dev_url + "lz_weather7d/get?key=" + config.mini_key,
         type: "get",
     },
+    // 专家列表
+    fetchExpertList: {
+        url: config.base_dev_url + "container/expertList",
+        type: "get",
+    },
+    listByFarmIdAndContainerId: {
+        url: config.base_dev_url + "container_farm_work_scheme/listByFarmIdAndContainerId",
+        type: "get",
+    },
+    savePlan: {
+        url: config.base_dev_url + "container_farm_work_scheme/save",
+        type: "post",
+    },
+    getPhenologyFarmWorkList: {
+        url: config.base_dev_url + "container_farm_work_scheme/getPhenologyFarmWorkList",
+        type: "get",
+    },
 }

src/components/recordItem.vue

@@ -6,15 +6,15 @@
         <div class="record-content">
             <div class="info-item">
                 触发条件：
-                <span class="info-val">{{ recordItemData?.condition }}</span>
+                <span class="info-val">{{ recordItemData?.farmWorkDetail?.condition }}</span>
             </div>
             <div class="info-item">
                 农事编号：
-                <span class="info-val">{{ recordItemData?.code }}</span>
+                <span class="info-val">{{ recordItemData?.farmWorkDetail?.code }}</span>
             </div>
             <div class="info-item">
                 推荐时间：
-                <span class="info-val">{{ recordItemData?.executeDate }}</span>
+                <span class="info-val">{{ recordItemData?.farmWorkDetail?.executeDate }}</span>
             </div>
             <div class="info-item" v-if="recordItemData?.attention">
                 巡园提醒：
@@ -42,20 +42,28 @@
                         </span>
                     </div>
             </div>
-            <div class="info-item" v-if="!onlyRecipeName && recordItemData?.prescriptionList && recordItemData?.prescriptionList.length">
+            <div class="info-item" v-if="!onlyRecipeName && recordItemData?.farmWorkDetail?.prescription && recordItemData?.farmWorkDetail?.prescription">
                 药物处方
                 <div class="info-table">
                     <div class="table">
                         <div class="th">
-                            <div class="td">名称</div>
-                            <div class="td width">品牌</div>
+                            <div class="td">功效</div>
+                            <div class="td width">名称</div>
                             <div class="td">配比</div>
                             <div class="td">方式</div>
                         </div>
-                        <div v-for="(prescriptionItem, prescriptionI) in recordItemData.prescriptionList" :key="prescriptionI">
+                        <!-- <div v-for="(prescriptionItem, prescriptionI) in recordItemData.farmWorkDetail.prescription" :key="prescriptionI">
                             <div class="tr" v-for="(subP, subI) in prescriptionItem.pesticideFertilizerList" :key="subI">
                                 <div class="td">{{ subP.typeName }}</div>
-                                <div class="td width">{{ subP.defaultName }}</div>
+                                <div class="td width">{{ subP.name }}</div>
+                                <div class="td">{{ subP.ratio }}</div>
+                                <div class="td">人工</div>
+                            </div>
+                        </div> -->
+                        <div>
+                            <div class="tr" v-for="(subP, subI) in recordItemData.farmWorkDetail.prescription.pesticideFertilizerList" :key="subI">
+                                <div class="td">{{ subP.typeName }}</div>
+                                <div class="td width">{{ subP.name }}</div>
                                 <div class="td">{{ subP.ratio }}</div>
                                 <div class="td">人工</div>
                             </div>
@@ -85,6 +93,8 @@ const props = defineProps({
         default: () => ({}),
     },
 });
+
+console.log('recordItemData', props.recordItemData);
 </script>
 
 <style lang="scss" scoped>

src/router/globalRoutes.js

@@ -200,4 +200,10 @@ export default [
         name: "SharePage",
         component: () => import("@/views/old_mini/modify_work/sharePage.vue"),
     },
+    // 报价详情
+    {
+        path: "/price_detail",
+        name: "PriceDetail",
+        component: () => import("@/views/old_mini/price_detail/index.vue"),
+    },
 ];

src/views/old_mini/agri_work/servicesIndex.vue

@@ -39,7 +39,7 @@
                                     </div>
                                     <div class="price-total">报价合计：<span class="main-val">1258</span>元</div>
                                     <div class="bottom-btn">
-                                        <div class="btn second">编辑报价</div>
+                                        <div class="btn second" @click="toPage">编辑报价</div>
                                         <div class="btn primary">确定报价</div>
                                     </div>
                                 </div>
@@ -101,7 +101,9 @@ import infoText from "./components/infoText.vue";
 import prescriptionTable from "./components/prescriptionTable.vue";
 import priceTable from "./components/priceTable.vue";
 import farmSteps from "@/components/farmSteps.vue";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 const store = useStore();
 
 // 角色
@@ -158,6 +160,10 @@ const changeRegion = (e) => {
         // serveArea.value = "3.72亩"
     });
 };
+
+function toPage() {
+    router.push("/price_detail")
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -12,12 +12,12 @@
             </div>
             <div class="select-box">
                 <div class="select-item width-30">
-                    <el-select v-model="typeVal" placeholder="品种">
+                    <el-select v-model="typeVal" placeholder="品种" @change="getList">
                             <el-option
                                 v-for="item in typeOptions"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id"
                             />
                     </el-select>
                 </div>
@@ -58,7 +58,7 @@
                 <div class="list-item" v-for="(item, index) in list" :key="index" @click.stop="toPage(item)">
                     <div class="list-top">
                         <div class="user">
-                            <img :src="item.icon" alt="" />
+                            <img :src="item.pic" alt="" />
                             <!-- <div class="checkbox" @click.stop="handleCheck(item)">
                                 <el-icon class="icon" v-if="item.isDefault"><Select /></el-icon>
                                 <el-icon class="icon rotate" v-else><CloseBold /></el-icon>
@@ -68,10 +68,10 @@
                             <div class="text">
                                 <div class="info-flex">
                                     <span class="name">{{ item.name }}</span>
-                                    <span class="expert-tag">
+                                    <!-- <span class="expert-tag">
                                         <img class="expert-img" src="@/assets/img/home/expert-icon.png" alt="">
                                         专家
-                                    </span>
+                                    </span> -->
                                     <div
                                         class="fruit-tag"
                                         v-for="(ele, eleIndex) in item.tagList"
@@ -80,16 +80,20 @@
                                         {{ ele.name }}
                                     </div>
                                 </div>
+                                <div class="add-btn">
+                                    <el-icon size="16" color="#fff"><Plus /></el-icon>
+                                </div>
                             </div>
                             <div class="van-multi-ellipsis--l2 ellipsis">擅长：{{ item.strongPoint }}</div>
+                            
+                            <div class="list-btn">
+                                <div class="btn-primary" @click.stop="toPage(item)">
+                                    <span>免费咨询</span>
+                                </div>
+                                <div class="btn-plain" @click.stop="handlePage(item)">查看处方</div>
+                            </div>
                         </div>
                     </div>
-                    <div class="list-btn">
-                        <div class="btn-primary" @click.stop="toPage(item)">
-                            <span>免费咨询</span>
-                        </div>
-                        <div class="btn-plain" @click.stop="handlePage(item)">查看处方</div>
-                    </div>
                 </div>
                 <empty
                     v-show="list.length < 1"
@@ -105,7 +109,7 @@
 <script setup>
 import customHeader from "@/components/customHeader.vue";
 import { Empty} from "vant";
-import { onActivated, ref } from "vue";
+import { onActivated, onMounted, ref } from "vue";
 import { useRouter,useRoute } from "vue-router";
 import { useStore } from "vuex";
 import { ElMessage } from "element-plus";
@@ -114,14 +118,6 @@ const store = useStore();
 const router = useRouter();
 const route = useRoute();
 
-const handleCheck = (item) =>{
-    item.isDefault = !item.isDefault
-}
-
-const handleChat = ({userId,name}) =>{
-    router.push(`/consult?userId=${userId}&name=${name}`)
-}
-
 const handlePage = ({isDefault,userId}) =>{
     if(isDefault==null){
         router.push(`/expert_prescription?userId=${userId}&disabled=true`)
@@ -130,48 +126,27 @@ const handlePage = ({isDefault,userId}) =>{
     }
 }
 
-//设置默认处方
-const handleDefalut = ({isDefault,userId}) =>{
-    if(isDefault==null && !route.query.isDisable){
-        VE_API.expert.setFarmWorkRecord({expertUserId:userId}).then(res =>{
-            if(res.success){
-                getList()
-            }else{
-                ElMessage.warning(res.msg)
-            }
-        })
-    }else{
-        ElMessage.warning('暂无修改权限')
-    }
+const typeOptions = ref([]);
+
+function getSpecieList() {
+    VE_API.farm.fetchSpecieList().then(({ data }) => {
+        typeOptions.value = data;
+        
+        getList(data[0].id);
+    });
 }
 
-const list = ref([
-    {
-        icon: "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
-        name: "韦帮稳",
-        tagList: [{name: "荔枝"}],
-        strongPoint: "深耕果树栽培领域达30年，在荔枝、龙眼、柑橘、番茄、木瓜等多个品类果树；耕果树栽培领域达30年，在荔枝、龙眼、柑"
-    },
-    {
-        icon: "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
-        name: "韦老师",
-        tagList: [{name: "荔枝"}, {name: "龙眼"}],
-        strongPoint: "深耕果树栽培领域达30年，在荔枝、龙眼、柑橘、番茄、木瓜等多个品类果树"
-    },
-]);
 
-const changeItem = (e) => {
-    getList();
-};
+const list = ref([]);
 
-const getList = () => {
-    VE_API.expert.expertList().then((res) => {
-        list.value = res.data || [];
+const getList = (speciesId) => {
+    VE_API.home.fetchExpertList({speciesId}).then(({data}) => {
+        list.value = data || [];
     });
 };
 
-onActivated(() => {
-    // getList();
+onMounted(() => {
+    getSpecieList()
 });
 
 function toPage() {
@@ -184,13 +159,6 @@ const keyword = ref(null)
 const typeVal = ref(null)
 const regionVal = ref(null)
 const levelVal = ref(null)
-const typeOptions = ref([
-    { label: "全部", value: "all" },
-    { label: "施肥", value: "1" },
-    { label: "用药", value: "2" },
-    { label: "修剪", value: "3" },
-    { label: "其他", value: "4" },
-])
 
 const regionOptions = ref([{
     label: "全部",
@@ -280,6 +248,7 @@ const levelOptions = ref([
         box-sizing: border-box;
         width: 100%;
         .list {
+            position: relative;
             .list-item {
                 background: #fff;
                 padding: 16px 12px 12px;
@@ -293,7 +262,7 @@ const levelOptions = ref([
                         width: 100%;
                         height: 100%;
                         border-radius: 8px;
-                        object-fit: cover;
+                        object-fit: scale-down;
                     }
                     .checkbox{
                         position: absolute;
@@ -320,7 +289,7 @@ const levelOptions = ref([
                 }
                 .list-btn {
                     display: flex;
-                    justify-content: center;
+                    // justify-content: center;
                     font-size: 12px;
                     margin-top: 8px;
                     .btn-primary{
@@ -361,6 +330,16 @@ const levelOptions = ref([
                             display: flex;
                             align-items: center;
                         }
+                        .add-btn {
+                            width: 26px;
+                            height: 26px;
+                            border-radius: 50%;
+                            background: #2199F8;
+                            text-align: center;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                        }
                         .name {
                             color: #000;
                             font-size: 16px;

src/views/old_mini/plan/components/addGroup.vue

@@ -134,24 +134,25 @@ const submitGroupName = async () => {
     await ruleFormRef.value.validate((valid, fields) => {
         if (valid) {
             const params = {
-                farmId: currentFarmId,
-                groupName: ruleForm.name,
+                ...addParams.value,
+                name: ruleForm.name,
             };
-            // VE_API.manage_user
-            //     .saveGroup(params)
-            //     .then(({ data, code }) => {
-            //         if (code === 0) {
-            //             ElMessage.success("新建分组成功");
-            //             if (popupType.value === "add") {
-            //                 showClient.value = false;
-            //             } else {
-            //                 console.log('data', data);
-            //                 clear()
-            //                 getGroupList(data.id)
-            //             }
-            //             emit("updateGroupList");
-            //         }
-            //     });
+            console.log('params', params);
+            VE_API.home
+                .savePlan(params)
+                .then(({ data, code }) => {
+                    if (code === 0) {
+                        ElMessage.success("新增方案成功");
+                        if (popupType.value === "add") {
+                            showClient.value = false;
+                        } else {
+                            console.log('data', data);
+                            clear()
+                            getGroupList(data.id)
+                        }
+                        emit("updateGroupList");
+                    }
+                });
         } else {
             console.log("error submit!");
         }
@@ -165,13 +166,11 @@ const resetForm = () => {
 };
 
 // 打开弹窗-类型
-const telList = ref([]);
 const popupType = ref("add");
-function openClientPopup(type, userArr) {
+const addParams = ref(null)
+function openClientPopup({type, params}) {
     popupType.value = type || "add";
-    if (type !== "add") {
-        telList.value = userArr;
-    }
+    addParams.value = params
     showClient.value = true;
 }
 
@@ -234,7 +233,7 @@ function getGroupList(hasVal) {
     // });
 }
 
-// const emit = defineEmits(["updateTableList", "updateGroupList"]);
+const emit = defineEmits(["updateGroupList"]);
 
 defineExpose({
     openClientPopup,

src/views/old_mini/plan/components/myPrescription.vue

@@ -1,6 +1,22 @@
 <template>
     <div class="prescription-page">
         <div class="filter-wrap">
+            <div class="farm-list">
+                <el-select
+                    @change="changeFarm"
+                    class="select-item"
+                    v-model="farmItem"
+                    placeholder="作物类型"
+                    style="width: 100px"
+                >
+                    <el-option
+                        v-for="(item, index) in farmList"
+                        :key="index"
+                        :label="item.name"
+                        :value="{ value: item.organId, ...item }"
+                    />
+                </el-select>
+            </div>
             <div class="plan-box">
                 <div
                     class="plan-item"
@@ -21,36 +37,38 @@
                         <el-sub-menu v-for="(menu, index) in menuData" :key="index" :index="String(menu.id)">
                             <template #title>
                                 <img class="menu-icon" :src="require(`@/assets/img/gallery/icon-${index}.png`)" />
-                                <span class="menu-text">{{ menu.title }}</span>
+                                <span class="menu-text">{{ menu.name }}</span>
                             </template>
-                            <el-menu-item v-for="item in menu.children" :key="item.id" :index="`${menu.id}-${item.id}`">
-                                <el-anchor-link :href="item.href" :title="item.title" />
+                            <el-menu-item v-for="item in menu.farmWorkArrangeList" :key="item.id" :index="`${menu.id}-${item.id}`">
+                                <el-anchor-link :href="'#'+menu.name+item.farmWorkDetail?.name" :title="item.farmWorkDetail?.name" />
                             </el-menu-item>
                         </el-sub-menu>
                     </el-menu>
                 </el-anchor>
             </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>
-                    <record-item :record-item-data="section">
-                        <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 class="btn-item del-btn" @click="deletePlan">
-                                        <el-icon color="#fff" size="14"><Delete /></el-icon>
+                <div v-for="(section, index) in menuData" :key="index" class="content-section">
+                    <div class="section-item" v-for="(sub, subI) in section.farmWorkArrangeList" :key="index+'-'+subI">
+                        <div class="section-id" :id="section.name+sub.farmWorkDetail?.name"></div>
+                        <record-item :record-item-data="sub">
+                            <template #title>
+                                <div class="box-title">
+                                    <div class="title-l">
+                                        {{ sub.farmWorkDetail?.name }}
+                                        <span class="parent-text">{{ section.name }}</span>
                                     </div>
-                                    <div class="btn-item edit-btn">
-                                        <el-icon color="#fff" size="14"><Edit /></el-icon>
+                                    <div class="title-r">
+                                        <div class="btn-item del-btn" @click="deletePlan">
+                                            <el-icon color="#fff" size="14"><Delete /></el-icon>
+                                        </div>
+                                        <div class="btn-item edit-btn">
+                                            <el-icon color="#fff" size="14"><Edit /></el-icon>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                        </template>
-                    </record-item>
+                            </template>
+                        </record-item>
+                    </div>
                 </div>
             </div>
         </div>
@@ -66,7 +84,7 @@
             <div class="bottom-r" @click="addWork">新增农事</div>
         </div>
     </div>
-    <add-group ref="addGroupRef" />
+    <add-group ref="addGroupRef" @updateGroupList="getPlan" />
     <action-sheet :style="{ bottom: tabBarHeight + 'px' }" v-model:show="showAction" title="选择农事类型(可多选)">
             <div class="content">
                 <checkbox-group v-model="checkedType">
@@ -99,7 +117,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import addGroup from "./addGroup.vue";
 import recordItem from "@/components/recordItem.vue";
 import { useStore } from "vuex";
@@ -119,26 +137,7 @@ const tabBarHeight = computed(() => store.state.home.tabBarHeight);
 // 菜单
 const defaultActive = ref("1-1");
 
-const menuData = [
-    {
-        id: 1,
-        title: "秋梢期",
-        children: [
-            { id: 1, title: "巡园农事", href: "#part1" },
-            { id: 2, title: "梢期防虫", href: "#part2" },
-            { id: 3, title: "梢期营养", href: "#part3" },
-        ],
-    },
-    {
-        id: 2,
-        title: "开花期",
-        children: [
-            { id: 1, title: "巡园农事", href: "#part4" },
-            { id: 2, title: "摇花吹花", href: "#part5" },
-            { id: 3, title: "花期防治", href: "#part6" },
-        ],
-    },
-];
+const menuData = ref([]);
 
 const contentData = ref([
     {
@@ -1095,8 +1094,8 @@ const contentData = ref([
     },
 ]);
 
-const activePlanIndex = ref(0);
-const planList = ref([{ name: "方案1" }, { name: "方案2" }]);
+const activePlanIndex = ref(null);
+const planList = ref([]);
 const handlePlanClick = (index) => {
     activePlanIndex.value = index;
 };
@@ -1121,7 +1120,7 @@ const handleClick = (e) => {
 const addGroupRef = ref(null);
 // 新增方案
 function newPlan() {
-    addGroupRef.value.openClientPopup();
+    addGroupRef.value.openClientPopup({params: {farmIds: [farmId.value], containerId: containerId.value}});
 }
 
 
@@ -1148,6 +1147,52 @@ const toNewFarming = () => {
 };
 
 const containerRef = ref(null);
+
+onMounted(() => {
+    getFarmList(() => {
+        getPlan()
+        getWorkList()
+    })
+    
+})
+
+const miniUserId = store.state.home.miniUserId;
+
+const farmItem = ref(null)
+const farmId = ref(null)
+const containerId = ref(null)
+const farmList = ref([])
+function getFarmList(callback) {
+    VE_API.farm.fetchFarmList({userId: miniUserId, show3dFarm: false}).then(({data}) => {
+        farmList.value = data || []
+        if (data && data.length) {
+            console.log('ddd', data);
+            farmItem.value = {...data[0], value: data[0].organId}
+            farmId.value = data[0].organId
+            containerId.value = data[0].containerId
+            callback && callback()
+        }
+    })
+}
+
+function getWorkList() {
+    console.log('farmId', farmId.value, containerId.value);
+    VE_API.home.getPhenologyFarmWorkList({farmId: farmId.value, containerId: containerId.value}).then(({data}) => {
+        // contentData.value = data
+        menuData.value = data
+    })
+}
+
+function getPlan() {
+    VE_API.home.listByFarmIdAndContainerId({farmId: farmId.value, containerId: containerId.value}).then(({data}) => {
+        planList.value = data
+    })
+}
+
+function changeFarm(v) {
+    containerId.value = v.containerId
+    getPlan()
+}
 </script>
 
 <style lang="scss" scoped>
@@ -1161,12 +1206,33 @@ const containerRef = ref(null);
         display: flex;
         align-items: center;
         justify-content: space-between;
+        .farm-list {
+            padding-left: 12px;
+            ::v-deep {
+                .el-select__wrapper {
+                    box-shadow: 0 0 0 1px rgba(33, 153, 248, 0.3) inset;
+                }
+                .el-input__inner, .el-select__placeholder {
+                    color: #2199f8;
+                }
+                .el-input__prefix {
+                    color: #2199f8;
+                }
+                .el-select__caret {
+                    color: #2199f8;
+                }
+                .el-input {
+                    --el-input-placeholder-color: #2199f8;
+                }
+            }
+        }
         .plan-box {
+            flex: 1;
+            padding-left: 10px;
             display: flex;
             overflow: auto;
             white-space: nowrap;
             align-items: center;
-            padding-left: 12px;
             .plan-item {
                 color: #000000;
                 background: #f1f1f1;
@@ -1287,7 +1353,9 @@ const containerRef = ref(null);
             padding-bottom: 80px;
             box-sizing: border-box;
             .content-section {
-                position: relative;
+                .section-item {
+                    position: relative;
+                }
                 .section-id {
                     position: absolute;
                     // top: -6px;

src/views/old_mini/plan/index.vue

@@ -1245,7 +1245,6 @@ const contentData = ref([
     },
 ]);
 
-const planList = ref([{ name: "方案1" }, { name: "方案2" }]);
 const activePlanIndex = ref(0);
 const handlePlanClick = (index) => {
     activePlanIndex.value = index;
@@ -1259,7 +1258,7 @@ function newPlan() {
 
 // 将专家处方添加到我的处方
 function addToMyPlan() {
-    addGroupRef.value.openClientPopup("edit");
+    addGroupRef.value.openClientPopup({type: "edit"});
 }
 </script>
 

src/views/old_mini/price_detail/index.vue

@@ -0,0 +1,271 @@
+<template>
+    <div class="price-detail">
+        <custom-header name="报价详情"></custom-header>
+        <div class="price-content">
+            <div class="box-wrap">
+                <div class="price-info">
+                    <div class="info-title">执行时间</div>
+                    <div class="info-val">
+                        <el-date-picker
+                            class="item-input"
+                            style="width: 132px"
+                            value-format="YYYY-MM-DD"
+                            v-model="executeDate"
+                            type="date"
+                            :clearable="false"
+                            placeholder="选择日期"
+                        />
+                    </div>
+                </div>
+                <div class="price-info">
+                    <div class="info-title">施肥方式</div>
+                    <div class="info-val">叶面肥</div>
+                </div>
+            </div>
+            <div class="medicine-wrap">
+                <div class="medicine-box" v-for="(item) in 2" :key="item">
+                    <div class="item-title">肥药{{ item }}</div>
+                    <div class="box-wrap">
+                        <div class="medicine-item">
+                            <div class="item-name">肥药名称</div>
+                            <div class="item-val">乙烯利</div>
+                        </div>
+                        <div class="medicine-item">
+                            <div class="item-name">肥药品牌</div>
+                            <div class="item-val">
+                                <el-select
+                                    class="select-item"
+                                    v-model="brandVal"
+                                    placeholder="肥药品牌"
+                                    style="width: 132px"
+                                >
+                                    <el-option
+                                        v-for="(item, index) in brandList"
+                                        :key="index"
+                                        :label="item.name"
+                                        :value="item.value"
+                                    />
+                                </el-select>
+                            </div>
+                        </div>
+                        <div class="medicine-item mt-8">
+                            <div class="item-name">肥药单价</div>
+                            <div class="item-val">
+                                 <el-input-number style="width: 132px" v-model="priceVal" :min="1" />
+                            </div>
+                        </div>
+                        <div class="medicine-item">
+                            <div class="item-name">单亩用量</div>
+                            <div class="item-val">500斤</div>
+                        </div>
+                        <div class="medicine-item">
+                            <div class="item-name">亩数</div>
+                            <div class="item-val">50亩</div>
+                        </div>
+                        <div class="medicine-item">
+                            <div class="item-total">总计：</div>
+                            <div class="item-price">1582<span class="item-unit">元</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="service-wrap">
+                <div class="medicine-box">
+                    <div class="item-title">服务费用</div>
+                    <div class="box-wrap">
+                        <div class="medicine-item">
+                            <div class="item-name">执行方式</div>
+                            <div class="item-val">
+                                <el-select
+                                    class="select-item"
+                                    v-model="modeVal"
+                                    placeholder="执行方式"
+                                    style="width: 132px"
+                                >
+                                    <el-option
+                                        v-for="(item, index) in modeList"
+                                        :key="index"
+                                        :label="item.name"
+                                        :value="item.value"
+                                    />
+                                </el-select>
+                            </div>
+                        </div>
+                        <div class="medicine-item mt-8">
+                            <div class="item-name">亩单价</div>
+                            <div class="item-val">
+                                 <el-input-number style="width: 132px" v-model="priceVal" :min="1" />
+                            </div>
+                        </div>
+                        <div class="medicine-item">
+                            <div class="item-name">亩数</div>
+                            <div class="item-val">50亩</div>
+                        </div>
+                        <div class="medicine-item">
+                            <div class="item-total">总计：</div>
+                            <div class="item-price">1582<span class="item-unit">元</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="bottom-btn">
+            <div class="bottom-l">
+                合计：<span class="main-val">1258</span>元
+            </div>
+            <div class="bottom-r">确认报价</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import customHeader from "@/components/customHeader.vue";
+import { ref } from "vue";
+const executeDate = ref(null);
+
+const brandVal = ref(null)
+const brandList = ref([
+    {name: "国光", value: "国光"},
+    {name: "国光1", value: "国光1"},
+    {name: "国光2", value: "国光2"},
+])
+
+const priceVal = ref(null)
+const modeVal = ref(null)
+const modeList = ref([
+    {name: "无人机", value: "无人机"},
+    {name: "人工", value: "人工"},
+])
+</script>
+
+<style lang="scss" scoped>
+.price-detail {
+    height: 100vh;
+    position: relative;
+    font-size: 14px;
+    background: #f2f3f5;
+    color: #000;
+    .price-content {
+        padding: 12px;
+        box-sizing: border-box;
+        height: calc(100% - 40px - 74px);
+        overflow: auto;
+        ::v-deep {
+            .el-input__wrapper, .el-select__wrapper {
+                box-shadow: 0 0 0 1px rgba(33, 153, 248, 0.3) inset;
+            }
+            .el-input__inner, .el-select__placeholder {
+                color: #2199f8;
+            }
+            .el-input__prefix {
+                color: #2199f8;
+            }
+            .el-select__caret {
+                color: #2199f8;
+            }
+            .el-input {
+                --el-input-placeholder-color: #2199f8;
+            }
+            .el-input-number__decrease, .el-input-number__increase {
+                display: none;
+            }
+            .el-input-number .el-input__wrapper {
+                padding-left: 12px;
+                padding-right: 12px;
+            }
+        }
+    }
+    .box-wrap {
+        background: #fff;
+        padding: 10px;
+        border-radius: 8px;
+    }
+    .price-info {
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .info-val {
+            color: #474747;
+            width: 132px;
+            text-align: center;
+        }
+    }
+    .price-info + .price-info {
+        padding-top: 6px;
+    }
+
+    .medicine-box {
+        padding-top: 10px;
+        .item-title {
+            padding-left: 5px;
+            font-size: 16px;
+            color: #000000;
+            font-weight: bold;
+            padding-bottom: 10px;
+        }
+        .medicine-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 32px;
+            .item-name {
+                color: rgba(0, 0, 0, 0.4);
+            }
+            .item-val {
+                min-width: 142px;
+                text-align: center;
+                color: #474747;
+            }
+            .item-total {
+                font-size: 16px;
+                color: #000;
+            }
+            .item-price {
+                color: #2199F8;
+                font-size: 20px;
+                font-weight: bold;
+                .item-unit {
+                    font-size: 14px;
+                    font-weight: normal;
+                    padding-left: 2px;
+                    color: #474747;
+                }
+            }
+        }
+        .medicine-item + .medicine-item {
+            padding-top: 2px;
+        }
+        .mt-8 {
+            margin-top: 8px;
+        }
+    }
+
+    .bottom-btn {
+        height: 74px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: #fff;
+        padding: 12px;
+        box-sizing: border-box;
+        box-shadow: 0 -1px 11px rgba(0, 0, 0, 0.1);
+        .bottom-l {
+            color: #000000;
+            font-size: 16px;
+            .main-val {
+                color: #2199F8;
+                font-size: 24px;
+                font-weight: bold;
+                padding-right: 4px;
+            }
+        }
+        .bottom-r {
+            background: linear-gradient(136deg, #9FD5FF, #2199F8);
+            padding: 8px 32px;
+            border-radius: 20px;
+            color: #fff;
+        }
+    }
+}
+</style>