|
@@ -44,8 +44,8 @@
|
|
|
<!-- 步骤1:验证身份 -->
|
|
<!-- 步骤1:验证身份 -->
|
|
|
<div class="step-content" v-if="currentStep === 1">
|
|
<div class="step-content" v-if="currentStep === 1">
|
|
|
<div class="phone-info">
|
|
<div class="phone-info">
|
|
|
- <span>已绑定的手机:</span>
|
|
|
|
|
- <span class="phone-number">180****7722</span>
|
|
|
|
|
|
|
+ <span>已绑定的手机:{{ step1Form.phone }}</span>
|
|
|
|
|
+ <span class="phone-number"></span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="phone-tip">若该手机号已无法使用请联系客服</div>
|
|
<div class="phone-tip">若该手机号已无法使用请联系客服</div>
|
|
|
|
|
|
|
@@ -62,7 +62,7 @@
|
|
|
</el-form>
|
|
</el-form>
|
|
|
|
|
|
|
|
<div class="step-actions">
|
|
<div class="step-actions">
|
|
|
- <el-button type="success" class="next-btn" @click="handleNextStep">下一步</el-button>
|
|
|
|
|
|
|
+ <el-button type="danger" class="next-btn" @click="handleNextStep">下一步</el-button>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 温馨提醒 -->
|
|
<!-- 温馨提醒 -->
|
|
@@ -90,17 +90,17 @@
|
|
|
</el-form>
|
|
</el-form>
|
|
|
<div class="step-actions">
|
|
<div class="step-actions">
|
|
|
<el-button @click="currentStep = 1">上一步</el-button>
|
|
<el-button @click="currentStep = 1">上一步</el-button>
|
|
|
- <el-button type="success" class="next-btn" @click="handleSubmit">确认更换</el-button>
|
|
|
|
|
|
|
+ <el-button type="danger" class="next-btn" @click="handleSubmit">确认更换</el-button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 步骤3:完成 -->
|
|
<!-- 步骤3:完成 -->
|
|
|
<div class="step-content" v-if="currentStep === 3">
|
|
<div class="step-content" v-if="currentStep === 3">
|
|
|
<div class="success-content">
|
|
<div class="success-content">
|
|
|
- <el-icon class="success-icon" color="#52c41a" :size="60"><CircleCheckFilled /></el-icon>
|
|
|
|
|
|
|
+ <el-icon class="success-icon" color="#e60012" :size="60"><CircleCheckFilled /></el-icon>
|
|
|
<div class="success-title">手机号码更换成功!</div>
|
|
<div class="success-title">手机号码更换成功!</div>
|
|
|
<div class="success-desc">您的安全手机已更换为 {{ step2Form.newPhone }}</div>
|
|
<div class="success-desc">您的安全手机已更换为 {{ step2Form.newPhone }}</div>
|
|
|
- <el-button type="success" @click="$router.push('/enterprise/securitySetting')">返回安全设置</el-button>
|
|
|
|
|
|
|
+ <el-button type="danger" @click="$router.push('/enterprise/securitySetting')">返回安全设置</el-button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -109,14 +109,15 @@
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { ref, reactive } from 'vue';
|
|
import { ref, reactive } from 'vue';
|
|
|
-import { Check, CircleCheckFilled } from '@element-plus/icons-vue';
|
|
|
|
|
|
|
+import { Check, CircleCheckFilled, Phone } from '@element-plus/icons-vue';
|
|
|
import { ElMessage } from 'element-plus';
|
|
import { ElMessage } from 'element-plus';
|
|
|
-
|
|
|
|
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
const currentStep = ref(1);
|
|
const currentStep = ref(1);
|
|
|
-
|
|
|
|
|
|
|
+const route = useRoute();
|
|
|
// 步骤1表单
|
|
// 步骤1表单
|
|
|
const step1FormRef = ref();
|
|
const step1FormRef = ref();
|
|
|
const step1Form = reactive({
|
|
const step1Form = reactive({
|
|
|
|
|
+ phone: route.query.phone,
|
|
|
code: '',
|
|
code: '',
|
|
|
verified: false
|
|
verified: false
|
|
|
});
|
|
});
|
|
@@ -281,22 +282,22 @@ const handleSubmit = async () => {
|
|
|
|
|
|
|
|
&.active {
|
|
&.active {
|
|
|
.step-circle {
|
|
.step-circle {
|
|
|
- border-color: #52c41a;
|
|
|
|
|
- color: #52c41a;
|
|
|
|
|
|
|
+ border-color: #e60012;
|
|
|
|
|
+ color: #e60012;
|
|
|
}
|
|
}
|
|
|
.step-label {
|
|
.step-label {
|
|
|
- color: #52c41a;
|
|
|
|
|
|
|
+ color: #e60012;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&.done {
|
|
&.done {
|
|
|
.step-circle {
|
|
.step-circle {
|
|
|
- border-color: #52c41a;
|
|
|
|
|
- background: #52c41a;
|
|
|
|
|
|
|
+ border-color: #e60012;
|
|
|
|
|
+ background: #e60012;
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
}
|
|
}
|
|
|
.step-label {
|
|
.step-label {
|
|
|
- color: #52c41a;
|
|
|
|
|
|
|
+ color: #e60012;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -309,7 +310,7 @@ const handleSubmit = async () => {
|
|
|
margin-bottom: 30px;
|
|
margin-bottom: 30px;
|
|
|
|
|
|
|
|
&.active {
|
|
&.active {
|
|
|
- background: #52c41a;
|
|
|
|
|
|
|
+ background: #e60012;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -352,7 +353,7 @@ const handleSubmit = async () => {
|
|
|
|
|
|
|
|
.send-code-btn {
|
|
.send-code-btn {
|
|
|
margin-left: 15px;
|
|
margin-left: 15px;
|
|
|
- color: #52c41a;
|
|
|
|
|
|
|
+ color: #e60012;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.verify-checkbox {
|
|
.verify-checkbox {
|