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

<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="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>
        </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: "231084199304282927"
});

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" }],
  storeIntro: [{ required: true, message: "请输入门店简介", trigger: "blur" }],
  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 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>