feat: 新增全局布局样式并提升组件响应式表现

- 在 global-layout.scss 中引入全局布局样式，统一页面宽度与对齐方式
- 更新多个组件与页面以优化响应式，包括宽度、间距及 flex 布局等调整
- 在 API 请求中增加 loading 状态管理，改善用户体验
- 优化领券中心与商品详情页，提升功能与 UI 一致性

buyer/src/pages/shopEntry/ShopEntry.vue

@@ -3,17 +3,32 @@
     <div style="height: 20px"></div>
     <div class="content">
       <h1>店铺入驻</h1>
-      <el-steps :current="currentIndex" class="margin">
+      <el-steps :active="currentIndex" class="margin" finish-status="success">
         <el-step title="企业资质信息"></el-step>
         <el-step title="财务资质信息"></el-step>
         <el-step title="其他信息"></el-step>
         <el-step title="提交审核"></el-step>
       </el-steps>
-      <first-apply v-if="currentIndex == 0 && dataReview" :content="firstData" @change="nextPage"></first-apply>
+      <div v-if="initLoading" class="step-loading" v-loading="true"></div>
+      <template v-else>
+        <first-apply
+          v-if="currentIndex === 0 && agreementAccepted"
+          :content="firstData"
+          @change="nextPage"
+        ></first-apply>
 
-      <second-apply v-if="currentIndex == 1 && dataReview" :content="secondData" @change="nextPage"></second-apply>
+        <second-apply
+          v-if="currentIndex === 1 && agreementAccepted"
+          :content="secondData"
+          @change="nextPage"
+        ></second-apply>
 
-      <third-apply v-if="currentIndex == 2 && dataReview" :content="thirdData" @change="nextPage"></third-apply>
+        <third-apply
+          v-if="currentIndex === 2 && agreementAccepted"
+          :content="thirdData"
+          @change="nextPage"
+        ></third-apply>
+      </template>
 
       <div class="success-page" v-if="currentIndex == 3">
         <span v-if="storeDisable == '' || storeDisable == 'APPLYING'">入驻申请提交成功，等待平台审核</span>
@@ -28,15 +43,15 @@
     </div>
 
     <el-dialog title="店铺入驻协议" v-model="showAgreement" width="1200" :closable="false" :close-on-click-modal="false">
-      <Scroll :on-reach-bottom="handleReachBottom">
+      <div class="agreement-scroll">
         <div class="agreeent-con" v-html="agreementCon"></div>
-      </Scroll>
+      </div>
 
       <template #footer><div style="text-align: center">
         <p>
           <el-checkbox v-model="checked">我已同意以上协议</el-checkbox>
         </p>
-        <el-button type="primary" :disabled="!checked" class="margin" @click="showAgreement = false">同意协议填写资质信息</el-button>
+        <el-button type="primary" :disabled="!checked" class="margin" @click="confirmAgreement">同意协议填写资质信息</el-button>
       </div></template>
     </el-dialog>
   </div>
@@ -63,101 +78,114 @@ export default {
       secondData: {}, // 第二步数据
       thirdData: {}, // 第三步数据
       storeDisable: "", // APPLY OPEN 开店中 CLOSED 关闭 REFUSED 拒绝 APPLYING 申请中，审核
-      dataReview: true, // 根据接口返回判断是否可展示数据
+      initLoading: true,
+      agreementAccepted: false, // 是否已同意入驻协议
     };
   },
   methods: {
+    confirmAgreement() {
+      this.agreementAccepted = true;
+      this.showAgreement = false;
+      sessionStorage.setItem("shopEntryAgreementAccepted", "1");
+    },
+    assignApplyData(data) {
+      const first = [
+        "companyAddressPath",
+        "companyAddress",
+        "companyAddressIdPath",
+        "companyEmail",
+        "companyName",
+        "employeeNum",
+        "companyPhone",
+        "legalId",
+        "legalName",
+        "licencePhoto",
+        "legalPhoto",
+        "licenseNum",
+        "linkName",
+        "linkPhone",
+        "registeredCapital",
+        "scope",
+      ];
+      const second = [
+        "settlementBankAccountName",
+        "settlementBankAccountNum",
+        "settlementBankBranchName",
+        "settlementBankJointName",
+      ];
+      const third = [
+        "goodsManagementCategory",
+        "storeCenter",
+        "storeDesc",
+        "storeLogo",
+        "storeName",
+        "storeAddressIdPath",
+        "storeAddressPath",
+        "storeAddressDetail",
+      ];
+
+      this.storeDisable = data.storeDisable || "";
+      Object.assign(this.firstData, Object.fromEntries(first.map((key) => [key, data[key]])));
+      Object.assign(this.secondData, Object.fromEntries(second.map((key) => [key, data[key]])));
+      Object.assign(this.thirdData, Object.fromEntries(third.map((key) => [key, data[key]])));
+    },
     getArticle() {
       // 入驻协议
       agreement().then((res) => {
         this.agreementCon = res.result.content;
       });
-    },
-    handleReachBottom(){
-
     },
     getData(status) {
-      // 获取已填写店铺信息
       applyStatus().then((res) => {
-        if (res.success) {
-          if (!res.result) {
+        if (!res.success) {
+          return;
+        }
+        if (!res.result) {
+          if (status === "init" && !this.agreementAccepted) {
             this.showAgreement = true;
-          } else {
-            this.dataReview = false;
-            let data = res.result;
-            let first = [
-              "companyAddressPath",
-              "companyAddress",
-              "companyAddressIdPath",
-              "companyEmail",
-              "companyName",
-              "employeeNum",
-              "companyPhone",
-              "legalId",
-              "legalName",
-              "licencePhoto",
-              "legalPhoto",
-              "licenseNum",
-              "linkName",
-              "linkPhone",
-              "registeredCapital",
-              "scope",
-            ];
-            let second = [
-              "settlementBankAccountName",
-              "settlementBankAccountNum",
-              "settlementBankBranchName",
-              "settlementBankJointName",
-            ];
-            let third = [
-              "goodsManagementCategory",
-              "storeCenter",
-              "storeDesc",
-              "storeLogo",
-              "storeName",
-              "storeAddressIdPath",
-              "storeAddressPath",
-              "storeAddressDetail",
-            ];
-
-            this.storeDisable = data.storeDisable;
-
-            first.forEach((e) => {
-              this.firstData[e] = data[e];
-            });
-            second.forEach((e) => {
-              this.secondData[e] = data[e];
-            });
-            third.forEach((e) => {
-              this.thirdData[e] = data[e];
-            });
-            if (status === "init") {
-              if (this.storeDisable === "APPLY") {
-                this.currentIndex = 0;
-              } else {
-                this.currentIndex = 3;
-              }
-            }
-            this.$nextTick(() => {
-              this.dataReview = true;
-              this.$forceUpdate();
-            });
           }
+          return;
+        }
+
+        this.assignApplyData(res.result);
+        if (status === "init") {
+          this.agreementAccepted = true;
+          sessionStorage.setItem("shopEntryAgreementAccepted", "1");
+          if (this.storeDisable === "APPLY") {
+            this.currentIndex = 0;
+          } else {
+            this.currentIndex = 3;
+          }
+        }
+      }).finally(() => {
+        if (status === "init") {
+          this.initLoading = false;
+        }
+      });
+    },
+    refreshApplyData() {
+      applyStatus().then((res) => {
+        if (res.success && res.result) {
+          this.assignApplyData(res.result);
         }
       });
     },
     // 下一步
     nextPage(step) {
       this.currentIndex = step;
-      this.getData("next");
+      if (step > 0 && step < 3) {
+        this.refreshApplyData();
+      } else if (step === 3) {
+        this.refreshApplyData();
+      }
     },
   },
+  created() {
+    this.agreementAccepted = sessionStorage.getItem("shopEntryAgreementAccepted") === "1";
+  },
   mounted() {
-
-      this.getData("init");
-      this.getArticle();
-
-
+    this.getData("init");
+    this.getArticle();
   },
 };
 </script>
@@ -187,6 +215,13 @@ export default {
 
   }
 }
+.agreement-scroll {
+  max-height: 500px;
+  overflow-y: auto;
+}
+.step-loading {
+  min-height: 320px;
+}
 .success-page {
   height: 500px;
   width: 100%;