1

src/views/home/components/realName.vue

@@ -1,474 +0,0 @@
-<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>
-
-    <!-- 表单 -->
-    <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 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>
-          </template>
-        </el-step>
-      </el-steps>
-    </div>
-
-    <!-- 表单内容 -->
-    <div class="form-content step2-form">
-      <el-form :model="step2Form" :rules="step2Rules" ref="step2FormRef" label-width="120px">
-        <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>
-        </div>
-      </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>
-</template>
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue";
-import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
-import { Plus } from "@element-plus/icons-vue";
-
-const props = defineProps({
-  currentStep: {
-    type: Number,
-    value: 0
-  }
-});
-
-const emit = defineEmits(["update:currentStep"]);
-
-// 内部步骤状态，和父组件同步
-const currentStep = ref<number>(props.currentStep || 0);
-watch(
-  () => props.currentStep,
-  val => {
-    if (typeof val === "number") currentStep.value = val;
-  }
-);
-
-const setStep = (val: number) => {
-  currentStep.value = val;
-  emit("update:currentStep", val);
-};
-
-// 第一步表单
-const step1FormRef = ref<FormInstance>();
-const step1Form = reactive({
-  name: "",
-  idNumber: ""
-});
-
-const step1Rules: FormRules = {
-  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
-  idNumber: [
-    { required: true, message: "请输入身份证号码", trigger: "blur" },
-    {
-      pattern: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/,
-      message: "请输入正确的身份证号码",
-      trigger: "blur"
-    }
-  ]
-};
-
-// 第二步表单
-const step2FormRef = ref<FormInstance>();
-const step2Form = reactive({
-  storeName: "",
-  capacity: 1,
-  storePhone: "",
-  storeArea: "小于20平米",
-  province: "",
-  city: "",
-  district: "",
-  detailedAddress: "",
-  storeIntro: "",
-  businessSector: "美食",
-  businessType: ["小吃快餐", "火锅"],
-  businessStatus: "正常营业",
-  coordinates: "",
-  businessLicenseFiles: [],
-  contractImageFiles: [],
-  foodLicenseFiles: []
-});
-
-const step2Rules: FormRules = {
-  storeName: [{ required: true, message: "请输入店铺名称", trigger: "blur" }],
-  storePhone: [{ required: true, message: "请输入门店电话", trigger: "blur" }],
-  storeArea: [{ required: true, message: "请选择门店面积", trigger: "change" }],
-  businessSector: [{ required: true, message: "请选择经营板块", trigger: "change" }],
-  businessType: [{ required: true, message: "请选择经营种类", trigger: "change" }],
-  coordinates: [{ required: true, message: "请输入经纬度", trigger: "blur" }],
-  businessLicense: [{ required: true, message: "请上传营业执照", trigger: "change" }],
-  contractImages: [{ required: true, message: "请上传合同图片", trigger: "change" }],
-  foodLicense: [{ required: true, message: "请上传食品经营许可证", trigger: "change" }]
-};
-
-// 处理入驻按钮
-const handleRegister = () => {
-  setStep(1);
-};
-
-// 返回按钮
-const handleBack = () => {
-  if (currentStep.value === 1) {
-    setStep(0);
-  } else if (currentStep.value === 2) {
-    setStep(1);
-  }
-};
-
-// 下一步
-const handleNextStep = async () => {
-  if (!step1FormRef.value) return;
-
-  await step1FormRef.value.validate(valid => {
-    if (valid) {
-      setStep(2);
-    } else {
-      ElMessage.error("请完善表单信息");
-    }
-  });
-};
-
-// 上一步
-const handlePrevStep = () => {
-  setStep(1);
-};
-
-// 提交
-const handleSubmit = async () => {
-  if (!step2FormRef.value) return;
-
-  await step2FormRef.value.validate(valid => {
-    if (valid) {
-      ElMessageBox.confirm("确认提交入驻申请吗？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          // 这里可以调用API提交数据
-          ElMessage.success("提交成功，等待审核");
-          setStep(3); // 跳转到等待审核步骤
-        })
-        .catch(() => {
-          // 取消提交
-        });
-    } else {
-      ElMessage.error("请完善表单信息");
-    }
-  });
-};
-
-// 文件上传超出限制
-const handleExceed = () => {
-  ElMessage.warning("文件数量超出限制");
-};
-</script>
-
-<style scoped lang="scss">
-// 表单页面样式
-.form-container {
-  min-height: calc(100vh - 100px);
-  padding: 30px;
-  background: #ffffff;
-  border-radius: 8px;
-  .back-btn {
-    margin-bottom: 30px;
-    color: #606266;
-    border-color: #dcdfe6;
-  }
-  .progress-container {
-    padding: 0 100px;
-    margin-bottom: 40px;
-    :deep(.el-steps) {
-      .el-step__head {
-        .el-step__icon {
-          width: 30px;
-          height: 30px;
-          font-size: 16px;
-          font-weight: 600;
-        }
-      }
-      .el-step__title {
-        .step-title-wrapper {
-          display: flex;
-          flex-direction: column;
-          gap: 8px;
-          align-items: center;
-          .step-title {
-            font-size: 16px;
-            font-weight: 600;
-            color: #303133;
-          }
-          .step-time {
-            display: inline-block;
-            padding: 4px 12px;
-            font-size: 12px;
-            color: #909399;
-            white-space: nowrap;
-            background: #f5f7fa;
-            border-radius: 12px;
-          }
-        }
-      }
-    }
-  }
-  .form-content {
-    max-width: 800px;
-    margin: 0 auto;
-    &.step2-form {
-      max-width: 1400px;
-      .form-row {
-        display: flex;
-        gap: 40px;
-        .form-col {
-          flex: 1;
-        }
-      }
-    }
-  }
-  .form-actions {
-    display: flex;
-    gap: 20px;
-    justify-content: center;
-    padding-top: 30px;
-    margin-top: 40px;
-    border-top: 1px solid #e4e7ed;
-    .el-button {
-      width: 150px;
-      height: 44px;
-      font-size: 16px;
-    }
-  }
-}
-</style>