消息

src/layouts/components/Header/components/InfoDialog.vue

@@ -1,6 +1,29 @@
 <template>
-  <el-dialog v-model="dialogVisible" title="个人信息111" width="500px" draggable>
-    <span>This is userInfo</span>
+  <el-dialog v-model="dialogVisible" title="个人信息" width="500px" draggable>
+    <div class="form-wrap">
+      <el-form :model="form" :rules="rules" ref="formRef" label-width="72px">
+        <el-form-item label="头像">
+          <el-upload
+            class="avatar-uploader"
+            action="#"
+            list-type="picture-card"
+            :limit="1"
+            :on-exceed="onExceed"
+            v-model:file-list="form.avatarList"
+          >
+            <el-icon><Plus /></el-icon>
+          </el-upload>
+        </el-form-item>
+
+        <el-form-item label="昵称" prop="nickname">
+          <el-input v-model="form.nickname" placeholder="请输入昵称" />
+        </el-form-item>
+
+        <el-form-item label="简介" prop="intro">
+          <el-input v-model="form.intro" type="textarea" :rows="6" placeholder="请输入简介" />
+        </el-form-item>
+      </el-form>
+    </div>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="dialogVisible = false">取消</el-button>
@@ -11,7 +34,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive } from "vue";
+import { ElMessage, type FormInstance, type FormRules } from "element-plus";
+import { Plus } from "@element-plus/icons-vue";
 
 const dialogVisible = ref(false);
 const openDialog = () => {
@@ -19,4 +44,33 @@ const openDialog = () => {
 };
 
 defineExpose({ openDialog });
+
+const formRef = ref<FormInstance>();
+const form = reactive({
+  avatarList: [] as any[],
+  nickname: "重庆老火锅",
+  intro: "这——家优秀的火锅店"
+});
+
+const rules: FormRules = {
+  nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
+  intro: [{ required: true, message: "请输入简介", trigger: "blur" }]
+};
+
+const onExceed = () => {
+  ElMessage.warning("仅允许上传一张头像");
+};
+
+const handleBack = () => {
+  history.back();
+};
+
+const handleSave = async () => {
+  if (!formRef.value) return;
+  await formRef.value.validate(valid => {
+    if (!valid) return;
+    // TODO: 接口保存
+    ElMessage.success("保存成功");
+  });
+};
 </script>

src/layouts/components/Header/components/Message.vue

@@ -1,109 +1,14 @@
 <template>
   <div class="message">
-    <el-popover placement="bottom" :width="310" trigger="click">
-      <template #reference>
-        <el-badge :value="5" class="item">
-          <i :class="'iconfont icon-xiaoxi'" class="toolBar-icon" />
-        </el-badge>
-      </template>
-      <el-tabs v-model="activeName">
-        <el-tab-pane label="通知(5)" name="first">
-          <div class="message-list">
-            <!-- <div class="message-item">
-              <img src="@/assets/images/msg01.png" alt="" class="message-icon" />
-              <div class="message-content">
-                <span class="message-title">一键三连 Geeker-Admin 🧡</span>
-                <span class="message-date">一分钟前</span>
-              </div>
-            </div>
-            <div class="message-item">
-              <img src="@/assets/images/msg02.png" alt="" class="message-icon" />
-              <div class="message-content">
-                <span class="message-title">一键三连 Geeker-Admin 💙</span>
-                <span class="message-date">一小时前</span>
-              </div>
-            </div>
-            <div class="message-item">
-              <img src="@/assets/images/msg03.png" alt="" class="message-icon" />
-              <div class="message-content">
-                <span class="message-title">一键三连 Geeker-Admin 💚</span>
-                <span class="message-date">半天前</span>
-              </div>
-            </div>
-            <div class="message-item">
-              <img src="@/assets/images/msg04.png" alt="" class="message-icon" />
-              <div class="message-content">
-                <span class="message-title">一键三连 Geeker-Admin 💜</span>
-                <span class="message-date">一星期前</span>
-              </div>
-            </div>
-            <div class="message-item">
-              <img src="@/assets/images/msg05.png" alt="" class="message-icon" />
-              <div class="message-content">
-                <span class="message-title">一键三连 Geeker-Admin 💛</span>
-                <span class="message-date">一个月前</span>
-              </div>
-            </div> -->
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="消息(0)" name="second">
-          <div class="message-empty">
-            <img src="@/assets/images/notData.png" alt="notData" />
-            <div>暂无消息</div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="待办(0)" name="third">
-          <div class="message-empty">
-            <img src="@/assets/images/notData.png" alt="notData" />
-            <div>暂无待办</div>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-    </el-popover>
+    <el-badge :value="0" class="item">
+      <i :class="'iconfont icon-xiaoxi'" class="toolBar-icon" @click="getMessage" />
+    </el-badge>
   </div>
 </template>
-
 <script setup lang="ts">
-import { ref } from "vue";
-const activeName = ref("first");
+import { useRouter } from "vue-router";
+const router = useRouter();
+const getMessage = () => {
+  router.push(`/home/notice`);
+};
 </script>
-
-<style scoped lang="scss">
-.message-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 260px;
-  line-height: 45px;
-}
-.message-list {
-  display: flex;
-  flex-direction: column;
-  .message-item {
-    display: flex;
-    align-items: center;
-    padding: 20px 0;
-    border-bottom: 1px solid var(--el-border-color-light);
-    &:last-child {
-      border: none;
-    }
-    .message-icon {
-      width: 40px;
-      height: 40px;
-      margin: 0 20px 0 5px;
-    }
-    .message-content {
-      display: flex;
-      flex-direction: column;
-      .message-title {
-        margin-bottom: 5px;
-      }
-      .message-date {
-        font-size: 12px;
-        color: var(--el-text-color-secondary);
-      }
-    }
-  }
-}
-</style>

src/views/home/components/go-enter.vue

@@ -97,7 +97,7 @@ const handleRegister = () => {
     }
   }
   .steps-container {
-    margin-top: 60px;
+    margin-top: 120px;
     margin-bottom: 60px;
     :deep(.el-steps) {
       .el-step__head {
@@ -106,6 +106,12 @@ const handleRegister = () => {
           height: 30px;
           font-size: 16px;
           font-weight: 600;
+          color: #ffffff;
+          background: #6c8ff8;
+          border: 0;
+        }
+        .el-step__line {
+          border: 1px solid #6c8ff8;
         }
       }
       .el-step__title {
@@ -115,10 +121,11 @@ const handleRegister = () => {
           gap: 8px;
           align-items: center;
           .step-title {
+            padding-top: 15px;
             font-size: 16px;
             font-weight: 600;
             line-height: 1.5;
-            color: #303133;
+            color: #6c8ff8;
           }
           .step-time {
             display: inline-block;
@@ -151,6 +158,7 @@ const handleRegister = () => {
       font-size: 16px;
       font-weight: 500;
       background: #6c8ff8;
+      border: 0;
       border-radius: 4px;
       outline: none;
     }

src/views/home/components/go-flow.vue

@@ -1,254 +1,219 @@
 <template>
-  <!-- 第一步：个人实名 -->
-  <div v-if="currentStep === 1" class="form-container">
-    <el-button class="back-btn" @click="handleBack"> 返回 </el-button>
-
-    <!-- 进度条 -->
-    <div class="progress-container">
-      <el-steps align-center>
-        <el-step>
-          <template #title>
-            <div class="step-title-wrapper">
-              <span class="step-title">个人实名</span>
-              <span class="step-time">约3分钟</span>
-            </div>
-          </template>
-        </el-step>
-        <el-step>
-          <template #title>
-            <div class="step-title-wrapper">
-              <span class="step-title">填写信息</span>
-              <span class="step-time">约30分钟</span>
-            </div>
-          </template>
-        </el-step>
-        <el-step>
-          <template #title>
-            <div class="step-title-wrapper">
-              <span class="step-title">等待审核</span>
-              <span class="step-time">约1-3个工作日</span>
-            </div>
-          </template>
-        </el-step>
-        <el-step>
-          <template #title>
-            <div class="step-title-wrapper">
-              <span class="step-title">入驻成功</span>
-            </div>
-          </template>
-        </el-step>
-      </el-steps>
+  <div class="form-container">
+    <div>
+      <!-- 进度条 -->
+      <el-button class="back-btn" @click="handleBack"> 返回 </el-button>
+      <div class="progress-container">
+        <el-steps :active="currentStep" style="max-width: 1500px" align-center>
+          <el-step>
+            <template #title>
+              <div class="step-title-wrapper">
+                <span class="step-title">个人实名</span>
+                <span class="step-time">约3分钟</span>
+              </div>
+            </template>
+          </el-step>
+          <el-step>
+            <template #title>
+              <div class="step-title-wrapper">
+                <span class="step-title">填写信息</span>
+                <span class="step-time">约30分钟</span>
+              </div>
+            </template>
+          </el-step>
+          <el-step>
+            <template #title>
+              <div class="step-title-wrapper">
+                <span class="step-title">等待审核</span>
+                <span class="step-time">约1-3个工作日</span>
+              </div>
+            </template>
+          </el-step>
+          <el-step>
+            <template #title>
+              <div class="step-title-wrapper">
+                <span class="step-title">入驻成功</span>
+              </div>
+            </template>
+          </el-step>
+        </el-steps>
+      </div>
     </div>
-
-    <!-- 表单 -->
-    <div class="form-content">
-      <el-form :model="step1Form" :rules="step1Rules" ref="step1FormRef" label-width="120px">
-        <el-form-item label="姓名" prop="name">
-          <el-input v-model="step1Form.name" placeholder="请输入姓名" style="width: 400px" />
-        </el-form-item>
-        <el-form-item label="身份证号码" prop="idNumber">
-          <el-input v-model="step1Form.idNumber" placeholder="请输入身份证号码" style="width: 400px" />
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <!-- 按钮 -->
-    <div class="form-actions">
-      <el-button type="primary" size="large" @click="handleNextStep"> 下一步 </el-button>
+    <!-- 第一步：个人实名 -->
+    <div v-if="currentStep === 1">
+      <!-- 表单 -->
+      <div class="form-content">
+        <el-form :model="step1Form" :rules="step1Rules" ref="step1FormRef" label-width="120px">
+          <el-form-item label="姓名" prop="name">
+            <el-input v-model="step1Form.name" placeholder="请输入姓名" style="width: 400px" />
+          </el-form-item>
+          <el-form-item label="身份证号码" prop="idNumber">
+            <el-input v-model="step1Form.idNumber" placeholder="请输入身份证号码" style="width: 400px" />
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 按钮 -->
+      <div class="form-actions">
+        <el-button type="primary" size="large" @click="handleNextStep"> 下一步 </el-button>
+      </div>
     </div>
-  </div>
-  <!-- 第二步：填写信息 -->
-  <div v-if="currentStep === 2" class="form-container">
-    <el-button class="back-btn" @click="handleBack"> 返回 </el-button>
-
-    <!-- 进度条 -->
-    <div class="progress-container">
-      <el-steps :active="currentStep - 1" align-center>
-        <el-step>
-          <template #title>
-            <div class="step-title-wrapper">
-              <span class="step-title">个人实名</span>
-              <span class="step-time">约3分钟</span>
-            </div>
-          </template>
-        </el-step>
-        <el-step>
-          <template #title>
-            <div class="step-title-wrapper">
-              <span class="step-title">填写信息</span>
-              <span class="step-time">约30分钟</span>
-            </div>
-          </template>
-        </el-step>
-        <el-step>
-          <template #title>
-            <div class="step-title-wrapper">
-              <span class="step-title">等待审核</span>
-              <span class="step-time">约1-3个工作日</span>
-            </div>
-          </template>
-        </el-step>
-        <el-step>
-          <template #title>
-            <div class="step-title-wrapper">
-              <span class="step-title">入驻成功</span>
+    <!-- 第二步：填写信息 -->
+    <div v-if="currentStep === 2">
+      <!-- 表单内容 -->
+      <div class="form-content step2-form">
+        <el-form :model="step2Form" :rules="step2Rules" ref="step2FormRef" label-width="125px">
+          <div class="form-row">
+            <!-- 左列 -->
+            <div class="form-col">
+              <el-form-item label="店铺名称" prop="storeName">
+                <el-input v-model="step2Form.storeName" placeholder="请输入店铺名称" />
+              </el-form-item>
+
+              <el-form-item label="容纳人数" prop="capacity">
+                <el-input-number v-model="step2Form.capacity" :min="1" :max="9999" />
+              </el-form-item>
+
+              <el-form-item label="门店面积" prop="storeArea">
+                <el-radio-group v-model="step2Form.storeArea">
+                  <el-radio label="小于20平米"> 小于20平米 </el-radio>
+                  <el-radio label="20-50平米"> 20-50平米 </el-radio>
+                  <el-radio label="50-100平米"> 50-100平米 </el-radio>
+                  <el-radio label="100-300平米"> 100-300平米 </el-radio>
+                  <el-radio label="300-500平米"> 300-500平米 </el-radio>
+                  <el-radio label="500-1000平米"> 500-1000平米 </el-radio>
+                  <el-radio label="大于1000平米"> 大于1000平米 </el-radio>
+                </el-radio-group>
+              </el-form-item>
+
+              <el-form-item label="所在地区" prop="location">
+                <el-select v-model="step2Form.province" placeholder="请选择" style="width: 150px; margin-right: 10px">
+                  <el-option label="省份" value="province" />
+                </el-select>
+                <el-select v-model="step2Form.city" placeholder="请选择" style="width: 150px; margin-right: 10px">
+                  <el-option label="城市" value="city" />
+                </el-select>
+                <el-select v-model="step2Form.district" placeholder="请选择" style="width: 150px">
+                  <el-option label="区县" value="district" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="详细地址" prop="detailedAddress">
+                <el-input v-model="step2Form.detailedAddress" type="textarea" :rows="3" placeholder="请输入" />
+              </el-form-item>
+
+              <el-form-item label="门店简介" prop="storeIntro">
+                <el-input v-model="step2Form.storeIntro" type="textarea" :rows="3" placeholder="请输入" />
+              </el-form-item>
+
+              <el-form-item label="经营板块" prop="businessSector">
+                <el-radio-group v-model="step2Form.businessSector">
+                  <el-radio label="美食"> 美食 </el-radio>
+                  <el-radio label="酒店/民宿"> 酒店/民宿 </el-radio>
+                  <el-radio label="KTV"> KTV </el-radio>
+                  <el-radio label="洗浴汗蒸"> 洗浴汗蒸 </el-radio>
+                  <el-radio label="按摩足疗"> 按摩足疗 </el-radio>
+                  <el-radio label="丽人美发"> 丽人美发 </el-radio>
+                  <el-radio label="运动健身"> 运动健身 </el-radio>
+                  <el-radio label="医美医疗"> 医美医疗 </el-radio>
+                </el-radio-group>
+              </el-form-item>
+
+              <el-form-item label="经营种类" prop="businessType">
+                <el-checkbox-group v-model="step2Form.businessType">
+                  <el-checkbox label="小吃快餐"> 小吃快餐 </el-checkbox>
+                  <el-checkbox label="鱼鲜海鲜"> 鱼鲜海鲜 </el-checkbox>
+                  <el-checkbox label="烧烤烤串"> 烧烤烤串 </el-checkbox>
+                  <el-checkbox label="自助餐"> 自助餐 </el-checkbox>
+                  <el-checkbox label="面包蛋糕甜品"> 面包蛋糕甜品 </el-checkbox>
+                  <el-checkbox label="火锅"> 火锅 </el-checkbox>
+                  <el-checkbox label="水果生鲜"> 水果生鲜 </el-checkbox>
+                  <el-checkbox label="特色菜"> 特色菜 </el-checkbox>
+                  <el-checkbox label="中餐"> 中餐 </el-checkbox>
+                  <el-checkbox label="西餐"> 西餐 </el-checkbox>
+                  <el-checkbox label="烤肉"> 烤肉 </el-checkbox>
+                  <el-checkbox label="韩式料理"> 韩式料理 </el-checkbox>
+                  <el-checkbox label="地方菜系"> 地方菜系 </el-checkbox>
+                  <el-checkbox label="日式料理"> 日式料理 </el-checkbox>
+                  <el-checkbox label="轻食"> 轻食 </el-checkbox>
+                </el-checkbox-group>
+              </el-form-item>
             </div>
-          </template>
-        </el-step>
-      </el-steps>
-    </div>
-
-    <!-- 表单内容 -->
-    <div class="form-content step2-form">
-      <el-form :model="step2Form" :rules="step2Rules" ref="step2FormRef" label-width="125px">
-        <div class="form-row">
-          <!-- 左列 -->
-          <div class="form-col">
-            <el-form-item label="店铺名称" prop="storeName">
-              <el-input v-model="step2Form.storeName" placeholder="请输入店铺名称" />
-            </el-form-item>
-
-            <el-form-item label="容纳人数" prop="capacity">
-              <el-input-number v-model="step2Form.capacity" :min="1" :max="9999" />
-            </el-form-item>
-
-            <el-form-item label="门店电话" prop="storePhone">
-              <el-input v-model="step2Form.storePhone" placeholder="请输入门店电话" />
-            </el-form-item>
 
-            <el-form-item label="门店面积" prop="storeArea">
-              <el-radio-group v-model="step2Form.storeArea">
-                <el-radio label="小于20平米"> 小于20平米 </el-radio>
-                <el-radio label="20-50平米"> 20-50平米 </el-radio>
-                <el-radio label="50-100平米"> 50-100平米 </el-radio>
-                <el-radio label="100-300平米"> 100-300平米 </el-radio>
-                <el-radio label="300-500平米"> 300-500平米 </el-radio>
-                <el-radio label="500-1000平米"> 500-1000平米 </el-radio>
-                <el-radio label="大于1000平米"> 大于1000平米 </el-radio>
-              </el-radio-group>
-            </el-form-item>
-
-            <el-form-item label="所在地区" prop="location">
-              <el-select v-model="step2Form.province" placeholder="请选择" style="width: 150px; margin-right: 10px">
-                <el-option label="省份" value="province" />
-              </el-select>
-              <el-select v-model="step2Form.city" placeholder="请选择" style="width: 150px; margin-right: 10px">
-                <el-option label="城市" value="city" />
-              </el-select>
-              <el-select v-model="step2Form.district" placeholder="请选择" style="width: 150px">
-                <el-option label="区县" value="district" />
-              </el-select>
-            </el-form-item>
-
-            <el-form-item label="详细地址" prop="detailedAddress">
-              <el-input v-model="step2Form.detailedAddress" type="textarea" :rows="3" placeholder="请输入" />
-            </el-form-item>
-
-            <el-form-item label="门店简介" prop="storeIntro">
-              <el-input v-model="step2Form.storeIntro" type="textarea" :rows="3" placeholder="请输入" />
-            </el-form-item>
-
-            <el-form-item label="经营板块" prop="businessSector">
-              <el-radio-group v-model="step2Form.businessSector">
-                <el-radio label="美食"> 美食 </el-radio>
-                <el-radio label="酒店/民宿"> 酒店/民宿 </el-radio>
-                <el-radio label="KTV"> KTV </el-radio>
-                <el-radio label="洗浴汗蒸"> 洗浴汗蒸 </el-radio>
-                <el-radio label="按摩足疗"> 按摩足疗 </el-radio>
-                <el-radio label="丽人美发"> 丽人美发 </el-radio>
-                <el-radio label="运动健身"> 运动健身 </el-radio>
-                <el-radio label="医美医疗"> 医美医疗 </el-radio>
-              </el-radio-group>
-            </el-form-item>
-
-            <el-form-item label="经营种类" prop="businessType">
-              <el-checkbox-group v-model="step2Form.businessType">
-                <el-checkbox label="小吃快餐"> 小吃快餐 </el-checkbox>
-                <el-checkbox label="鱼鲜海鲜"> 鱼鲜海鲜 </el-checkbox>
-                <el-checkbox label="烧烤烤串"> 烧烤烤串 </el-checkbox>
-                <el-checkbox label="自助餐"> 自助餐 </el-checkbox>
-                <el-checkbox label="面包蛋糕甜品"> 面包蛋糕甜品 </el-checkbox>
-                <el-checkbox label="火锅"> 火锅 </el-checkbox>
-                <el-checkbox label="水果生鲜"> 水果生鲜 </el-checkbox>
-                <el-checkbox label="特色菜"> 特色菜 </el-checkbox>
-                <el-checkbox label="中餐"> 中餐 </el-checkbox>
-                <el-checkbox label="西餐"> 西餐 </el-checkbox>
-                <el-checkbox label="烤肉"> 烤肉 </el-checkbox>
-                <el-checkbox label="韩式料理"> 韩式料理 </el-checkbox>
-                <el-checkbox label="地方菜系"> 地方菜系 </el-checkbox>
-                <el-checkbox label="日式料理"> 日式料理 </el-checkbox>
-                <el-checkbox label="轻食"> 轻食 </el-checkbox>
-              </el-checkbox-group>
-            </el-form-item>
-          </div>
-
-          <!-- 右列 -->
-          <div class="form-col">
-            <el-form-item label="门店营业状态" prop="businessStatus">
-              <el-radio-group v-model="step2Form.businessStatus">
-                <el-radio label="正常营业"> 正常营业 </el-radio>
-                <el-radio label="暂停营业"> 暂停营业 </el-radio>
-                <el-radio label="筹建中"> 筹建中 </el-radio>
-              </el-radio-group>
-            </el-form-item>
-
-            <el-form-item label="经纬度查询" prop="coordinates">
-              <el-input v-model="step2Form.coordinates" placeholder="请输入经纬度" />
-            </el-form-item>
-
-            <el-form-item label="营业执照" prop="businessLicense">
-              <el-upload
-                v-model:file-list="step2Form.businessLicenseFiles"
-                action="#"
-                list-type="picture-card"
-                :limit="1"
-                :on-exceed="handleExceed"
-              >
-                <el-icon><Plus /></el-icon>
-                <template #tip>
-                  <div class="el-upload__tip">(0/1)</div>
-                </template>
-              </el-upload>
-            </el-form-item>
-
-            <el-form-item label="合同图片" prop="contractImages">
-              <el-upload
-                v-model:file-list="step2Form.contractImageFiles"
-                action="#"
-                list-type="picture-card"
-                :limit="20"
-                :on-exceed="handleExceed"
-              >
-                <el-icon><Plus /></el-icon>
-                <template #tip>
-                  <div class="el-upload__tip">(0/20)</div>
-                </template>
-              </el-upload>
-            </el-form-item>
-
-            <el-form-item label="食品经营许可证" prop="foodLicense">
-              <el-upload
-                v-model:file-list="step2Form.foodLicenseFiles"
-                action="#"
-                list-type="picture-card"
-                :limit="1"
-                :on-exceed="handleExceed"
-              >
-                <el-icon><Plus /></el-icon>
-                <template #tip>
-                  <div class="el-upload__tip">(0/1)</div>
-                </template>
-              </el-upload>
-            </el-form-item>
+            <!-- 右列 -->
+            <div class="form-col">
+              <el-form-item label="门店营业状态" prop="businessStatus">
+                <el-radio-group v-model="step2Form.businessStatus">
+                  <el-radio label="正常营业"> 正常营业 </el-radio>
+                  <el-radio label="暂停营业"> 暂停营业 </el-radio>
+                  <el-radio label="筹建中"> 筹建中 </el-radio>
+                </el-radio-group>
+              </el-form-item>
+
+              <el-form-item label="经纬度查询" prop="coordinates">
+                <el-input v-model="step2Form.coordinates" placeholder="请输入经纬度" />
+              </el-form-item>
+
+              <el-form-item label="营业执照" prop="businessLicense">
+                <el-upload
+                  v-model:file-list="step2Form.businessLicenseFiles"
+                  action="#"
+                  list-type="picture-card"
+                  :limit="1"
+                  :on-exceed="handleExceed"
+                >
+                  <el-icon><Plus /></el-icon>
+                  <template #tip>
+                    <div class="el-upload__tip">(0/1)</div>
+                  </template>
+                </el-upload>
+              </el-form-item>
+
+              <el-form-item label="合同图片" prop="contractImages">
+                <el-upload
+                  v-model:file-list="step2Form.contractImageFiles"
+                  action="#"
+                  list-type="picture-card"
+                  :limit="20"
+                  :on-exceed="handleExceed"
+                >
+                  <el-icon><Plus /></el-icon>
+                  <template #tip>
+                    <div class="el-upload__tip">(0/20)</div>
+                  </template>
+                </el-upload>
+              </el-form-item>
+
+              <el-form-item label="食品经营许可证" prop="foodLicense">
+                <el-upload
+                  v-model:file-list="step2Form.foodLicenseFiles"
+                  action="#"
+                  list-type="picture-card"
+                  :limit="1"
+                  :on-exceed="handleExceed"
+                >
+                  <el-icon><Plus /></el-icon>
+                  <template #tip>
+                    <div class="el-upload__tip">(0/1)</div>
+                  </template>
+                </el-upload>
+              </el-form-item>
+            </div>
           </div>
-        </div>
-      </el-form>
+        </el-form>
+      </div>
+
+      <!-- 按钮 -->
+      <div class="form-actions">
+        <el-button size="large" @click="handlePrevStep"> 上一步 </el-button>
+        <el-button type="primary" size="large" @click="handleSubmit"> 提交 </el-button>
+      </div>
     </div>
-
-    <!-- 按钮 -->
-    <div class="form-actions">
-      <el-button size="large" @click="handlePrevStep"> 上一步 </el-button>
-      <el-button type="primary" size="large" @click="handleSubmit"> 提交 </el-button>
+    <!-- 第三步: 等待审核-->
+    <div v-if="currentStep === 3">
+      <div class="button-container">
+        <el-button type="primary" size="large" class="register-btn"> 等待审核 </el-button>
+      </div>
     </div>
   </div>
 </template>
@@ -339,6 +304,8 @@ const handleBack = () => {
     setStep(0);
   } else if (currentStep.value === 2) {
     setStep(1);
+  } else if (currentStep.value === 3) {
+    setStep(2);
   }
 };
 
@@ -362,6 +329,8 @@ const handlePrevStep = () => {
 
 // 提交
 const handleSubmit = async () => {
+  setStep(3);
+  return;
   if (!step2FormRef.value) return;
 
   await step2FormRef.value.validate(valid => {
@@ -406,6 +375,9 @@ const handleExceed = () => {
   .progress-container {
     padding: 0 100px;
     margin-bottom: 40px;
+    :deep(.el-step__head.is-process .el-step__icon) {
+      border-color: #909399 !important; /* 设置圆圈边框为灰色 */
+    }
     :deep(.el-steps) {
       .el-step__head {
         .el-step__icon {
@@ -424,15 +396,15 @@ const handleExceed = () => {
           .step-title {
             font-size: 16px;
             font-weight: 600;
-            color: #303133;
+            color: #6c8ff8;
           }
           .step-time {
             display: inline-block;
             padding: 4px 12px;
             font-size: 12px;
-            color: #909399;
+            color: #6c8ff8;
             white-space: nowrap;
-            background: #f5f7fa;
+            background: #eef1ff;
             border-radius: 12px;
           }
         }
@@ -461,10 +433,31 @@ const handleExceed = () => {
     margin-top: 40px;
     border-top: 1px solid #e4e7ed;
     .el-button {
-      width: 150px;
+      width: 200px;
       height: 44px;
       font-size: 16px;
+      font-weight: 500;
+      color: #ffffff;
+      background: #6c8ff8;
+      border: none;
+      border-radius: 4px;
+      outline: none;
     }
   }
 }
+.button-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .register-btn {
+    width: 200px;
+    height: 44px;
+    font-size: 16px;
+    font-weight: 500;
+    background: #6c8ff8;
+    border: 0;
+    border-radius: 4px;
+    outline: none;
+  }
+}
 </style>

src/views/home/notice.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="notice-page">
+    <!-- 头部 -->
+    <div class="header">
+      <h1 class="title">通知</h1>
+      <el-button class="mark-all-read-btn" @click="handleMarkAllRead">
+        <el-icon><CircleCheck /></el-icon>
+        一键已读
+      </el-button>
+    </div>
+
+    <!-- 通知列表 -->
+    <div class="notice-list">
+      <div v-for="(item, index) in noticeList" :key="index" class="notice-card" :class="{ unread: !item.isRead }">
+        <div class="card-header">
+          <h3 class="card-title">
+            {{ item.title }}
+          </h3>
+          <div class="card-time-wrapper">
+            <span class="card-time">{{ item.time }}</span>
+            <span v-if="!item.isRead" class="unread-dot" />
+          </div>
+        </div>
+        <div class="card-content">
+          {{ item.content }}
+        </div>
+        <div class="card-footer">
+          <el-button class="view-detail-btn" @click="handleViewDetail(item)"> 查看详情 </el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 详情对话框 -->
+    <el-dialog v-model="dialogVisible" :title="currentNotice?.title" width="500px" :close-on-click-modal="false">
+      <div class="dialog-content">
+        {{ currentNotice?.content }}
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+import { CircleCheck } from "@element-plus/icons-vue";
+
+interface NoticeItem {
+  id: number;
+  title: string;
+  time: string;
+  content: string;
+  isRead: boolean;
+}
+
+const noticeList = ref<NoticeItem[]>([
+  {
+    id: 1,
+    title: "入驻店铺申请通知",
+    time: "2025/08/01 12:00",
+    content: "您在2025-01-01 12:12:12提交的入驻店铺申请,平台已受理,1-3个工作日将审核结果发送至应用内的消息—通知中,请注意查收。",
+    isRead: false
+  },
+  {
+    id: 2,
+    title: "入驻店铺申请通知",
+    time: "2025/08/01 12:00",
+    content: "您在2025-01-01 12:12:12提交的入驻店铺申请,平台已受理,1-3个工作日将审核结果发送至应用内的消息—通知中,请注意查收。",
+    isRead: true
+  }
+]);
+
+const dialogVisible = ref(false);
+const currentNotice = ref<NoticeItem | null>(null);
+
+// 一键已读
+const handleMarkAllRead = () => {
+  noticeList.value.forEach(item => {
+    item.isRead = true;
+  });
+  ElMessage.success("已全部标记为已读");
+};
+
+// 查看详情
+const handleViewDetail = (item: NoticeItem) => {
+  // 标记为已读
+  item.isRead = true;
+  // 显示详情对话框
+  currentNotice.value = item;
+  dialogVisible.value = true;
+};
+</script>
+
+<style scoped lang="scss">
+.notice-page {
+  min-height: calc(100vh - 100px);
+  padding: 20px;
+  background: #ffffff;
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+    .title {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: #303133;
+    }
+    .mark-all-read-btn {
+      color: #606266;
+      background: #ffffff;
+      border-color: #dcdfe6;
+      .el-icon {
+        margin-right: 4px;
+      }
+    }
+  }
+  .notice-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    .notice-card {
+      padding: 20px;
+      background: #ffffff;
+      border: 1px solid #e4e7ed;
+      border-radius: 8px;
+      transition: all 0.3s;
+
+      // &.unread {
+      //   border-color: #409eff;
+      // }
+      .card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 12px;
+        .card-title {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 600;
+          color: #303133;
+        }
+        .card-time-wrapper {
+          display: flex;
+          gap: 8px;
+          align-items: center;
+          .card-time {
+            font-size: 14px;
+            color: #909399;
+          }
+          .unread-dot {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            background: #f56c6c;
+            border-radius: 50%;
+          }
+        }
+      }
+      .card-content {
+        margin-bottom: 16px;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #606266;
+      }
+      .card-footer {
+        display: flex;
+        justify-content: flex-end;
+        .view-detail-btn {
+          padding: 8px 16px;
+          font-size: 14px;
+          color: #606266;
+          background: #ffffff;
+          border-color: #dcdfe6;
+        }
+      }
+    }
+  }
+}
+.dialog-content {
+  padding: 10px 0;
+  font-size: 14px;
+  line-height: 1.8;
+  color: #303133;
+}
+</style>

src/views/home/userInfo.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="user-info-page">
     <div class="top-bar">
-      <el-button size="small" @click="handleBack"> 返回 </el-button>
+      <el-button class="back-btn" @click="handleBack"> 返回 </el-button>
       <div class="title">个人信息</div>
     </div>
-
     <div class="form-wrap">
       <el-form :model="form" :rules="rules" ref="formRef" label-width="72px">
         <el-form-item label="头像">
@@ -27,10 +26,6 @@
         <el-form-item label="简介" prop="intro">
           <el-input v-model="form.intro" type="textarea" :rows="6" placeholder="请输入简介" />
         </el-form-item>
-
-        <div class="actions">
-          <el-button type="primary" class="save-btn" @click="handleSave"> 保存 </el-button>
-        </div>
       </el-form>
     </div>
   </div>
@@ -74,6 +69,7 @@ const handleSave = async () => {
 <style scoped lang="scss">
 .user-info-page {
   padding: 16px;
+  background: #ffffff;
   .top-bar {
     display: flex;
     gap: 12px;