diff --git a/src/views/order/loadOrder/index.vue b/src/views/order/loadOrder/index.vue
index 151d480..970541d 100644
--- a/src/views/order/loadOrder/index.vue
+++ b/src/views/order/loadOrder/index.vue
@@ -317,10 +317,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-container {
-  padding: 20px;
-}
-
 .filter-container {
   display: flex;
   align-items: center;
diff --git a/src/views/order/settlementOrder/generateOrder/index.vue b/src/views/order/settlementOrder/generateOrder/index.vue
index d60a811..f658624 100644
--- a/src/views/order/settlementOrder/generateOrder/index.vue
+++ b/src/views/order/settlementOrder/generateOrder/index.vue
@@ -371,10 +371,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-container {
-  padding: 20px;
-}
-
 .page-title {
   margin-bottom: 20px;
   color: #303133;
diff --git a/src/views/order/settlementOrder/index.vue b/src/views/order/settlementOrder/index.vue
index e2dc487..e20205f 100644
--- a/src/views/order/settlementOrder/index.vue
+++ b/src/views/order/settlementOrder/index.vue
@@ -195,10 +195,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-container {
-  padding: 20px;
-}
-
 .filter-container {
   display: flex;
   align-items: center;
diff --git a/src/views/order/settlementOrder/orderDetail/index.vue b/src/views/order/settlementOrder/orderDetail/index.vue
index 5bb8b19..21da6eb 100644
--- a/src/views/order/settlementOrder/orderDetail/index.vue
+++ b/src/views/order/settlementOrder/orderDetail/index.vue
@@ -171,9 +171,8 @@ export default {
     SettlementPdf
   },
   data() {
-    const defaultStartDate = new Date();
-    const defaultEndDate = new Date();
     return {
+      orderId: '',
       loading: false,
       scenicAreaOptions: [],
       settlementStatus: 0,
@@ -182,9 +181,9 @@ export default {
       query: {
         batchNo: "",
         scenicArea: "",
-        dateRange: [defaultStartDate, defaultEndDate],
+        dateRange: [],
       },
-      defaultDateRange: [defaultStartDate, defaultEndDate],
+      defaultDateRange: [],
       page: {
         current: 1,
         size: 10
@@ -209,9 +208,20 @@ export default {
     }))
 
     // 获取订单详情并处理数据
-    const orderId = this.$route.query.orderId
-    if (orderId) {
+    this.orderId = this.$route.query.orderId
+    if(this.orderId) {
       this.loading = true
+      this.getOrderDetail(this.orderId)
+    } else {
+      this.$message.error('没有提供订单ID')
+    }
+  },
+  methods: {
+    getOrderStatusText,
+    getSettlementStatusText,
+    getOrderStatusClass,
+    getSettlementStatusClass,
+    async getOrderDetail(orderId) {
       try {
         const settleOrderDetail = await getSettleOrderDetail(orderId)
         await Promise.all(settleOrderDetail.map(async (item) => {
@@ -224,8 +234,9 @@ export default {
           item.createBy = pilotResponse.name
 
           // 获取景区名称
-          const scenic = scenicResponse.find(s => s.key === item.attractionId)
-          item.scenicName = scenic ? scenic.value : ''
+          console.log(this.scenicAreaOptions)
+          const scenic = this.scenicAreaOptions.find(s => s.value === item.attractionId)
+          item.scenicName = scenic ? scenic.label : ''
         }))
         this.originalData = settleOrderDetail // 保存原始数据
         this.tableData = settleOrderDetail
@@ -239,13 +250,7 @@ export default {
       } finally {
         this.loading = false
       }
-    }
-  },
-  methods: {
-    getOrderStatusText,
-    getSettlementStatusText,
-    getOrderStatusClass,
-    getSettlementStatusClass,
+    },
     handleSearch() {
       this.loading = true
       try {
@@ -290,10 +295,10 @@ export default {
     },
     async handleCancelSettlement() {
       try {
-        await updateSettleOrderStatus(this.$route.query.orderId, 3)
+        await updateSettleOrderStatus(this.orderId, 3)
         this.settlementStatus = 3
         this.$message.success('取消结算成功')
-        this.handleSearch() // 刷新数据
+        this.getOrderDetail(this.orderId) // 刷新数据
       } catch (error) {
         console.error('Error canceling settlement:', error)
         this.$message.error('取消结算失败')
@@ -307,9 +312,9 @@ export default {
       this.page.current = val;
     },
     async handlePrint() {
-      if (this.$route.query.orderId) {
+      if (this.orderId) {
         try {
-          // Wait for Vue to render the component
+          // 等待VUE渲染组件
           await this.$nextTick()
           await this.$refs.settlementPdf.generatePDF()
         } catch (error) {
@@ -322,11 +327,11 @@ export default {
     },
     async handleStatusChange(status) {
       try {
-        await updateSettleOrderStatus(this.$route.query.orderId, status)
+        await updateSettleOrderStatus(this.orderId, status)
         this.settlementStatus = status
         const statusText = status === 1 ? '已确认' : '已完成'
         this.$message.success(`结算单状态已更新为：${statusText}`)
-        this.handleSearch() // 刷新数据
+        this.getOrderDetail(this.orderId) // 刷新数据
       } catch (error) {
         console.error('Error updating settlement status:', error)
         this.$message.error('更新结算状态失败')
@@ -337,10 +342,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-container {
-  padding: 20px;
-}
-
 .page-title {
   margin-bottom: 20px;
   font-size: 22px;
diff --git a/src/views/transport-fee/components/SetFeeModal.vue b/src/views/transport-fee/components/SetFeeModal.vue
index 668ddf1..2feae61 100644
--- a/src/views/transport-fee/components/SetFeeModal.vue
+++ b/src/views/transport-fee/components/SetFeeModal.vue
@@ -7,21 +7,13 @@
   >
     <!-- 表单区域 -->
     <el-form ref="feeForm" :model="form" :rules="rules" label-width="100px">
-      <!-- 景区名称（只读） -->
-      <el-form-item label="景区名称" prop="scenicName">
-        <el-input v-model="form.scenicName" disabled></el-input>
-      </el-form-item>
-
       <!-- 金额输入（带校验） -->
       <el-form-item label="金额 (KG)" prop="feePerKg">
-        <el-input-number
+        <el-input
           v-model="form.feePerKg"
-          :min="0.01"
-          :step="0.01"
-          :precision="2"
           placeholder="请输入金额"
           style="width: 100%"
-        ></el-input-number>
+        ></el-input>
       </el-form-item>
     </el-form>
 
@@ -34,65 +26,65 @@
 </template>
 
 <script>
+import { edit } from "@/api/system/scenic";
 
 export default {
-  name: 'SetFeeModal',
+  name: "SetFeeModal",
   props: {
     visible: {
       type: Boolean,
-      required: true
+      required: true,
     },
     scenicInfo: {
       type: Object,
-      default: () => null
-    }
+      default: () => null,
+    },
   },
   data() {
     return {
       form: {
-        scenicName: '',
         feePerKg: null,
-        id: null
+        id: null,
       },
       rules: {
         feePerKg: [
-          { required: true, message: '请输入金额', trigger: 'blur' },
-          { type: 'number', min: 0.01, message: '金额必须大于 0', trigger: 'blur' }
-        ]
-      }
-    }
+          { required: true, message: "请输入金额", trigger: "blur" },
+        ],
+      },
+    };
   },
   watch: {
     scenicInfo(newVal) {
       if (newVal) {
         this.form = {
-          scenicName: newVal.scenicName || '',
           feePerKg: newVal.feePerKg || null,
-          id: newVal.id || null
-        }
+          id: newVal.id || null,
+        };
       }
-    }
+    },
   },
   methods: {
- async handleSubmit() {
-  try {
-    const valid = await this.$refs.feeForm.validate()
-    if (valid) {
-      // 模拟请求成功（不调用真实 API）
-      console.log('提交的数据:', {
-        id: this.form.id,
-        feePerKg: this.form.feePerKg
-      })
-
-      this.$message.success('设置成功')
-      this.$emit('success')
-      this.handleCancel()
-    }
-  } catch (error) {
-    console.error('表单验证失败', error)
-    this.$message.error('请输入正确的金额')
-  }
-}
-}
-}
-</script>
\ No newline at end of file
+    handleCancel() {
+      this.$emit("update:visible", false);
+      this.$refs.feeForm.resetFields();
+    },
+    async handleSubmit() {
+      try {
+        const valid = await this.$refs.feeForm.validate();
+        if (valid) {
+          await edit({
+            id: this.form.id,
+            price: this.form.feePerKg,
+          });
+          this.$message.success("设置成功");
+          this.$emit("success");
+          this.handleCancel();
+        }
+      } catch (error) {
+        console.error("修改景区价格失败:", error);
+        this.$message.error(error.message || "修改失败");
+      }
+    },
+  },
+};
+</script>
diff --git a/src/views/transport-fee/index.vue b/src/views/transport-fee/index.vue
index da36c44..3fa175d 100644
--- a/src/views/transport-fee/index.vue
+++ b/src/views/transport-fee/index.vue
@@ -1,27 +1,27 @@
 <template>
   <div class="app-container">
     <!-- 搜索栏 -->
-    <el-card class="box-card">
-      <div class="filter-container">
-        <el-input
-          v-model="query.scenicName"
-          placeholder="请输入景区名称或区域名称"
-          style="width: 200px"
-          clearable
-        />
-        <el-button type="primary" @click="handleSearch">查询</el-button>
-        <el-button @click="handleReset">重置</el-button>
-      </div>
-    </el-card>
+    <div class="filter-container">
+      <el-input
+        v-model="query.scenicName"
+        placeholder="请输入景区名称或区域名称"
+        style="width: 200px"
+        clearable
+      />
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
 
     <!-- 表格 -->
     <el-table :data="tableData" stripe style="width: 100%">
       <el-table-column prop="areaName" label="区域名称" align="left" />
       <el-table-column prop="scenicName" label="景区名称" align="left" />
-      <el-table-column prop="feePerKg" label="金额 / KG" align="left" />
+      <el-table-column prop="feePerKg" label="金额 / KG" align="center" />
       <el-table-column label="操作" width="120" align="center" fixed="right">
         <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="handleSetFee(scope.row)">设置金额</el-button>
+          <el-button type="primary" size="mini" @click="handleSetFee(scope.row)"
+            >设置金额</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -49,17 +49,18 @@
 </template>
 
 <script>
-
+import SetFeeModal from "./components/SetFeeModal.vue";
+import { list } from "@/api/system/scenic";
 export default {
-  name: 'TransportFee',
+  name: "TransportFee",
   components: {
-    SetFeeModal
+    SetFeeModal,
   },
   data() {
     return {
       // 查询条件
       query: {
-        scenicName: ''
+        scenicName: "",
       },
       // 表格数据
       tableData: [],
@@ -67,74 +68,84 @@ export default {
       page: {
         current: 1,
         size: 10,
-        total: 0
+        total: 0,
       },
       // 弹窗控制
       setFeeVisible: false,
-      currentScenicInfo: null
-    }
+      currentScenicInfo: null,
+    };
   },
   mounted() {
-    this.fetchData()
+    this.fetchData();
   },
   methods: {
-  async fetchData() {
-    // 模拟数据填充
-    this.tableData = [
-      { areaName: '华南区', scenicName: '白云山', feePerKg: 5.5 },
-      { areaName: '华东区', scenicName: '西湖', feePerKg: 4.8 }
-    ]
-    this.page.total = 2
-  }
-},
-
+    async fetchData() {
+      try {
+        const params = {
+          page: this.page.current - 1,
+          size: this.page.size,
+          name: this.query.scenicName,
+        };
+        const { content, totalElements } = await list(params);
+        this.tableData = content.map((item) => ({
+          id: item.id,
+          areaName: item.areaName,
+          scenicName: item.name,
+          feePerKg: item.price ? item.price + '元' : "无",
+        }));
+        this.page.total = parseInt(totalElements);
+      } catch (error) {
+        console.error("获取景区数据失败:", error);
+        this.$message.error("获取景区数据失败");
+      }
+    },
     // 搜索
     handleSearch() {
-      this.page.current = 1
-      this.fetchData()
+      this.page.current = 1;
+      this.fetchData();
     },
 
     // 重置
     handleReset() {
       this.query = {
-        scenicName: ''
-      }
-      this.page.current = 1
-      this.fetchData()
+        scenicName: "",
+      };
+      this.page.current = 1;
+      this.fetchData();
     },
 
     // 分页大小变更
     handleSizeChange(size) {
-      this.page.size = size
-      this.fetchData()
+      this.page.size = size;
+      this.fetchData();
     },
 
     // 当前页变更
     handleCurrentChange(current) {
-      this.page.current = current
-      this.fetchData()
+      this.page.current = current;
+      this.fetchData();
     },
 
     // 设置金额按钮
     handleSetFee(row) {
-      this.currentScenicInfo = row
-      this.setFeeVisible = true
+      this.currentScenicInfo = {
+        id: row.id,
+        scenicName: row.scenicName,
+        feePerKg: row.feePerKg,
+      };
+      this.setFeeVisible = true;
     },
 
     // 设置金额成功回调
     handleSetFeeSuccess() {
-      this.setFeeVisible = false
-      this.fetchData()
-    }
-  }
-
+      this.setFeeVisible = false;
+      this.fetchData();
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-.app-container {
-  padding: 20px;
-}
-
 .filter-container {
   display: flex;
   align-items: center;
@@ -149,4 +160,4 @@ export default {
 .pagination-container {
   margin-top: 20px;
 }
-</style>
\ No newline at end of file
+</style>