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

- 在 global-layout.scss 中引入全局布局样式，统一页面宽度与对齐方式 - 更新多个组件与页面以优化响应式，包括宽度、间距及 flex 布局等调整 - 在 API 请求中增加 loading 状态管理，改善用户体验 - 优化领券中心与商品详情页，提升功能与 UI 一致性
2026-08-07 03:15:01 +08:00 · 2026-06-23 10:17:35 +08:00
parent c1447b4376
commit 8a60e23214
129 changed files with 5236 additions and 2232 deletions
--- a/buyer/src/pages/CouponCenter.vue
+++ b/buyer/src/pages/CouponCenter.vue
@@ -9,6 +9,7 @@
          </router-link>
          <p>领券中心</p>
          <el-input
+            v-model="keyword"
            style="width: 400px"
            @keyup.enter="search"
            placeholder="搜索优惠券"
@@ -17,8 +18,8 @@

        <div class="fontsize_18 recommend">推荐好券</div>

-        <empty v-if="list.length === 0" />
-        <ul class="coupon-list" v-else>
+        <empty v-if="!loading && list.length === 0" />
+        <ul class="coupon-list" v-else-if="list.length > 0">
          <li v-for="(item, index) in list" class="coupon-item" :key="index">
            <div class="c-left">
              <div>
@@ -29,7 +30,7 @@
                <span
                  v-if="item.couponType === 'DISCOUNT'"
                  class="fontsize_12 global_color"
-                  ><span class="price">{{ item.couponDiscount }}</span>折</span>
+                  ><span class="price">{{ item.couponDiscount || item.discount }}</span>折</span>
                <span class="describe"
                  >满{{ item.consumeThreshold }}元可用</span>
              </div>
@@ -60,6 +61,8 @@ export default {
    return {
      list: [], // 优惠券列表
      total: 0, // 优惠券总数
+      loading: false,
+      keyword: "",
      params: {
        // 请求参数
        getType: "FREE",
@@ -70,25 +73,31 @@ export default {
  },
  methods: {
    // 搜索优惠券
-    search(item) {
-      this.params.couponName = item;
+    search() {
+      this.params.couponName = this.keyword.trim();
      this.params.pageNumber = 1;
      this.getList();
    },
    // 获取优惠券列表
    getList() {
-      this.$Spin.show();
+      if (this.loading) return;
+      this.loading = true;
      couponList(this.params)
        .then((res) => {
-          this.$Spin.hide();
-          this.loading = false;
-          if (res.success) {
-            this.list = res.result.records;
-            this.total = res.result.total;
+          if (res && res.success && res.result) {
+            this.list = res.result.records || [];
+            this.total = res.result.total || 0;
+          } else {
+            this.list = [];
+            this.total = 0;
          }
        })
        .catch(() => {
-          this.$Spin.hide();
+          this.list = [];
+          this.total = 0;
+        })
+        .finally(() => {
+          this.loading = false;
        });
    },
    // 分页 改变页码
@@ -104,12 +113,12 @@ export default {
    },
    // 领取优惠券
    receive(item) {
-      receiveCoupon(item.id).then((res) => {
-        if (res.success) {
-          console.log(item);
+      receiveCoupon(item.id)
+        .then((res) => {
+          if (!res || !res.success) return;
          this.$Modal.confirm({
            title: "领取优惠券",
-            content: "<p>优惠券领取成功，可到我的优惠券页面查看</p>",
+            content: "优惠券领取成功，可到我的优惠券页面查看",
            okText: "我的优惠券",
            cancelText: "立即使用",
            closable: true,
@@ -123,8 +132,8 @@ export default {
              });
            },
          });
-        }
-      });
+        })
+        .catch(() => {});
    },
    // 优惠券可用范围
    useScope(type, storeName) {
@@ -178,8 +187,54 @@ export default {
  text-align: center;
 }
 .coupon-item {
+  overflow: hidden;
+  $claim-width: 55px;
+
+  .c-left {
+    width: calc(100% - #{$claim-width});
+    box-sizing: border-box;
+  }
+
  b {
-    background: url("../assets/images/small-circle.png") top left repeat-y;
+    right: $claim-width;
+    width: 0;
+    background: none;
+    border-right: 1px dashed #e0e0e0;
+  }
+
+  .c-right {
+    width: $claim-width;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    letter-spacing: 4px;
+    font-size: 16px;
+    line-height: 1;
+    cursor: pointer;
+    text-decoration: none;
+    user-select: none;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  i.circle-top,
+  i.circle-bottom {
+    right: calc(#{$claim-width} - 9px);
+    width: 18px;
+    height: 18px;
+  }
+
+  i.circle-top {
+    top: -9px;
+  }
+
+  i.circle-bottom {
+    bottom: -9px;
  }
 }
 .pageration {
--- a/buyer/src/pages/ForgetPassword.vue
+++ b/buyer/src/pages/ForgetPassword.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="forget-password" @click='$refs.verify.show = false'>
+  <div class="forget-password" @click="hideVerify">
    <div style="height:50px;"></div>
    <!-- 顶部logo -->
    <div class="logo-box">
@@ -151,6 +151,9 @@ export default {
    };
  },
  methods: {
+    hideVerify() {
+      this.$refs.verify?.close?.();
+    },
    // 提交短信验证码，修改密码
    next () {
      this.$refs.formFirst.validate((valid) => {
@@ -230,12 +233,12 @@ export default {
    },
    verifyChange (con) { // 验证通过
      if (!con.status) return;
-      this.$refs.verify.show = false;
+      this.hideVerify();
      this.verifyStatus = true;
    },
    verifyBtnClick () {
      if (!this.verifyStatus) {
-        this.$refs.verify.init();
+        this.$refs.verify?.init();
      }
    }
  },
--- a/buyer/src/pages/GoodsDetail.vue
+++ b/buyer/src/pages/GoodsDetail.vue
@@ -202,19 +202,26 @@ export default {
 .shop-item-path {
  height: 38px;
  @include background_color($light_background_color);
-  line-height: 38px;
  color: #2c2c2c;
 }

 .shop-nav-container {
  width: 1200px;
+  height: 100%;
  margin: 0 auto;
  position: relative;
+  display: flex;
+  align-items: center;
+
+  :deep(.el-breadcrumb) {
+    line-height: 1;
+  }

  .store-collect {
    position: absolute;
    right: 20px;
-    top: 0;
+    top: 50%;
+    transform: translateY(-50%);
    color: #999;

    span {
--- a/buyer/src/pages/GoodsList.vue
+++ b/buyer/src/pages/GoodsList.vue
@@ -19,16 +19,18 @@
                :key="index"
                @click="orderBy(item.en, index)"
              >
-                <span :class="{ 'goods-list-tool-active': index === sortIndex }"
-                  >{{ item.title }}<el-icon><ArrowDown /></el-icon></span>
+                <span :class="{ 'goods-list-tool-active': index === sortIndex }">
+                  {{ item.title }}
+                  <el-icon><ArrowDown /></el-icon>
+                </span>
              </li>
              <li @click="orderBy('price', 5, 'up')" class="price-sort">
                <span :class="{ 'goods-list-tool-active': 5 === sortIndex }">
                  价格
-                  <div>
+                  <span class="price-arrows">
                    <el-icon :class="{ 'price-color': sortPriceIndex == 'desc' }"><ArrowUp /></el-icon>
                    <el-icon :class="{ 'price-color': sortPriceIndex == 'asc' }"><ArrowDown /></el-icon>
-                  </div>
+                  </span>
                </span>
              </li>
            </ul>
@@ -44,7 +46,7 @@
              @click="goGoodsDetail(item.id, item.goodsId)"
            >
              <div class="goods-show-img">
-                <img width="220" height="220" :src="item.thumbnail" />
+                <img :src="item.thumbnail" />
              </div>
              <div class="goods-show-price">
                <span>
@@ -72,22 +74,21 @@

              <div class="goods-show-right">
                <el-tag
-                  class="goods-show-tag"
+                  class="goods-show-tag goods-show-tag-self"
                  color="red"
+                  effect="dark"
                  v-if="item.selfOperated"
                >
                  自营
                </el-tag>
                <el-tag
-                  class="goods-show-tag"
-                  color="blue"
+                  class="goods-show-tag goods-show-tag-physical"
                  v-if="item.goodsType === 'VIRTUAL_GOODS'"
                >
                  虚拟
                </el-tag>
                <el-tag
-                  class="goods-show-tag"
-                  color="blue"
+                  class="goods-show-tag goods-show-tag-physical"
                  v-else-if="item.goodsType === 'PHYSICAL_GOODS'"
                >
                  实物
@@ -103,7 +104,8 @@
          @size-change="changePageSize"
          :total="total"
          :page-size="params.pageSize"
-         layout="total, sizes, prev, pager, next"></el-pagination>
+          layout="total, prev, pager, next, sizes"
+        ></el-pagination>
      </div>
    </div>
    <el-skeleton size="large" fix v-if="loading"></el-skeleton>
@@ -244,6 +246,8 @@ export default {
  },
  components: {
    GoodsClassNav,
+    ArrowDown,
+    ArrowUp,
  },
 };
 </script>
@@ -274,6 +278,24 @@ export default {
  padding: 0 3px;
 }

+.goods-show-tag-self {
+  color: #fff;
+
+  :deep(.el-tag__content) {
+    color: #fff;
+  }
+}
+
+.goods-show-tag-physical {
+  background-color: #e6f4ff;
+  border-color: #b3d8ff;
+  color: #409eff;
+
+  :deep(.el-tag__content) {
+    color: #409eff;
+  }
+}
+
 .goods-show-seller {
  // padding:3px 0;
  vertical-align: middle;
@@ -295,6 +317,8 @@ export default {
 .goods-show-right {
  display: flex;
  flex-direction: row;
+  align-items: center;
+  gap: 6px;
  margin-top: 5px;
 }

@@ -314,38 +338,40 @@ export default {
  background-color: #f1f1f1;
 }
 .goods-list-tool ul {
+  display: flex;
+  align-items: center;
+  height: 100%;
  padding-left: 15px;
  font-size: 12px;
-  margin-top: 10px;
-  &::after {
-    content: "";
-    display: block;
-    clear: left;
-  }
+  margin: 0;
+  list-style: none;

  .price-sort {
-    span {
-      display: inline-block;
-      vertical-align: middle;
-      width: 50px;
-      height: 22px;
-      position: relative;
-      line-height: 15px;
-      top: -2px;
-      left: 0;
-    }
-    span > div {
-      display: inline-block;
+    .price-arrows {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 12px;
+      height: 12px;
+      flex-shrink: 0;
+      padding: 0;
+      border: none;
+      margin: 0;
+      background: transparent;
+      line-height: 0;
+
      .el-icon {
-        font-size: 12px;
-        position: absolute;
-        &:nth-child(1) {
-          top: 1px;
-        }
-        &:nth-child(2) {
-          top: 7px;
+        font-size: 8px;
+        line-height: 1;
+        height: 6px;
+
+        :deep(svg) {
+          width: 8px;
+          height: 8px;
        }
      }
+
      .price-color {
        color: #b3b3b3;
      }
@@ -354,28 +380,37 @@ export default {
 }
 .goods-list-tool li {
  cursor: pointer;
-  float: left;
 }
-.goods-list-tool span {
+.goods-list-tool li > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
  padding: 3px 5px;
  border: 1px solid #ccc;
  margin-left: -1px;
  background-color: #fff;
+  line-height: 1;
+  white-space: nowrap;
+  box-sizing: border-box;
 }
-.goods-list-tool span:hover {
+.goods-list-tool li > span:hover {
  border-color: $theme_color;
  position: relative;
  text-decoration: none;
  z-index: 1;
 }
-.goods-list-tool .el-icon {
-  font-weight: bold;
-  font-size: 16px;
+.goods-list-tool li > span .el-icon {
+  font-size: 12px;
+  line-height: 1;
 }
 .goods-list-tool-active {
  color: #fff;
  border-left: 1px solid #ccc;
  background-color: $theme_color !important;
+
+  .price-color {
+    color: rgba(255, 255, 255, 0.65) !important;
+  }
 }

 /* ---------------商品栏结束------------------- */
--- a/buyer/src/pages/Index.vue
+++ b/buyer/src/pages/Index.vue
@@ -29,10 +29,11 @@
    <BaseHeader></BaseHeader>
    <!-- 搜索框、logo -->
    <Search></Search>
-    <!-- 商品分类 -->
-    <cateNav :showAlways="true" v-if="showNav" :large="carouselLarge" :opacity="carouselOpacity"></cateNav>
-    <!-- 楼层装修部分 -->
-    <model-form ref="modelForm" :data="modelForm"></model-form>
+    <div class="index-main">
+      <!-- 商品分类 + 楼层装修（同一宽度容器，保证与分类栏左缘对齐） -->
+      <cateNav :showAlways="true" v-if="showNav" :large="carouselLarge" :opacity="carouselOpacity"></cateNav>
+      <model-form ref="modelForm" :data="modelForm"></model-form>
+    </div>
    <!-- 底部栏 -->
    <BaseFooter></BaseFooter>
    <!-- 侧边栏 -->
--- a/buyer/src/pages/Login.vue
+++ b/buyer/src/pages/Login.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="login" @keyup.enter="handleSubmit('formInline')">
    <!-- 顶部logo -->
-    <div class="top-content" @click='$refs.verify.show = false'>
+    <div class="top-content" @click="hideVerify">
      <div class="logo-box">
        <img :src="$store.state.logoImg" @click="$router.push('/')" />
        <div>欢迎登录</div>
@@ -12,13 +12,13 @@
      <!-- 轮播 -->
      <el-carousel :interval="5000" arrow="never" class="login-carousel" height="550px">
        <el-carousel-item>
-          <div class="demo-carousel" @click='$refs.verify.show = false'>
+          <div class="demo-carousel" @click="hideVerify">
            <img src="https://lili-system.oss-cn-beijing.aliyuncs.com/background.jpg" />
          </div>
        </el-carousel-item>
      </el-carousel>
      <!-- 登录模块 -->
-      <div class="form-box" @click='$refs.verify.show = false'>
+      <div class="form-box" @click="hideVerify">
        <div class="account-number">
          <div class="tab-switch">
            <span>{{ type ? '账号登录' : '验证码登录' }}</span>
@@ -70,7 +70,7 @@
          <div v-show="!scannerCodeLoginFLag">
          <!-- 账号密码登录 -->
          <el-form ref="formInline" :model="formData" :rules="ruleInline" v-show="type === true"
-                @click.self='$refs.verify.show = false'>
+                @click.self="hideVerify">
            <el-form-item prop="username">
              <el-input type="text" v-model="formData.username" clearable placeholder="用户名">
                <template #prepend><el-icon><User /></el-icon></template>
@@ -87,7 +87,7 @@
          </el-form>
          <!-- 验证码登录 -->
          <el-form ref="formSms" :model="formSms" :rules="ruleInline" v-show="type === false"
-                @click.self='$refs.verify.show = false'>
+                @click.self="hideVerify">
            <el-form-item prop="mobile">
              <el-input type="text" v-model="formSms.mobile" clearable placeholder="手机号">
                <template #prepend><el-icon><Lock /></el-icon></template>
@@ -126,8 +126,8 @@
              </svg>
            </div>
            <div class="register">
-              <span style="color:red" @click="$router.push('signUp')">还没有账号？点击立即注册</span>
-              <span @click="$router.push('forgetPassword')">忘记密码</span>
+              <span style="color:red" @click.stop="$router.push('signUp')">还没有账号？点击立即注册</span>
+              <span @click.stop="$router.push('forgetPassword')">忘记密码</span>
            </div>
          </div>
        </div>
@@ -224,17 +224,20 @@ export default {
    }
  },
  methods: {
+    hideVerify() {
+      this.$refs.verify?.close?.();
+    },

    // 登录
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.type) {
-            this.$refs.verify.init();
+            this.$refs.verify?.init();
          } else {
            let data = JSON.parse(JSON.stringify(this.formSms));
            apiLogin.smsLogin(data).then((res) => {
-              this.$refs.verify.show = false;
+              this.hideVerify();
              if (res.success) {
                this.$Message.success("登录成功");
                storage.setItem("accessToken", res.result.accessToken);
@@ -306,7 +309,7 @@ export default {
        // 账号密码登录
        let data = JSON.parse(JSON.stringify(this.formData));
        data.password = md5(data.password);
-        this.$refs.verify.show = false;
+        this.hideVerify();
        this.$Spin.show();
        apiLogin
          .login(data)
@@ -323,13 +326,13 @@ export default {
          });
      } else {
        this.verifyStatus = true;
-        this.$refs.verify.show = false;
+        this.hideVerify();
      }
    },
    // 开启滑块验证
    verifyBtnClick() {
      if (!this.verifyStatus) {
-        this.$refs.verify.init();
+        this.$refs.verify?.init();
      }
    },
    handleWebLogin(type) {
@@ -448,7 +451,7 @@ export default {
        this.$refs.formSms.resetFields();
      }
      this.verifyStatus = false;
-      this.$refs.verify.show = false;
+      this.hideVerify();
      clearInterval(this.interval);
      this.codeMsg = "发送验证码";
      this.time = 60;
@@ -614,11 +617,12 @@ export default {

 .register {
  display: flex;
-
  margin-top: -10px;
+  font-size: 12px;

  span {
    margin-left: 10px;
+    font-size: 12px;

    &:hover {
      cursor: pointer;
--- a/buyer/src/pages/Merchant.vue
+++ b/buyer/src/pages/Merchant.vue
@@ -67,7 +67,7 @@
        >

          <div class="goods-show-img">
-            <img :src="item.small" height="220" width="220" alt=""/>
+            <img :src="item.small" alt=""/>
          </div>
          <div class="goods-show-price">
            <span>
--- a/buyer/src/pages/SignUp.vue
+++ b/buyer/src/pages/SignUp.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sign-up" @click='$refs.verify.show = false'>
+  <div class="sign-up" @click="hideVerify">
    <div style="height:50px;"></div>
    <div class="logo-box">
      <img
@@ -75,7 +75,7 @@
          :verifyType="verifyType"
          @change="verifyChange"
        ></Verify>
-        <div class="login-btn">已有账号？<a @click="$router.push('login')">立即登录</a></div>
+        <div class="login-btn">已有账号？<a @click.stop="$router.push('login')">立即登录</a></div>
    </div>
    <div class="foot">
      <div type="flex" justify="space-around" class="help">
@@ -139,22 +139,26 @@ export default {
    };
  },
  methods: {
+    hideVerify() {
+      this.$refs.verify?.close?.();
+    },
    // 注册
    handleRegist () {
      this.$refs.formRegist.validate((valid) => {
-        if (valid) {
-          let data = JSON.parse(JSON.stringify(this.formRegist));
-          data.password = md5(data.password);
-          apiLogin.regist(data).then((res) => {
-            if (res.success) {
-              this.$Message.success('注册成功!');
-              this.$router.push('login');
-            } else {
-              this.$Message.warning(res.message);
-            }
-          });
-        } else {}
-      });
+        if (!valid) {
+          return;
+        }
+        const data = JSON.parse(JSON.stringify(this.formRegist));
+        data.password = md5(data.password);
+        apiLogin.regist(data).then((res) => {
+          if (res.success) {
+            this.$Message.success('注册成功!');
+            this.$router.push('login');
+          } else {
+            this.$Message.warning(res.message || '注册失败');
+          }
+        }).catch(() => {});
+      }).catch(() => {});
    },
    // 发送短信验证码
    sendCode () {
@@ -187,21 +191,21 @@ export default {
              }
            }, 1000);
          } else {
-            this.$Message.warning(res.message);
+            this.$Message.warning(res.message || '验证码发送失败');
          }
-        });
+        }).catch(() => {});
      }
    },
    // 图片验证码成功回调
    verifyChange (con) {
      if (!con.status) return;
-      this.$refs.verify.show = false;
+      this.hideVerify();
      this.verifyStatus = true;
    },
    // 打开图片验证码
    verifyBtnClick () {
      if (!this.verifyStatus) {
-        this.$refs.verify.init();
+        this.$refs.verify?.init();
      }
    }
  },
--- a/buyer/src/pages/home/memberCenter/CommentList.vue
+++ b/buyer/src/pages/home/memberCenter/CommentList.vue
@@ -143,8 +143,35 @@ export default {
  font-size: 13px;
  position: relative;
 }
+.order-row,
+.order-item-view {
+  display: flex;
+  align-items: center;
+
+  > [span] {
+    box-sizing: border-box;
+    padding: 0 8px;
+  }
+
+  > [span='12'] {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+
+  > [span='4'] {
+    flex: 0 0 16.666667%;
+    max-width: 16.666667%;
+  }
+
+  > [span='6'] {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+}
+
 .order-item-view {
  padding: 10px 20px;
+  align-items: flex-start;
 }
 .order-item {
  text-align: center;
--- a/buyer/src/pages/home/memberCenter/Distribution.vue
+++ b/buyer/src/pages/home/memberCenter/Distribution.vue
@@ -470,29 +470,36 @@ export default {
    },
    distribution() {
      // 获取分销商信息
-      distribution().then((res) => {
-        if (res.result) {
-          this.result = res.result;
-          let type = res.result.distributionStatus;
-          if (type === "PASS") {
-            this.status = 2;
-            this.getGoodsData();
-          } else if ( type === "REFUSE") {
+      distribution()
+        .then((res) => {
+          if (res?.result) {
+            this.result = res.result;
+            const type = res.result.distributionStatus;
+            if (type === "PASS") {
+              this.status = 2;
+              this.getGoodsData();
+            } else if (type === "REFUSE") {
+              this.status = 0;
+            } else if (type === "RETREAT") {
+              this.status = 4;
+            } else if (type === "APPEAL") {
+              this.status = 5;
+            } else {
+              this.status = 1;
+            }
+          } else if (res?.code === 22000) {
+            // 分销功能未开启
+            this.status = 3;
+          } else {
+            // 没有资格申请，显示申请表单
            this.status = 0;
-          } else if (type === "RETREAT") {
-            this.status = 4;
-          }else if (type === "APPEAL") {
-            this.status = 5;
-          }else {
-            this.status = 1;
          }
-        } else if (!res.data.success && res.data.code === 22000) {
-          this.status = 3;
-        } else {
-          // 没有资格申请 先去实名认证
-          this.status = 0;
-        }
-      });
+        })
+        .catch((err) => {
+          if (err?.code === 22000) {
+            this.status = 3;
+          }
+        });
    },
  },
 };
--- a/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
+++ b/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
@@ -10,12 +10,10 @@
    <!-- 物流评分、服务评分 -->
    <div class="delivery-rate">
      <div class="fontsize_16">物流服务评价：</div>
-      <div class="color999">
-        <span>物流评价：<el-rate disabled :value="Number(orderGoods.deliveryScore)" /></span>
-        <span>服务评价：<el-rate disabled :value="Number(orderGoods.serviceScore)" /></span>
-        <span
-          >服务评价：<el-rate disabled :value="Number(orderGoods.descriptionScore)"
-        /></span>
+      <div class="color999 delivery-rate-items">
+        <span>物流评价：<el-rate disabled :model-value="Number(orderGoods.deliveryScore) || 0" /></span>
+        <span>服务评价：<el-rate disabled :model-value="Number(orderGoods.serviceScore) || 0" /></span>
+        <span>描述评价：<el-rate disabled :model-value="Number(orderGoods.descriptionScore) || 0" /></span>
      </div>
    </div>
    <!-- 添加订单评价  左侧商品详情  右侧评价框 -->
@@ -133,13 +131,29 @@ export default {
  display: flex;
  align-items: center;
  margin-top: 20px;
-  height: 50px;
+  min-height: 50px;
  border-bottom: 1px solid #eee;
  > div:nth-child(1) {
    width: 120px;
    font-weight: bold;
  }
 }
+
+.delivery-rate-items {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+}
+
+.delivery-rate-items :deep(.el-rate) {
+  --el-rate-fill-color: #ffb400;
+  --el-rate-disabled-fill-color: #ffb400;
+}
+
+:deep(.el-rate__icon.is-active) {
+  color: #ffb400;
+}
 .goods-eval li {
  display: flex;
  border-bottom: 1px solid #eee;
--- a/buyer/src/pages/home/orderCenter/AfterSale.vue
+++ b/buyer/src/pages/home/orderCenter/AfterSale.vue
@@ -45,17 +45,27 @@
            <div>
              <span @click="shopPage(order.shopId)">{{ order.storeName }}</span>
            </div>
-            <div>
+            <div class="order-actions">
              <!-- 订单基础操作 -->
-              <el-button @click="goDetail(order.sn)" type="info" size="small">售后详情</el-button>
-              <el-button @click="openModal(order)"
-                      v-if="order.serviceStatus == 'PASS' &&
-                order.serviceType != 'RETURN_MONEY'"
-                      type="warning" size="small">提交物流
-              </el-button>
-              <el-button @click="cancel(order.sn)" type="danger" v-if="order.afterSaleAllowOperationVO.cancel" size="small">
-                取消售后
-              </el-button>
+              <el-button
+                @click="goDetail(order.sn)"
+                type="warning"
+                size="small"
+                class="after-sale-action-btn"
+              >售后详情</el-button>
+              <el-button
+                @click="openModal(order)"
+                v-if="order.serviceStatus == 'PASS' && order.serviceType != 'RETURN_MONEY'"
+                size="small"
+                class="after-sale-action-btn submit-logistics-btn"
+              >提交物流</el-button>
+              <el-button
+                @click="cancel(order.sn)"
+                type="danger"
+                v-if="order.afterSaleAllowOperationVO.cancel"
+                size="small"
+                class="after-sale-action-btn"
+              >取消售后</el-button>
            </div>
          </div>
        </div>
@@ -96,8 +106,14 @@
            <el-input v-model="form.logisticsNo" placeholder="请填写物流单号"></el-input>
          </el-form-item>
          <el-form-item label="发货时间" prop="mDeliverTime">
-            <el-date-picker type="date" style="width:100%" v-model="form.mDeliverTime" @change="changeTime"
-                        format="yyyy-MM-dd" placeholder="选择发货时间"></el-date-picker>
+            <el-date-picker
+              type="date"
+              style="width:100%"
+              v-model="form.mDeliverTime"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              placeholder="选择发货时间"
+            />
          </el-form-item>
        </el-form>
      </div>
@@ -225,32 +241,32 @@ export default {
    },
    // 提交物流信息
    submitDelivery() {
-      this.submitLoading = true
-      afterSaleDelivery(this.form).then(res => {
-        if (res.success) {
-          this.logisticsShow = false;
-          this.$Message.success('提交成功')
-          this.getList()
-        }
-        this.submitLoading = false
-      }).catch(() => {
-        this.submitLoading = false
-      })
+      this.$refs.form?.validate((valid) => {
+        if (!valid) return;
+        this.submitLoading = true;
+        afterSaleDelivery(this.form).then(res => {
+          if (res.success) {
+            this.logisticsShow = false;
+            this.$Message.success('提交成功');
+            this.getList();
+          }
+          this.submitLoading = false;
+        }).catch(() => {
+          this.submitLoading = false;
+        });
+      });
    },
    // 提交物流modal
    openModal(row) {
-      console.log(row);
      this.singleOrder = row;
-      this.form.afterSaleSn = row.sn
      this.logisticsShow = true;
-      this.$refs.form.resetFields()
      if (!this.companyList.length) {
-        this.getCompany()
+        this.getCompany();
      }
-    },
-    // 格式化时间
-    changeTime(time) {
-      this.form.mDeliverTime = time;
+      this.$nextTick(() => {
+        this.$refs.form?.resetFields();
+        this.form.afterSaleSn = row.sn;
+      });
    }
  }
 };
@@ -331,11 +347,31 @@ export default {
      }
    }

-    > div:nth-child(3) {
-      width: 100px;
+    .order-actions {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      min-width: 100px;

-      .el-button {
-        margin-bottom: 10px;
+      .after-sale-action-btn {
+        display: block;
+        margin: 0;
+        min-width: 88px;
+      }
+
+      :deep(.submit-logistics-btn) {
+        background-color: #ff9900 !important;
+        border-color: #ff9900 !important;
+        color: #fff !important;
+
+        &:hover,
+        &:focus {
+          background-color: #e68a00 !important;
+          border-color: #e68a00 !important;
+          color: #fff !important;
+        }
      }
    }
  }
--- a/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
+++ b/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
@@ -88,7 +88,14 @@
            <el-input v-model="form.logisticsNo" placeholder="请填写物流单号"></el-input>
          </el-form-item>
          <el-form-item label="发货时间" prop="mDeliverTime">
-            <el-date-picker type="date" style="width:100%" v-model="form.mDeliverTime" @change="changeTime" format="yyyy-MM-dd" placeholder="选择发货时间"></el-date-picker>
+            <el-date-picker
+              type="date"
+              style="width:100%"
+              v-model="form.mDeliverTime"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              placeholder="选择发货时间"
+            />
          </el-form-item>
        </el-form>
      </div>
@@ -206,16 +213,14 @@ export default {
    },
    // 提交物流modal
    openModal () {
-      this.form.afterSaleSn = this.afterSale.sn
      this.logisticsShow = true;
-      this.$refs.form.resetFields()
      if (!this.companyList.length) {
-        this.getCompany()
+        this.getCompany();
      }
-    },
-    // 格式化时间
-    changeTime (time) {
-      this.form.mDeliverTime = time;
+      this.$nextTick(() => {
+        this.$refs.form?.resetFields();
+        this.form.afterSaleSn = this.afterSale.sn;
+      });
    }
  },
  mounted () {
--- a/buyer/src/pages/home/orderCenter/MyOrder.vue
+++ b/buyer/src/pages/home/orderCenter/MyOrder.vue
@@ -4,12 +4,10 @@
    <card _Title="我的订单" :_Size="16" :_Tabs="changeWay" @_Change="change" v-if="!homePage"></card>
    <card _Title="我的订单" :_Size="16" :_Tabs="changeWay" @_Change="change" _More="全部订单" _Src="/home/MyOrder" v-else></card>
    <!-- 搜索 筛选 -->
-    <div class="mb_24 box" v-if="!homePage">
-      <div class="global_float_right" >
+    <div class="order-search-bar" v-if="!homePage">
+      <div class="global_float_right">
        <el-input
          class="width_300"
-          
-          
          v-model="params.keywords"
          @keyup.enter="getList"
          placeholder="请输入订单号搜索"
@@ -62,12 +60,12 @@
          <div>
            <span @click="shopPage(order.storeId)">{{ order.storeName }}</span>
          </div>
-          <div>
+          <div class="order-actions">
            <!-- 订单基础操作 -->
-            <el-button @click="orderDetail(order.sn)" type="info" size="small">订单详情</el-button>
+            <el-button @click="orderDetail(order.sn)" type="warning" size="small">订单详情</el-button>
            <el-button @click="handleCancelOrder(order.sn)" type="danger" v-if="order.allowOperationVO.cancel" size="small">取消订单</el-button>
            <el-button @click="goPay(order.sn)" size="small" type="success" v-if="order.allowOperationVO.pay">去支付</el-button>
-            <el-button @click="received(order.sn)" size="small" type="warning" v-if="order.allowOperationVO.rog">确认收货</el-button>
+            <el-button @click="received(order.sn)" size="small" class="confirm-receipt-btn" v-if="order.allowOperationVO.rog">确认收货</el-button>
            <!-- 售后 -->
            <el-button v-if="order.groupAfterSaleStatus && (order.groupAfterSaleStatus.includes('NOT_APPLIED')|| order.groupAfterSaleStatus.includes('PART_AFTER_SALE'))"
                    @click="applyAfterSale(order.orderItems)" size="small">申请售后</el-button>
@@ -92,12 +90,18 @@
      </div>
      <template #footer><div></div></template>
    </el-dialog>
-    <el-dialog v-model="cancelAvail" title="请选择取消订单原因" @ok="sureCancel" @cancel="cancelAvail = false">
-      <el-radio-group v-model="cancelParams.reason" vertical type="button" button-style="solid">
+    <el-dialog v-model="cancelAvail" title="请选择取消订单原因">
+      <el-radio-group v-model="cancelParams.reason">
        <el-radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
-           {{item.reason}}
+          {{ item.reason }}
        </el-radio>
      </el-radio-group>
+      <template #footer>
+        <div style="text-align: right">
+          <el-button @click="cancelAvail = false">取消</el-button>
+          <el-button type="primary" @click="sureCancel">确定</el-button>
+        </div>
+      </template>
    </el-dialog>
  </div>
 </template>
@@ -302,7 +306,9 @@ export default {
 .wrapper {
  margin-bottom: 40px;
 }
-.box {
+.order-search-bar {
+  margin-top: 16px;
+  margin-bottom: 16px;
  overflow: hidden;
 }
 .page-size {
@@ -373,10 +379,30 @@ export default {
      }
    }

-    > div:nth-child(3) {
-      width: 100px;
+    .order-actions {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      min-width: 100px;
+
      .el-button {
-        margin-bottom: 10px;
+        margin: 0;
+        min-width: 88px;
+      }
+
+      :deep(.confirm-receipt-btn) {
+        background-color: #ff9900 !important;
+        border-color: #ff9900 !important;
+        color: #fff !important;
+
+        &:hover,
+        &:focus {
+          background-color: #e68a00 !important;
+          border-color: #e68a00 !important;
+          color: #fff !important;
+        }
      }
    }
  }
--- a/buyer/src/pages/home/orderCenter/OrderDetail.vue
+++ b/buyer/src/pages/home/orderCenter/OrderDetail.vue
@@ -173,16 +173,16 @@
            <td>{{refundPriceList(goods.isRefund)}}</td>
            <td>{{ $filters.unitPrice(goods.refundPrice, "￥") }}</td>
            <td>{{ $filters.unitPrice((goods.goodsPrice * goods.num), "￥") }}</td>
-            <td>
+            <td class="order-item-actions">
              <el-button
                v-if="
                  goods.afterSaleStatus.includes('NOT_APPLIED') ||
                  goods.afterSaleStatus.includes('PART_AFTER_SALE')
                "
                @click="applyAfterSale(goods.sn)"
-                type="info"
+                type="warning"
                size="small"
-                class="mb_5"
+                class="order-item-action-btn mb_5"
                >申请售后</el-button
              >
              <el-button
@@ -190,14 +190,14 @@
                @click="comment(order.order.sn, goodsIndex)"
                size="small"
                type="success"
-                class="fontsize_12 mb_5"
+                class="order-item-action-btn fontsize_12 mb_5"
                >评价</el-button
              >
              <el-button
                v-if="goods.complainStatus == 'NO_APPLY'"
                @click="complain(order.order.sn, goodsIndex)"
                type="warning"
-                class="fontsize_12"
+                class="order-item-action-btn fontsize_12 mb_5"
                size="small"
                >投诉</el-button
              >
@@ -239,19 +239,20 @@
    <el-dialog
      v-model="cancelAvail"
      title="请选择取消订单原因"
-      @ok="sureCancel"
-      @cancel="cancelAvail = false"
    >
      <el-radio-group
        v-model="cancelParams.reason"
-        vertical
-        type="button"
-        button-style="solid"
      >
        <el-radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
          {{ item.reason }}
        </el-radio>
      </el-radio-group>
+      <template #footer>
+        <div style="text-align: right">
+          <el-button @click="cancelAvail = false">取消</el-button>
+          <el-button type="primary" @click="sureCancel">确定</el-button>
+        </div>
+      </template>
    </el-dialog>

    <!--查询物流-->
@@ -594,6 +595,10 @@ table {
    height: 40px;
    background: #eee;
  }
+  th {
+    font-size: 12px;
+    font-weight: normal;
+  }
  td {
    padding: 5px;
    text-align: center;
@@ -613,6 +618,16 @@ table {
    }
  }
 }
+
+.order-item-actions {
+  vertical-align: middle;
+
+  .order-item-action-btn {
+    display: block;
+    margin: 0 auto 5px;
+    min-width: 88px;
+  }
+}
 /** 订单价格 */
 .order-price {
  text-align: right;
--- a/buyer/src/pages/home/userCenter/Coupons.vue
+++ b/buyer/src/pages/home/userCenter/Coupons.vue
@@ -133,21 +133,73 @@ export default {
 <style scoped lang="scss">
@import "../../../assets/styles/coupon.scss";
 .coupon-item {
-  height: 125px;
+  overflow: hidden;
+  height: 145px;
+  margin-left: 0;
+  $claim-width: 55px;
+
  .c-left {
-    padding: 16px;
+    width: calc(100% - #{$claim-width});
+    box-sizing: border-box;
+    padding: 20px;
+
+    p {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
  }
+
+  b {
+    right: $claim-width;
+    width: 0;
+    background: none;
+    border-right: 1px dashed #e0e0e0;
+  }
+
  .c-right {
-    padding: 20px 16px;
-    width: 43px;
-    font-size: 14px;
+    width: $claim-width;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    letter-spacing: 4px;
+    font-size: 16px;
+    line-height: 1;
+    cursor: pointer;
+    text-decoration: none;
+    user-select: none;
+
+    &:hover {
+      opacity: 0.9;
+    }
  }
+
  .canot-use {
    color: #999;
    background-color: #eee;
+    cursor: not-allowed;
+
+    &:hover {
+      opacity: 1;
+    }
  }
-  i {
-    right: 34px;
+
+  i.circle-top,
+  i.circle-bottom {
+    right: calc(#{$claim-width} - 9px);
+    width: 18px;
+    height: 18px;
+  }
+
+  i.circle-top {
+    top: -9px;
+  }
+
+  i.circle-bottom {
+    bottom: -9px;
  }
 }

--- a/buyer/src/pages/payment/Pay.vue
+++ b/buyer/src/pages/payment/Pay.vue
@@ -30,8 +30,13 @@
            :key="index">
            <div>
              <span>{{ item.name }}</span>
-              <el-tag class="ml_10" v-if="item.isDefault" color="red">默认</el-tag>
-              <el-tag class="ml_10" v-if="item.alias" color="warning">{{ item.alias }}
+              <el-tag class="ml_10 address-default-tag" v-if="item.isDefault" color="red" effect="dark">默认</el-tag>
+              <el-tag
+                class="ml_10 address-alias-tag"
+                v-if="item.alias"
+                color="rgb(255, 153, 0)"
+                effect="dark"
+              >{{ item.alias }}
              </el-tag>
            </div>
            <div>{{ item.mobile }}</div>
@@ -182,8 +187,16 @@
            </div>
            <img class="used" v-if="usedCouponId.includes(item.id)" src="../../assets/images/geted.png" alt="" />
            <b></b>
-            <a class="c-right" @click="useCoupon(item.id, true)">立即使用</a>
-            <a class="c-right" v-if="usedCouponId.includes(item.id)" @click="useCoupon(item.id, false)">放弃优惠</a>
+            <a
+              class="c-right"
+              v-if="!usedCouponId.includes(item.id)"
+              @click="useCoupon(item.id, true)"
+            >立即使用</a>
+            <a
+              class="c-right c-right-cancel"
+              v-else
+              @click="useCoupon(item.id, false)"
+            >放弃优惠</a>
            <i class="circle-top"></i>
            <i class="circle-bottom"></i>
          </li>
@@ -1020,6 +1033,18 @@ export default {
  display: flex;
  flex-wrap: wrap;

+  :deep(.address-default-tag) {
+    --el-tag-text-color: #fff;
+    color: #fff;
+  }
+
+  :deep(.address-alias-tag) {
+    --el-tag-bg-color: rgb(255, 153, 0);
+    --el-tag-border-color: rgb(255, 153, 0);
+    --el-tag-text-color: #fff;
+    color: #fff;
+  }
+
  >div {
    border: 1px dotted #949494;
    width: 265px;
@@ -1340,32 +1365,92 @@ export default {
 }

 .coupon-item {
-  width: 260px;
+  width: 280px;
  height: 125px;
  margin-right: 10px;
  margin-bottom: 10px;
+  overflow: hidden;
+  $claim-width: 55px;

-  .c-right {
-    width: 30px;
-    padding: 10px 7px;
+  .c-left {
+    width: calc(100% - #{$claim-width});
+    padding: 14px 12px;
+    box-sizing: border-box;
+
+    > div,
+    > p {
+      margin-bottom: 8px;
+    }
+
+    > div .price {
+      font-size: 18px;
+    }
+
+    p {
+      margin-bottom: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 12px;
+    }
  }

  b {
-    background: url("../../assets/images/small-circle.png") top left repeat-y;
-    right: 28px;
+    right: $claim-width;
+    width: 0;
+    background: none;
+    border-right: 1px dashed #e0e0e0;
+  }
+
+  .c-right {
+    width: $claim-width;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    letter-spacing: 3px;
+    font-size: 14px;
+    line-height: 1;
+    cursor: pointer;
+    text-decoration: none;
+    user-select: none;
+    box-sizing: border-box;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  .c-right-cancel {
+    letter-spacing: 2px;
+    font-size: 13px;
  }

  .circle-top,
  .circle-bottom {
-    right: 22px;
+    right: calc(#{$claim-width} - 9px);
+    width: 18px;
+    height: 18px;
+  }
+
+  .circle-top {
+    top: -9px;
+  }
+
+  .circle-bottom {
+    bottom: -9px;
  }

  .used {
    position: absolute;
-    top: 60px;
-    right: 40px;
-    width: 50px;
-    height: 50px;
+    top: 50%;
+    right: calc(#{$claim-width} + 8px);
+    transform: translateY(-50%);
+    width: 46px;
+    height: 46px;
+    z-index: 3;
  }
 }

--- a/buyer/src/pages/payment/PayDone.vue
+++ b/buyer/src/pages/payment/PayDone.vue
@@ -7,7 +7,7 @@
    <div class="pay-btn">
      <el-button type="primary" @click="$router.push('/')">继续逛逛</el-button>
      <el-button type="info" v-if="$route.query.orderType ==='RECHARGE'" @click="$router.push('/home/MoneyManagement')">查看余额</el-button>
-      <el-button type="info" v-else @click="$router.push('/home/myOrder')">查看订单</el-button>
+      <el-button class="view-order-btn" v-else @click="$router.push('/home/myOrder')">查看订单</el-button>
    </div>
  </div>
 </template>
@@ -35,4 +35,15 @@ export default {
    margin:0 4px;
  }
 }
+
+.view-order-btn {
+  --el-button-bg-color: rgb(250, 100, 25);
+  --el-button-border-color: rgb(250, 100, 25);
+  --el-button-hover-bg-color: rgb(250, 100, 25);
+  --el-button-hover-border-color: rgb(250, 100, 25);
+  --el-button-active-bg-color: rgb(250, 100, 25);
+  --el-button-active-border-color: rgb(250, 100, 25);
+  --el-button-text-color: #fff;
+  color: #fff;
+}
 </style>
--- a/buyer/src/pages/payment/PayMent.vue
+++ b/buyer/src/pages/payment/PayMent.vue
@@ -100,7 +100,7 @@ export default {
      if (way === 'WALLET') {
        this.$Modal.confirm({
          title: '支付确认',
-          content: '<p>确认使用余额支付吗？</p>',
+          content: '确认使用余额支付吗？',
          onOk: () => {
            pay(params).then(res => {
              if (res.success) {
--- a/buyer/src/pages/promotion/PointMall.vue
+++ b/buyer/src/pages/promotion/PointMall.vue
@@ -18,7 +18,7 @@
        @click="goGoodsDetail(item.id)"
      >
        <div class="goods-show-img">
-          <img width="220" height="220" :src="item.goodsSku.thumbnail" />
+          <img :src="item.goodsSku.thumbnail" />
        </div>
        <div class="goods-show-price">
          <span>
--- a/buyer/src/pages/shopEntry/FirstApply.vue
+++ b/buyer/src/pages/shopEntry/FirstApply.vue
@@ -1,6 +1,14 @@
 <template>
  <div class="company-msg">
-    <el-form ref="firstForm" :model="form" :rules="rules" label-width="140px">
+    <el-form
+      ref="firstForm"
+      :model="form"
+      :rules="rules"
+      label-width="140px"
+      @submit.prevent
+      @keydown.enter.prevent
+      @focusout="saveDraft"
+    >
      <h4>基础信息</h4>
      <el-form-item prop="companyName" label="公司名称">
        <el-input
@@ -182,6 +190,8 @@ import * as RegExp from '@/plugins/RegExp.js';
 import multipleMap from "@/components/map/multiple-map";
 import storage from '@/plugins/storage';
 import { commonUrl } from '@/plugins/request.js';
+const FIRST_APPLY_DRAFT_KEY = 'shopEntryFirstDraft';
+
 export default {
  components: { multipleMap, View, Delete },
  props: {
@@ -199,6 +209,20 @@ export default {

      previewPicture: '', // 预览图片url
      form: { // 表单数据
+        companyName: '',
+        companyAddressIdPath: '',
+        companyAddressPath: '',
+        companyAddress: '',
+        employeeNum: '',
+        companyPhone: '',
+        registeredCapital: '',
+        linkName: '',
+        linkPhone: '',
+        companyEmail: '',
+        licenseNum: '',
+        scope: '',
+        legalName: '',
+        legalId: '',
        legalPhoto: [],
        licencePhoto: []
      },
@@ -241,7 +265,8 @@ export default {
        ]
      },
      uploadLoading1: false, // 上传loading
-      uploadLoading: false // 上传loading
+      uploadLoading: false, // 上传loading
+      contentInitialized: false
    };
  },
  methods: {
@@ -269,7 +294,10 @@ export default {
          applyFirst(params)
            .then((res) => {
              this.loading = false;
-              if (res.success) this.$emit('change', 1);
+              if (res.success) {
+                sessionStorage.removeItem(FIRST_APPLY_DRAFT_KEY);
+                this.$emit('change', 1);
+              }
            })
            .catch(() => {
              this.loading = false;
@@ -337,18 +365,57 @@ export default {
    // 删除图片
    handleRemove (index, listName) {
      this.form[listName].splice(index, 1);
+    },
+    initFormFromContent(content) {
+      if (!content || !Object.keys(content).length) return;
+      this.form = JSON.parse(JSON.stringify(content));
+      this.form.legalPhoto = content.legalPhoto
+        ? String(content.legalPhoto).split(',').filter(Boolean)
+        : [];
+      this.form.licencePhoto = content.licencePhoto
+        ? String(content.licencePhoto).split(',').filter(Boolean)
+        : [];
+      this.contentInitialized = true;
+    },
+    restoreDraft() {
+      const draft = sessionStorage.getItem(FIRST_APPLY_DRAFT_KEY);
+      if (!draft) return;
+      try {
+        const parsed = JSON.parse(draft);
+        this.form = {
+          legalPhoto: [],
+          licencePhoto: [],
+          ...parsed,
+        };
+        this.form.legalPhoto = Array.isArray(parsed.legalPhoto) ? parsed.legalPhoto : [];
+        this.form.licencePhoto = Array.isArray(parsed.licencePhoto) ? parsed.licencePhoto : [];
+      } catch (e) {
+        sessionStorage.removeItem(FIRST_APPLY_DRAFT_KEY);
+      }
+    },
+    saveDraft() {
+      sessionStorage.setItem(FIRST_APPLY_DRAFT_KEY, JSON.stringify(this.form));
+    }
+  },
+  watch: {
+    content: {
+      immediate: true,
+      handler(val) {
+        if (this.contentInitialized || !val || !Object.keys(val).length) return;
+        this.initFormFromContent(val);
+      }
    }
  },
  mounted () {
    this.accessToken.accessToken = storage.getItem('accessToken');
-    if (Object.keys(this.content).length) { // 处理回显数据
-      this.form = JSON.parse(JSON.stringify(this.content));
-      if (this.form.licencePhoto) {
-        this.form.legalPhoto = this.content.legalPhoto.split(',');
-        this.form.licencePhoto = this.content.licencePhoto.split(',');
-
-      }
+    if (Object.keys(this.content).length) {
+      this.initFormFromContent(this.content);
+    } else {
+      this.restoreDraft();
    }
+  },
+  beforeUnmount() {
+    this.saveDraft();
  }
 };
 </script>
--- a/buyer/src/pages/shopEntry/SecondApply.vue
+++ b/buyer/src/pages/shopEntry/SecondApply.vue
@@ -90,11 +90,9 @@ export default {
    }
  },
  mounted () {
-    if (this.content != {}) {
+    if (this.content && Object.keys(this.content).length) {
      this.form = JSON.parse(JSON.stringify(this.content));
-      this.$forceUpdate();
    }
-    this.$refs.secondForm.resetFields()
  }
 };
 </script>
--- a/buyer/src/pages/shopEntry/ShopEntry.vue
+++ b/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%;
--- a/buyer/src/pages/shopEntry/ThirdApply.vue
+++ b/buyer/src/pages/shopEntry/ThirdApply.vue
@@ -148,7 +148,7 @@ export default {
            .then((res) => {
              this.loading = false;
              if (res.success) this.$emit('change', 3);
-              this.$parent.getData()
+              this.$parent.getData('next');
            })
            .catch(() => {
              this.loading = false;
@@ -228,19 +228,17 @@ export default {
  mounted () {
    this.accessToken.accessToken = storage.getItem('accessToken');
    this.getCategoryList();
-    if (this.content != {}) {
+    if (this.content && Object.keys(this.content).length) {
      this.form = JSON.parse(JSON.stringify(this.content));
      if (this.form.storeLogo) {
-        this.form.storeLogo = this.content.storeLogo.split(',');
-        this.form.goodsManagementCategory = this.content.goodsManagementCategory.split(
-          ','
-        );
+        this.form.storeLogo = String(this.content.storeLogo).split(',').filter(Boolean);
+        this.form.goodsManagementCategory = String(this.content.goodsManagementCategory || '')
+          .split(',')
+          .filter(Boolean);
      } else {
        this.form.storeLogo = [];
      }
-      this.$forceUpdate();
    }
-    this.$refs.thirdForm.resetFields()
  }
 };
 </script>