优化

src/data/stepMockData.js

@@ -66,3 +66,6 @@ export const partInfoMap = {
 };
 
 export const defaultPaymentTerms = "货物出厂验收合格前，买方需将所提货物全额货款支付给卖方。";
+export const defaultObjectionTerms = "买方提出对产品质量异议的时间为收到货物起5个工作日内，卖方应在收到异议书次日起3个工作日内与买方沟通，通过技术指导方式解决问题，如不能解决，买方可以要求卖方前往修理，如修理后仍不能使用，买方可以提出更换请求。如买方在收到货物后5日内未提出异议，则视为同意卖方处理意见。";
+export const defaultForceTerms = "如因不可抗力的原因，致使卖方推迟或不能交货，卖方不需为此承担责任。但卖方需在上述事件发生次日起七天内，以传真等书面方式通知买方，同时，卖方应采取一切必要措施及早交货。";
+export const defaultDisputeTerms = "合同双方因履行本合同发生争议时，应本着友好合作的精神共同协商解决。如协商后双方仍然无法达成一致则向买方所在地法院申请裁决。";

src/layout/components/Navbar.vue

@@ -117,7 +117,7 @@ function logout() {
   })
     .then(() => {
       userStore.logOut().then(() => {
-        location.href = "/index";
+        location.href = "/";
       });
     })
     .catch(() => {});

src/views/order/intention/Step3.vue

@@ -1,63 +1,87 @@
 <template>
   <div class="step3-container">
-    <el-form label-width="100px">
+    <div class="content-wrapper">
-      <el-form-item label="付款条件">
+      <el-tabs v-model="activeTab" tab-position="left" class="left-tabs">
+        <el-tab-pane label="付款条件" name="pay">
+          <div class="editor-container">
             <el-input
               type="textarea"
-          :rows="2"
+              :rows="10"
               v-model="form.pay"
               placeholder="请输入付款条件"
             />
-      </el-form-item>
+          </div>
-      <el-form-item label="异议">
+        </el-tab-pane>
+
+        <el-tab-pane label="异议" name="objection">
+          <div class="editor-container">
             <el-input
               type="textarea"
-          :rows="2"
+              :rows="10"
               v-model="form.objection"
               placeholder="请输入异议信息"
             />
-      </el-form-item>
+          </div>
-      <el-form-item label="不可抗力">
+        </el-tab-pane>
+
+        <el-tab-pane label="不可抗力" name="force">
+          <div class="editor-container">
             <el-input
               type="textarea"
-          :rows="2"
+              :rows="10"
               v-model="form.force"
               placeholder="请输入不可抗力信息"
             />
-      </el-form-item>
+          </div>
-      <el-form-item label="争议解决">
+        </el-tab-pane>
+
+        <el-tab-pane label="争议解决" name="dispute">
+          <div class="editor-container">
             <el-input
               type="textarea"
-          :rows="2"
+              :rows="10"
               v-model="form.dispute"
               placeholder="请输入争议解决方式"
             />
-      </el-form-item>
+          </div>
-      <el-form-item label="其他">
+        </el-tab-pane>
+
+        <el-tab-pane label="其他" name="other">
+          <div class="editor-container">
             <el-input
               type="textarea"
-          :rows="2"
+              :rows="10"
               v-model="form.other"
               placeholder="请输入其他信息"
             />
-      </el-form-item>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
     <div class="btn-row">
       <el-button @click="$emit('prev-step')">上一步</el-button>
       <el-button type="primary" @click="$emit('next-step')">下一步</el-button>
     </div>
-    </el-form>
   </div>
 </template>
 
 <script setup>
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
-import { defaultPaymentTerms } from '@/data/stepMockData';
+import {
+  defaultPaymentTerms,
+  defaultObjectionTerms,
+  defaultForceTerms,
+  defaultDisputeTerms,
+} from "@/data/stepMockData";
+
+const activeTab = ref('pay');
 
 const form = reactive({
   pay: defaultPaymentTerms,
-  objection: "",
+  objection: defaultObjectionTerms,
-  force: "",
+  force: defaultForceTerms,
-  dispute: "",
+  dispute: defaultDisputeTerms,
   other: "",
 });
 </script>
@@ -67,11 +91,45 @@ const form = reactive({
   background: #fff;
   padding: 24px;
   border-radius: 8px;
+  height: calc(100vh - 200px);
+  display: flex;
+  flex-direction: column;
 }
+
+.content-wrapper {
+  flex: 1;
+  overflow: hidden;
+}
+
+.left-tabs {
+  height: 100%;
+  
+  :deep(.el-tabs__content) {
+    height: 100%;
+    padding: 20px;
+  }
+  
+  :deep(.el-tabs__nav-wrap) {
+    padding-right: 20px;
+  }
+}
+
+.editor-container {
+  height: 100%;
+  padding: 0 20px;
+  
+  :deep(.el-textarea__inner) {
+    height: 100%;
+    min-height: 400px;
+  }
+}
+
 .btn-row {
   display: flex;
   justify-content: flex-end;
   gap: 16px;
   margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
 }
 </style>