|
|
@@ -0,0 +1,368 @@
|
|
|
+<template>
|
|
|
+ <div class="change-person-container">
|
|
|
+ <div class="change-content">
|
|
|
+ <!-- 头部标题 -->
|
|
|
+ <div class="page-header">
|
|
|
+ <div class="page-title">变更采购负责人</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 步骤条 -->
|
|
|
+ <div class="steps-container">
|
|
|
+ <!-- 步骤1 -->
|
|
|
+ <div class="step-item" :class="{ active: currentStep >= 1 }">
|
|
|
+ <div class="step-circle">
|
|
|
+ <el-icon v-if="currentStep >= 1"><Check /></el-icon>
|
|
|
+ <span v-else>1</span>
|
|
|
+ </div>
|
|
|
+ <div class="step-label">验证身份</div>
|
|
|
+ </div>
|
|
|
+ <div class="step-line" :class="{ active: currentStep > 1 }"></div>
|
|
|
+
|
|
|
+ <!-- 步骤2 -->
|
|
|
+ <div class="step-item" :class="{ active: currentStep >= 2 }">
|
|
|
+ <div class="step-circle">
|
|
|
+ <el-icon v-if="currentStep > 2"><Check /></el-icon>
|
|
|
+ <span v-else>2</span>
|
|
|
+ </div>
|
|
|
+ <div class="step-label">选择人员</div>
|
|
|
+ </div>
|
|
|
+ <div class="step-line" :class="{ active: currentStep > 2 }"></div>
|
|
|
+
|
|
|
+ <!-- 步骤3 -->
|
|
|
+ <div class="step-item" :class="{ active: currentStep >= 3 }">
|
|
|
+ <div class="step-circle">
|
|
|
+ <span v-if="currentStep < 3">3</span>
|
|
|
+ <el-icon v-else><Check /></el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="step-label">完成</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 步骤1:验证身份内容 -->
|
|
|
+ <div class="step-content" v-if="currentStep === 1">
|
|
|
+ <el-form ref="step1FormRef" :model="step1Form" label-width="120px" class="verify-form">
|
|
|
+ <el-form-item label="手机号码:">
|
|
|
+ <div class="form-item-wrapper">
|
|
|
+ <el-input v-model="step1Form.phone" placeholder="请输入手机号码" class="form-input" />
|
|
|
+ <span class="form-tip">若该手机号已无法使用请联系客服</span>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="验证码:">
|
|
|
+ <div class="form-item-wrapper">
|
|
|
+ <el-input v-model="step1Form.code" placeholder="短信验证码" class="form-input code-input">
|
|
|
+ <template #suffix>
|
|
|
+ <el-button link class="send-code-btn" :disabled="countdown > 0" @click="handleSendCode">
|
|
|
+ {{ countdown > 0 ? `${countdown}s后发送` : '发送验证码' }}
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label=" ">
|
|
|
+ <div class="captcha-box">
|
|
|
+ <el-radio v-model="step1Form.verified" :label="true" class="captcha-radio">点击验证</el-radio>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label=" " class="action-item">
|
|
|
+ <el-button type="primary" class="next-btn" @click="handleNextStep">下一步</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 步骤2:选择人员内容 (模拟) -->
|
|
|
+ <div class="step-content" v-if="currentStep === 2">
|
|
|
+ <el-form label-width="120px" class="verify-form">
|
|
|
+ <el-form-item label="选择新负责人:">
|
|
|
+ <el-select v-model="step2Form.person" placeholder="请选择新采购负责人" class="form-input">
|
|
|
+ <el-option label="张三" value="zhangsan" />
|
|
|
+ <el-option label="李四" value="lisi" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label=" " class="action-item">
|
|
|
+ <el-button @click="currentStep = 1">上一步</el-button>
|
|
|
+ <el-button type="primary" class="next-btn" @click="currentStep = 3" style="width: auto; padding: 0 40px">提交</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 步骤3:完成内容 (模拟) -->
|
|
|
+ <div class="step-content" v-if="currentStep === 3">
|
|
|
+ <div class="success-content">
|
|
|
+ <el-icon class="success-icon" color="#e60012" :size="80"><CircleCheckFilled /></el-icon>
|
|
|
+ <div class="success-title">负责人变更成功!</div>
|
|
|
+ <el-button type="primary" class="next-btn" style="margin-top: 40px; width: 200px" @click="currentStep = 1">返回</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, reactive } from 'vue';
|
|
|
+import { Check, CircleCheckFilled } from '@element-plus/icons-vue';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
+
|
|
|
+const currentStep = ref(1);
|
|
|
+
|
|
|
+const step1Form = reactive({
|
|
|
+ phone: '',
|
|
|
+ code: '',
|
|
|
+ verified: false
|
|
|
+});
|
|
|
+
|
|
|
+const step2Form = reactive({
|
|
|
+ person: ''
|
|
|
+});
|
|
|
+
|
|
|
+const countdown = ref(0);
|
|
|
+
|
|
|
+// 发送验证码模拟方法
|
|
|
+const handleSendCode = () => {
|
|
|
+ if (!step1Form.phone) {
|
|
|
+ ElMessage.warning('请输入手机号码');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ countdown.value = 60;
|
|
|
+ const timer = setInterval(() => {
|
|
|
+ countdown.value--;
|
|
|
+ if (countdown.value <= 0) {
|
|
|
+ clearInterval(timer);
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ ElMessage.success('验证码已发送');
|
|
|
+};
|
|
|
+
|
|
|
+const handleNextStep = () => {
|
|
|
+ if (!step1Form.phone || !step1Form.code) {
|
|
|
+ ElMessage.warning('请填写完整的手机号和验证码');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!step1Form.verified) {
|
|
|
+ ElMessage.warning('请完成点击验证');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ currentStep.value = 2;
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.change-person-container {
|
|
|
+ background: #f4f5f5;
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: 20px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.change-content {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ min-height: calc(100vh - 40px);
|
|
|
+ margin: 0 auto;
|
|
|
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
|
|
+
|
|
|
+ .page-header {
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ padding: 24px 30px;
|
|
|
+
|
|
|
+ .page-title {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.steps-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 60px auto 70px;
|
|
|
+ max-width: 650px;
|
|
|
+}
|
|
|
+
|
|
|
+.step-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ width: 80px;
|
|
|
+
|
|
|
+ .step-circle {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2px solid #ddd;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #ccc;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ transition: all 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .step-label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ transition: all 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ .step-circle {
|
|
|
+ border-color: #e60012;
|
|
|
+ color: #e60012;
|
|
|
+ }
|
|
|
+ .step-label {
|
|
|
+ color: #e60012;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.step-line {
|
|
|
+ flex: 1;
|
|
|
+ height: 2px;
|
|
|
+ background: #ddd;
|
|
|
+ margin: 0 10px;
|
|
|
+ margin-bottom: 30px; /* 居中对齐横线与圆圈中心 */
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #e60012;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.step-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding-bottom: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.verify-form {
|
|
|
+ width: 550px;
|
|
|
+
|
|
|
+ :deep(.el-form-item__label) {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-item-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ gap: 15px;
|
|
|
+
|
|
|
+ .form-input {
|
|
|
+ width: 320px;
|
|
|
+
|
|
|
+ :deep(.el-input__wrapper) {
|
|
|
+ box-shadow: 0 0 0 1px #dcdfe6 inset;
|
|
|
+ border-radius: 2px;
|
|
|
+ background-color: #f7f9fb;
|
|
|
+ &.is-focus {
|
|
|
+ box-shadow: 0 0 0 1px #e60012 inset !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-input__inner) {
|
|
|
+ height: 38px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-tip {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .send-code-btn {
|
|
|
+ color: #e60012;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #159c81;
|
|
|
+ }
|
|
|
+ &.is-disabled {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .captcha-box {
|
|
|
+ width: 320px;
|
|
|
+ height: 42px;
|
|
|
+ background: #f4f6fb;
|
|
|
+ border: 1px solid #ccd6e8;
|
|
|
+ border-radius: 2px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 20px;
|
|
|
+
|
|
|
+ .captcha-radio {
|
|
|
+ :deep(.el-radio__input.is-checked .el-radio__inner) {
|
|
|
+ border-color: #bbc7da;
|
|
|
+ background: #bbc7da;
|
|
|
+ &::after {
|
|
|
+ background-color: #6a82a7;
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.el-radio__inner) {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ :deep(.el-radio__label) {
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-item {
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .next-btn {
|
|
|
+ width: 320px;
|
|
|
+ height: 40px;
|
|
|
+ background-color: #e60012;
|
|
|
+ border-color: #e60012;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.success-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 50px;
|
|
|
+
|
|
|
+ .success-icon {
|
|
|
+ margin-bottom: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .success-title {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .next-btn {
|
|
|
+ background-color: #e60012;
|
|
|
+ border-color: #e60012;
|
|
|
+ &:hover {
|
|
|
+ background-color: #159c81;
|
|
|
+ border-color: #159c81;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|