feat(shopEntry): 优化店铺入驻页面视觉与流程

- 新增品牌头部与自定义步骤条，已完成步骤支持点击回跳修改
- 审核状态页改用 el-result 图标结果页（审核中/已通过/已拒绝/已关闭）
- 分区标题改为主题色竖线样式，表单加宽，地址选择改为输入框样式
- 上传组件改为虚线卡片，补充上传失败与业务失败的错误提示
- 第2、3步补齐 sessionStorage 草稿保存，表单校验失败自动滚动到错误项
- 地址选择弹窗去除横向滚动，超长名称省略并支持悬停显示
- 注册 ElResult 组件；公司电话/营业执照号/法人证件号放宽为仅必填

buyer/src/components/map/multiple-map.vue

@@ -9,7 +9,7 @@
         <div class="selector">
           <div class="selector-item" v-for="(plant, plantIndex) in Object.keys(data)" :key="plantIndex">
             <div :class="{ 'active': chiosend[plantIndex].id == item.id }" v-for="(item, index) in data[plant]"
-              :key="index"
+              :key="index" :title="item.name"
               @click="init(item, plantIndex != Object.keys(data).length - 1 ? Object.keys(data)[plantIndex + 1] : 0, plantIndex)"
               class="map-item">
               {{ item.name }}
@@ -125,7 +125,8 @@ function finished() {
 .selector-item {
   width: 100%;
   flex: 1;
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .map-item {
@@ -133,6 +134,10 @@ function finished() {
   padding: 10px;
   border-bottom: 1px solid #eee;
   cursor: pointer;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   &:hover {
     background: #eee;

buyer/src/pages/shopEntry/FirstApply.vue

@@ -5,27 +5,33 @@
       :model="form"
       :rules="rules"
       label-width="140px"
+      scroll-to-error
       @submit.prevent
       @keydown.enter.prevent
       @focusout="saveDraft"
     >
-      <h4>基础信息</h4>
+      <div class="section-title">基础信息</div>
       <el-form-item prop="companyName" label="公司名称">
         <el-input
           type="text"
           v-model="form.companyName"
-          placeholder="请填写公司信息"
+          placeholder="请填写公司名称"
         />
       </el-form-item>
       <el-form-item prop="companyAddressIdPath" label="公司所在地">
-        <span>{{ form.companyAddressPath || '暂无地址' }}</span>
+        <div class="address-select" @click="openMap">
-        <el-button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</el-button>
+          <el-icon class="addr-icon"><Location /></el-icon>
+          <span class="addr-text" :class="{ placeholder: !form.companyAddressPath }">
+            {{ form.companyAddressPath || '请选择公司所在地' }}
+          </span>
+          <span class="addr-action">{{ form.companyAddressPath ? '重新选择' : '选择' }}</span>
+        </div>
       </el-form-item>
       <el-form-item prop="companyAddress" label="公司详细地址">
         <el-input
           type="text"
           v-model="form.companyAddress"
-          placeholder="请填写公司详细信息"
+          placeholder="请填写公司详细地址"
         />
       </el-form-item>
       <el-form-item prop="employeeNum" label="员工总数">
@@ -71,7 +77,7 @@
         />
       </el-form-item>
 
-      <h4>营业执照信息</h4>
+      <div class="section-title">营业执照信息</div>
       <el-form-item prop="licenseNum" label="营业执照号">
         <el-input
           type="text"
@@ -92,25 +98,23 @@
       <el-form-item prop="licencePhoto" label="营业执照电子版">
         <div class="upload-wrap">
           <el-upload
-            ref="uploadLicence"
+            v-if="form.licencePhoto.length < 1"
             :show-file-list="false"
             :on-success="handleSuccess"
             accept=".jpg,.jpeg,.png,.gif"
             :before-upload="beforeUpload"
             :on-error="uploadErr"
-            :disabled="form.licencePhoto.length >= 1"
             :action="action"
             :headers="accessToken"
           >
-            <el-button
+            <div class="upload-box">
-              type="info"
+              <el-icon v-if="uploadLoading" class="is-loading"><Loading /></el-icon>
-              :loading="uploadLoading"
+              <el-icon v-else><Plus /></el-icon>
-              :disabled="form.licencePhoto.length >= 1"
+              <span>上传营业执照</span>
-              >证照上传</el-button
+            </div>
-            >
           </el-upload>
           <div class="describe">
-            请压缩图片在2M以内，格式为gif，jpg，png，并确保文字清晰，以免上传或审核失败，仅可上传1张
+            请压缩图片在2M以内，格式为gif、jpg、png，并确保文字清晰，以免上传或审核失败，仅可上传1张
           </div>
           <div class="img-list-wrap">
             <div
@@ -128,7 +132,7 @@
         </div>
       </el-form-item>
 
-      <h4>法人信息</h4>
+      <div class="section-title">法人信息</div>
       <el-form-item prop="legalName" label="法人姓名">
         <el-input
           type="text"
@@ -147,7 +151,7 @@
       <el-form-item prop="legalPhoto" label="法人证件电子版">
         <div class="upload-wrap">
           <el-upload
-            ref="uploadLegal"
+            v-if="form.legalPhoto.length < 2"
             :show-file-list="false"
             :on-success="handleSuccess1"
             :before-upload="beforeUpload1"
@@ -157,7 +161,11 @@
             :action="action"
             :headers="accessToken"
           >
-            <el-button type="info" :loading="uploadLoading1">证照上传</el-button>
+            <div class="upload-box">
+              <el-icon v-if="uploadLoading1" class="is-loading"><Loading /></el-icon>
+              <el-icon v-else><Plus /></el-icon>
+              <span>上传法人证件</span>
+            </div>
           </el-upload>
           <div class="describe">
             请压缩图片在2M以内，身份证正反面两张照片，确保图片清晰无缺角
@@ -178,9 +186,11 @@
         </div>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" :loading="loading" @click="next"
+        <div class="form-actions">
-          >填写财务资质信息</el-button
+          <el-button type="primary" size="large" :loading="loading" @click="next"
-        >
+            >下一步：填写财务资质信息</el-button
+          >
+        </div>
       </el-form-item>
     </el-form>
     <el-dialog title="图片预览" v-model="visible">
@@ -192,8 +202,8 @@
 </template>
 <script setup>
 import { onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
-import { Message, Notice } from "@/utils/message";
+import { Message } from "@/utils/message";
-import { Delete, View } from '@element-plus/icons-vue';
+import { Delete, Loading, Location, Plus, View } from '@element-plus/icons-vue';
 import { applyFirst } from '@/api/shopentry';
 import * as RegExp from '@/plugins/RegExp.js';
 import multipleMap from "@/components/map/multiple-map";
@@ -237,7 +247,7 @@ const form = ref({ // 表单数据
   licencePhoto: []
 });
 const rules = { // 验证规则
-  companyName: [{ required: true, message: '请填写公司信息' }],
+  companyName: [{ required: true, message: '请填写公司名称' }],
   companyAddressIdPath: [{ required: true, message: '请选择公司所在地' }],
   companyAddress: [{ required: true, message: '请填写公司详细地址' }],
   employeeNum: [
@@ -254,30 +264,31 @@ const rules = { // 验证规则
     { pattern: RegExp.mobile, message: '请填写正确的号码' }
   ],
   companyPhone: [
-    { required: true, message: '请填写公司电话' },
+    { required: true, message: '请填写公司电话' }
-    { pattern: RegExp.mobile, message: '请填写正确的号码' }
   ],
   companyEmail: [
     { required: true, message: '请填写电子邮箱' },
     { type: 'email', message: '请输入正确的邮箱' }
   ],
   licenseNum: [
-    { required: true, message: '请填写营业执照号' },
+    { required: true, message: '请填写营业执照号' }
-    { pattern: RegExp.licenseNum, message: '请输入正确的营业执照号' }
   ],
   scope: [{ required: true, message: '请填写营业执照所示经营范围' }],
   legalPhoto: [{ required: true, message: '请上传法人身份证照片' }],
   licencePhoto: [{ required: true, message: '请上传营业执照' }],
   legalName: [{ required: true, message: '请输入法人姓名' }],
   legalId: [
-    { required: true, message: '请输入法人证件号' },
+    { required: true, message: '请输入法人证件号' }
-    { pattern: RegExp.IDCard, message: '请输入正确的证件号' }
   ]
 };
 const uploadLoading1 = ref(false); // 上传loading
 const uploadLoading = ref(false); // 上传loading
 const contentInitialized = ref(false);
 
+function openMap() {
+  map.value?.open();
+}
+
 // 获取店铺地址
 function getAddress(val){
   if(val.type === 'select'){
@@ -352,38 +363,34 @@ function validateUploadFile (file) {
   }
   return true;
 }
-// 上传成功回调
+// 上传成功回调（el-upload 只认 HTTP 状态码，业务失败 success:false 也会进这里，需要判断）
 function handleSuccess (res, file) {
   uploadLoading.value = false;
-  form.value.licencePhoto = [res.result];
+  if (res && res.success && res.result) {
+    form.value.licencePhoto = [res.result];
+  } else {
+    Message.error(res && res.message ? res.message : '上传失败，请重试');
+  }
 }
 // 上传成功回调
 function handleSuccess1 (res, file) {
   uploadLoading1.value = false;
-  form.value.legalPhoto.push(res.result);
+  if (res && res.success && res.result) {
+    form.value.legalPhoto.push(res.result);
+  } else {
+    Message.error(res && res.message ? res.message : '上传失败，请重试');
+  }
 }
-// 上传失败
+// 上传失败（非 2xx：err.message 通常是响应体字符串，尝试解析出服务端提示）
-function uploadErr () {
+function uploadErr (err) {
   uploadLoading.value = false;
   uploadLoading1.value = false;
-}
+  let msg = '上传失败，请重试';
-// 上传失败回调
+  try {
-function handleFormatError (file) {
+    const body = JSON.parse(err && err.message);
-  uploadLoading.value = false;
+    if (body && body.message) msg = body.message;
-  uploadLoading1.value = false;
+  } catch (e) { /* 非 JSON 响应，用默认提示 */ }
-  Notice.warning({
+  Message.error(msg);
-    title: 'The file format is incorrect',
-    desc: '上传文件格式不正确'
-  });
-}
-// 上传大小限制
-function handleMaxSize (file) {
-  uploadLoading.value = false;
-  uploadLoading1.value = false;
-  Notice.warning({
-    title: 'Exceeding file size limit',
-    desc: '文件大小不能超过2M'
-  });
 }
 // 图片查看
 function handleView (item) {
@@ -456,19 +463,76 @@ onBeforeUnmount(() => {
 });
 </script>
 <style lang="scss" scoped>
-h4 {
+.section-title {
-  margin-bottom: 10px;
+  display: flex;
-  padding: 0 10px;
+  align-items: center;
-  border: 1px solid #ddd;
+  margin: 24px 0 18px;
-  background-color: #f8f8f8;
+  font-size: 16px;
-  font-weight: bold;
+  font-weight: 600;
-  color: #333;
+  color: #303133;
-  font-size: 14px;
+
-  line-height: 40px;
+  &::before {
-  text-align: left;
+    content: '';
+    width: 4px;
+    height: 18px;
+    border-radius: 2px;
+    background: $theme_color;
+    margin-right: 8px;
+  }
 }
 .el-input {
-  width: 300px;
+  width: 360px;
+}
+.el-textarea {
+  width: 640px;
+  max-width: 100%;
+}
+.address-select {
+  display: flex;
+  align-items: center;
+  width: 360px;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: border-color 0.2s;
+  background: #fff;
+
+  &:hover {
+    border-color: $theme_color;
+  }
+
+  .addr-icon {
+    color: #909399;
+    margin-right: 6px;
+    flex-shrink: 0;
+  }
+
+  .addr-text {
+    flex: 1;
+    color: #303133;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &.placeholder {
+      color: #a8abb2;
+    }
+  }
+
+  .addr-action {
+    color: $theme_color;
+    margin-left: 8px;
+    flex-shrink: 0;
+  }
+}
+.form-actions {
+  margin-top: 8px;
+
+  .el-button {
+    min-width: 240px;
+  }
 }
 .img-list-wrap {
   display: flex;
@@ -486,6 +550,7 @@ h4 {
   position: relative;
   overflow: hidden;
   border: 1px solid #eee;
+  border-radius: 8px;
   box-sizing: border-box;
   background-color: #f5f5f5;
 
@@ -531,6 +596,32 @@ h4 {
   }
 }
 
+.upload-box {
+  width: 120px;
+  height: 120px;
+  border: 1px dashed #c0c4cc;
+  border-radius: 8px;
+  background: #fafafa;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  color: #909399;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  .el-icon {
+    font-size: 26px;
+  }
+
+  &:hover {
+    border-color: $theme_color;
+    color: $theme_color;
+  }
+}
+
 .describe {
   display: block;
   width: 100%;

buyer/src/pages/shopEntry/SecondApply.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="photo-msg">
-    <el-form ref="secondForm" :model="form" :rules="rules" label-width="140px">
+    <el-form ref="secondForm" :model="form" :rules="rules" label-width="140px" scroll-to-error>
-      <h4>基础信息</h4>
+      <div class="section-title">结算银行信息</div>
       <el-form-item prop="settlementBankAccountName" label="银行开户名">
         <el-input
           type="text"
@@ -32,18 +32,22 @@
       </el-form-item>
 
       <el-form-item>
-        <el-button @click="$emit('change', 0)">返回</el-button>
+        <div class="form-actions">
-        <el-button type="primary" :loading="loading" @click="next"
+          <el-button size="large" @click="$emit('change', 0)">上一步</el-button>
-          >填写其他信息</el-button
+          <el-button type="primary" size="large" :loading="loading" @click="next"
-        >
+            >下一步：填写其他信息</el-button
+          >
+        </div>
       </el-form-item>
     </el-form>
   </div>
 </template>
 <script setup>
-import { onMounted, reactive, ref } from 'vue';
+import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
 import { applySecond } from '@/api/shopentry';
 
+const SECOND_APPLY_DRAFT_KEY = 'shopEntrySecondDraft';
+
 const emit = defineEmits(['change']);
 const props = defineProps({
   content: {
@@ -78,7 +82,10 @@ function next() {
       applySecond(form)
         .then((res) => {
           loading.value = false;
-          if (res.success) emit('change', 2);
+          if (res.success) {
+            sessionStorage.removeItem(SECOND_APPLY_DRAFT_KEY);
+            emit('change', 2);
+          }
         })
         .catch(() => {
           loading.value = false;
@@ -87,25 +94,62 @@ function next() {
   });
 }
 
+function restoreDraft() {
+  const draft = sessionStorage.getItem(SECOND_APPLY_DRAFT_KEY);
+  if (!draft) return;
+  try {
+    Object.assign(form, JSON.parse(draft));
+  } catch (e) {
+    sessionStorage.removeItem(SECOND_APPLY_DRAFT_KEY);
+  }
+}
+
+function saveDraft() {
+  sessionStorage.setItem(SECOND_APPLY_DRAFT_KEY, JSON.stringify(form));
+}
+
 onMounted(() => {
   if (props.content && Object.keys(props.content).length) {
     Object.assign(form, JSON.parse(JSON.stringify(props.content)));
+  } else {
+    restoreDraft();
   }
 });
+
+onBeforeUnmount(() => {
+  saveDraft();
+});
 </script>
 <style lang="scss" scoped>
-h4 {
+.section-title {
-  margin-bottom: 10px;
+  display: flex;
-  padding: 0 10px;
+  align-items: center;
-  border: 1px solid #ddd;
+  margin: 24px 0 18px;
-  background-color: #f8f8f8;
+  font-size: 16px;
-  font-weight: bold;
+  font-weight: 600;
-  color: #333;
+  color: #303133;
-  font-size: 14px;
+
-  line-height: 40px;
+  &::before {
-  text-align: left;
+    content: '';
+    width: 4px;
+    height: 18px;
+    border-radius: 2px;
+    background: $theme_color;
+    margin-right: 8px;
+  }
 }
 .el-input {
-  width: 300px;
+  width: 360px;
+}
+.form-actions {
+  margin-top: 8px;
+
+  .el-button {
+    min-width: 120px;
+  }
+
+  .el-button--primary {
+    min-width: 240px;
+  }
 }
 </style>

buyer/src/pages/shopEntry/ShopEntry.vue

@@ -1,14 +1,38 @@
 <template>
   <div class="shop-entry">
-    <div style="height: 20px"></div>
     <div class="content">
-      <h1>店铺入驻</h1>
+      <div class="page-header">
-      <el-steps :active="currentIndex" class="margin" finish-status="success">
+        <div class="header-icon">
-        <el-step title="企业资质信息"></el-step>
+          <el-icon><Shop /></el-icon>
-        <el-step title="财务资质信息"></el-step>
+        </div>
-        <el-step title="其他信息"></el-step>
+        <div class="header-text">
-        <el-step title="提交审核"></el-step>
+          <h1>店铺入驻</h1>
-      </el-steps>
+          <p>完善企业资质信息，快速开启您的电商之旅</p>
+        </div>
+      </div>
+
+      <div class="steps-bar">
+        <div
+          v-for="(step, i) in steps"
+          :key="i"
+          class="step-item"
+          :class="{
+            active: currentIndex === i,
+            done: currentIndex > i,
+            clickable: canClickStep(i),
+          }"
+          @click="onStepClick(i)"
+        >
+          <div class="step-circle">
+            <el-icon v-if="currentIndex > i"><Check /></el-icon>
+            <span v-else>{{ i + 1 }}</span>
+          </div>
+          <div class="step-title">{{ step.title }}</div>
+          <div class="step-desc">{{ step.desc }}</div>
+          <div class="step-line" v-if="i < steps.length - 1"></div>
+        </div>
+      </div>
+
       <div v-if="initLoading" class="step-loading" v-loading="true"></div>
       <template v-else>
         <first-apply
@@ -30,34 +54,68 @@
         ></third-apply>
       </template>
 
-      <div class="success-page" v-if="currentIndex == 3">
+      <div class="status-page" v-if="currentIndex === 3">
-        <span v-if="storeDisable == '' || storeDisable == 'APPLYING'">入驻申请提交成功，等待平台审核</span>
+        <el-result
-        <span v-if="storeDisable == 'OPEN'">申请已通过，请联系管理员</span>
+          v-if="storeDisable === '' || storeDisable === 'APPLYING'"
-        <span v-if="storeDisable == 'CLOSED'">店铺已关闭，重申请联系管理员</span>
+          icon="info"
-        <span v-if="storeDisable == 'REFUSED'">审核未通过,请修改资质信息，如有疑问请联系管理员</span>
+          title="入驻申请提交成功"
+          sub-title="您的入驻申请已提交，请耐心等待平台审核"
+        >
+          <template #extra>
+            <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
+          </template>
+        </el-result>
+        <el-result
+          v-else-if="storeDisable === 'OPEN'"
+          icon="success"
+          title="申请已通过"
+          sub-title="您的店铺已开通，如有问题请联系管理员"
+        >
+          <template #extra>
+            <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
+          </template>
+        </el-result>
+        <el-result
+          v-else-if="storeDisable === 'CLOSED'"
+          icon="warning"
+          title="店铺已关闭"
+          sub-title="如需重新入驻，请联系管理员"
+        >
+          <template #extra>
+            <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
+          </template>
+        </el-result>
+        <el-result
+          v-else-if="storeDisable === 'REFUSED'"
+          icon="error"
+          title="审核未通过"
+          sub-title="请修改资质信息后重新提交，如有疑问请联系管理员"
+        >
+          <template #extra>
+            <el-button @click="$router.push('/')">返回首页</el-button>
+            <el-button type="primary" @click="currentIndex = 0">重新申请</el-button>
+          </template>
+        </el-result>
       </div>
-      <el-button v-if="currentIndex === 3" @click="$router.push('/')">返回</el-button>
-      &nbsp;
-      <el-button type="primary" @click='currentIndex = 0'
-        v-if="storeDisable === 'REFUSED' && currentIndex === 3">重新申请</el-button>
     </div>
 
-    <el-dialog title="店铺入驻协议" v-model="showAgreement" width="1200" :show-close="false" :close-on-click-modal="false">
+    <el-dialog title="店铺入驻协议" v-model="showAgreement" width="900px" :show-close="false" :close-on-click-modal="false">
       <div class="agreement-scroll">
         <div class="agreeent-con" v-html="agreementCon"></div>
       </div>
 
       <template #footer><div style="text-align: center">
         <p>
-          <el-checkbox v-model="checked">我已同意以上协议</el-checkbox>
+          <el-checkbox v-model="checked">我已阅读并同意以上协议</el-checkbox>
         </p>
-        <el-button type="primary" :disabled="!checked" class="margin" @click="confirmAgreement">同意协议填写资质信息</el-button>
+        <el-button type="primary" :disabled="!checked" class="margin" @click="confirmAgreement">同意协议，填写资质信息</el-button>
       </div></template>
     </el-dialog>
   </div>
 </template>
 <script setup>
 import { onMounted, reactive, ref } from "vue";
+import { Check, Shop } from "@element-plus/icons-vue";
 import { agreement, applyStatus } from "@/api/shopentry";
 import firstApply from "./FirstApply";
 import secondApply from "./SecondApply";
@@ -74,6 +132,24 @@ const storeDisable = ref(""); // APPLY OPEN 开店中 CLOSED 关闭 REFUSED 拒
 const initLoading = ref(true);
 const agreementAccepted = ref(false); // 是否已同意入驻协议
 
+const steps = [
+  { title: "企业资质信息", desc: "填写企业与法人资料" },
+  { title: "财务资质信息", desc: "填写结算银行信息" },
+  { title: "其他信息", desc: "完善店铺资料" },
+  { title: "提交审核", desc: "等待平台审核" },
+];
+
+// 已完成步骤可点击回跳；审核状态页仅在 REFUSED 时允许回跳修改
+function canClickStep(i) {
+  if (!agreementAccepted.value || i >= currentIndex.value) return false;
+  if (currentIndex.value === 3) return storeDisable.value === "REFUSED";
+  return true;
+}
+
+function onStepClick(i) {
+  if (canClickStep(i)) nextPage(i);
+}
+
 function confirmAgreement() {
   agreementAccepted.value = true;
   showAgreement.value = false;
@@ -193,16 +269,126 @@ onMounted(() => {
   min-height: 500px;
   border-radius: 20px;
   background: #fff;
-  padding: 10px 20px;
+  padding: 28px 48px 48px;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #f0f0f0;
+
+  .header-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    background: $theme_color;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    flex-shrink: 0;
+  }
 
   h1 {
+    margin: 0;
+    font-size: 22px;
+    color: #303133;
+  }
 
-    margin-top: 20px;
+  p {
+    margin: 4px 0 0;
+    font-size: 13px;
+    color: #909399;
   }
 }
 
+.steps-bar {
+  display: flex;
+  align-items: flex-start;
+  margin: 28px 0 36px;
+}
+
+.step-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+
+  &.clickable {
+    cursor: pointer;
+
+    &:hover .step-title {
+      color: $theme_color;
+    }
+  }
+
+  &.active .step-circle {
+    border-color: $theme_color;
+    background: $theme_color;
+    color: #fff;
+  }
+
+  &.active .step-title {
+    color: $theme_color;
+  }
+
+  &.done .step-circle {
+    border-color: $theme_color;
+    color: $theme_color;
+  }
+
+  &.done .step-line {
+    background: $theme_color;
+  }
+}
+
+.step-circle {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 2px solid #dcdfe6;
+  background: #fff;
+  color: #909399;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  font-weight: 600;
+  position: relative;
+  z-index: 1;
+  transition: all 0.25s;
+}
+
+.step-title {
+  margin-top: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  transition: color 0.25s;
+}
+
+.step-desc {
+  margin-top: 2px;
+  font-size: 12px;
+  color: #909399;
+}
+
+.step-line {
+  position: absolute;
+  top: 18px;
+  left: calc(50% + 28px);
+  width: calc(100% - 56px);
+  height: 2px;
+  background: #e4e7ed;
+  transition: background 0.25s;
+}
+
 .margin {
-  margin: 30px 0;
+  margin: 30px 0 0;
 }
 .agreeent-con {
   max-height: 500px;
@@ -218,12 +404,11 @@ onMounted(() => {
 .step-loading {
   min-height: 320px;
 }
-.success-page {
+.status-page {
-  height: 500px;
+  min-height: 420px;
-  width: 100%;
+  display: flex;
-  line-height: 500px;
+  align-items: center;
-  text-align: center;
+  justify-content: center;
-  font-size: 20px;
 }
 .shop-entry {
   min-height: 100vh;

buyer/src/pages/shopEntry/ThirdApply.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="person-msg">
-    <el-form ref="thirdFormRef" :model="form" :rules="rules" label-width="140px">
+    <el-form ref="thirdFormRef" :model="form" :rules="rules" label-width="140px" scroll-to-error>
-      <h4>基础信息</h4>
+      <div class="section-title">店铺信息</div>
       <el-form-item prop="storeName" label="店铺名称">
         <el-input
           type="text"
@@ -13,19 +13,22 @@
       <el-form-item prop="storeLogo" label="店铺logo">
         <div class="upload-wrap">
           <el-upload
-            ref="uploadLogo"
+            v-if="form.storeLogo.length < 1"
             :show-file-list="false"
             :on-success="handleSuccess"
             accept=".jpg,.jpeg,.png,.gif"
             :before-upload="beforeUpload"
             :on-error="uploadErr"
-            :disabled="form.storeLogo.length >= 1"
             :action="action"
             :headers="accessToken"
           >
-            <el-button type="info" :loading="uploadLoading" :disabled="form.storeLogo.length >= 1">上传logo</el-button>
+            <div class="upload-box">
+              <el-icon v-if="uploadLoading" class="is-loading"><Loading /></el-icon>
+              <el-icon v-else><Plus /></el-icon>
+              <span>上传logo</span>
+            </div>
           </el-upload>
-          <div class="describe">请压缩图片在2M以内，格式为gif，jpg，png，仅可上传1张</div>
+          <div class="describe">请压缩图片在2M以内，格式为gif、jpg、png，仅可上传1张</div>
           <div class="img-list-wrap">
             <div
               class="img-list"
@@ -45,8 +48,8 @@
         <el-select
           v-model="form.goodsManagementCategory"
           multiple
-          placeholder="请选择"
+          placeholder="请选择店铺经营类目"
-          style="width: 300px"
+          style="width: 360px"
         >
           <el-option
             v-for="item in categoryList"
@@ -58,8 +61,13 @@
       </el-form-item>
 
       <el-form-item prop="storeAddressIdPath" label="店铺所在地">
-        <span>{{ form.storeAddressPath || '暂无地址' }}</span>
+        <div class="address-select" @click="openMap">
-        <el-button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</el-button>
+          <el-icon class="addr-icon"><Location /></el-icon>
+          <span class="addr-text" :class="{ placeholder: !form.storeAddressPath }">
+            {{ form.storeAddressPath || '请选择店铺所在地' }}
+          </span>
+          <span class="addr-action">{{ form.storeAddressPath ? '重新选择' : '选择' }}</span>
+        </div>
       </el-form-item>
       <el-form-item prop="storeAddressDetail" label="店铺详细地址">
         <el-input
@@ -80,10 +88,12 @@
       </el-form-item>
 
       <el-form-item>
-        <el-button @click="$emit('change', 1)">返回</el-button>
+        <div class="form-actions">
-        <el-button type="primary" :loading="loading" @click="next"
+          <el-button size="large" @click="$emit('change', 1)">上一步</el-button>
-          >提交平台审核</el-button
+          <el-button type="primary" size="large" :loading="loading" @click="next"
-        >
+            >提交平台审核</el-button
+          >
+        </div>
       </el-form-item>
     </el-form>
     <el-dialog title="图片预览" v-model="visible">
@@ -93,9 +103,9 @@
   </div>
 </template>
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
 import { Message } from "@/utils/message";
-import { Delete, View } from '@element-plus/icons-vue';
+import { Delete, Loading, Location, Plus, View } from '@element-plus/icons-vue';
 import { applyThird } from '@/api/shopentry';
 import { getCategory } from '@/api/goods';
 
@@ -105,6 +115,7 @@ import { buyerUrl } from '@/plugins/request.js';
 
 import multipleMap from "@/components/map/multiple-map";
 
+const THIRD_APPLY_DRAFT_KEY = 'shopEntryThirdDraft';
 
 const emit = defineEmits(['change']);
 
@@ -116,6 +127,7 @@ const props = defineProps({
 });
 
 const thirdFormRef = ref(null);
+const map = ref(null);
 
 const loading = ref(false); // 加载状态
 const uploadLoading = ref(false); // 上传加载状态
@@ -147,6 +159,10 @@ const rules = { // 验证规则
 };
 const categoryList = ref([]); // 分类数据
 
+function openMap() {
+  map.value?.open();
+}
+
 // 下一步
 function next () {
   thirdFormRef.value.validate((valid) => {
@@ -158,7 +174,10 @@ function next () {
       applyThird(params)
         .then((res) => {
           loading.value = false;
-          if (res.success) emit('change', 3);
+          if (res.success) {
+            sessionStorage.removeItem(THIRD_APPLY_DRAFT_KEY);
+            emit('change', 3);
+          }
         })
         .catch(() => {
           loading.value = false;
@@ -192,14 +211,24 @@ function validateUploadFile (file) {
   }
   return true;
 }
-// 上传成功回调
+// 上传成功回调（el-upload 只认 HTTP 状态码，业务失败 success:false 也会进这里，需要判断）
 function handleSuccess (res, file) {
   uploadLoading.value = false;
-  form.value.storeLogo = [res.result];
+  if (res && res.success && res.result) {
+    form.value.storeLogo = [res.result];
+  } else {
+    Message.error(res && res.message ? res.message : '上传失败，请重试');
+  }
 }
-// 上传失败
+// 上传失败（非 2xx：err.message 通常是响应体字符串，尝试解析出服务端提示）
-function uploadErr () {
+function uploadErr (err) {
   uploadLoading.value = false;
+  let msg = '上传失败，请重试';
+  try {
+    const body = JSON.parse(err && err.message);
+    if (body && body.message) msg = body.message;
+  } catch (e) { /* 非 JSON 响应，用默认提示 */ }
+  Message.error(msg);
 }
 // 查看图片
 function handleView (item) {
@@ -277,28 +306,117 @@ function initFormFromContent (content) {
     if (form.value[key] == null) form.value[key] = "";
   });
 }
+function restoreDraft () {
+  const draft = sessionStorage.getItem(THIRD_APPLY_DRAFT_KEY);
+  if (!draft) return;
+  try {
+    const parsed = JSON.parse(draft);
+    form.value = {
+      ...createEmptyForm(),
+      ...parsed,
+      storeLogo: Array.isArray(parsed.storeLogo) ? parsed.storeLogo : [],
+      goodsManagementCategory: Array.isArray(parsed.goodsManagementCategory)
+        ? parsed.goodsManagementCategory
+        : [],
+    };
+  } catch (e) {
+    sessionStorage.removeItem(THIRD_APPLY_DRAFT_KEY);
+  }
+}
+function saveDraft () {
+  sessionStorage.setItem(THIRD_APPLY_DRAFT_KEY, JSON.stringify(form.value));
+}
 
-initFormFromContent(props.content);
+if (Object.keys(props.content).length) {
+  initFormFromContent(props.content);
+} else {
+  restoreDraft();
+}
 
 onMounted(() => {
   accessToken.accessToken = storage.getItem('accessToken');
   getCategoryList();
 });
+
+onBeforeUnmount(() => {
+  saveDraft();
+});
 </script>
 <style lang="scss" scoped>
-h4 {
+.section-title {
-  margin-bottom: 10px;
+  display: flex;
-  padding: 0 10px;
+  align-items: center;
-  border: 1px solid #ddd;
+  margin: 24px 0 18px;
-  background-color: #f8f8f8;
+  font-size: 16px;
-  font-weight: bold;
+  font-weight: 600;
-  color: #333;
+  color: #303133;
-  font-size: 14px;
+
-  line-height: 40px;
+  &::before {
-  text-align: left;
+    content: '';
+    width: 4px;
+    height: 18px;
+    border-radius: 2px;
+    background: $theme_color;
+    margin-right: 8px;
+  }
 }
 .el-input {
-  width: 300px;
+  width: 360px;
+}
+.el-textarea {
+  width: 640px;
+  max-width: 100%;
+}
+.address-select {
+  display: flex;
+  align-items: center;
+  width: 360px;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: border-color 0.2s;
+  background: #fff;
+
+  &:hover {
+    border-color: $theme_color;
+  }
+
+  .addr-icon {
+    color: #909399;
+    margin-right: 6px;
+    flex-shrink: 0;
+  }
+
+  .addr-text {
+    flex: 1;
+    color: #303133;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &.placeholder {
+      color: #a8abb2;
+    }
+  }
+
+  .addr-action {
+    color: $theme_color;
+    margin-left: 8px;
+    flex-shrink: 0;
+  }
+}
+.form-actions {
+  margin-top: 8px;
+
+  .el-button {
+    min-width: 120px;
+  }
+
+  .el-button--primary {
+    min-width: 240px;
+  }
 }
 .img-list-wrap {
   display: flex;
@@ -316,6 +434,7 @@ h4 {
   position: relative;
   overflow: hidden;
   border: 1px solid #eee;
+  border-radius: 8px;
   box-sizing: border-box;
   background-color: #f5f5f5;
 
@@ -362,6 +481,32 @@ h4 {
   }
 }
 
+.upload-box {
+  width: 120px;
+  height: 120px;
+  border: 1px dashed #c0c4cc;
+  border-radius: 8px;
+  background: #fafafa;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  color: #909399;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  .el-icon {
+    font-size: 26px;
+  }
+
+  &:hover {
+    border-color: $theme_color;
+    color: $theme_color;
+  }
+}
+
 .describe {
   display: block;
   width: 100%;

buyer/src/plugins/element.js

@@ -37,6 +37,7 @@ import "element-plus/es/components/radio/style/css";
 import "element-plus/es/components/radio-button/style/css";
 import "element-plus/es/components/radio-group/style/css";
 import "element-plus/es/components/rate/style/css";
+import "element-plus/es/components/result/style/css";
 import "element-plus/es/components/select/style/css";
 import "element-plus/es/components/skeleton/style/css";
 import "element-plus/es/components/step/style/css";
@@ -94,6 +95,7 @@ import {
   ElRadioButton,
   ElRadioGroup,
   ElRate,
+  ElResult,
   ElSelect,
   ElSkeleton,
   ElStep,
@@ -149,6 +151,7 @@ const components = [
   ElRadioButton,
   ElRadioGroup,
   ElRate,
+  ElResult,
   ElSelect,
   ElSkeleton,
   ElStep,