Skip to content

C
campSite
Commit 529b0202 authored by wuwangwolihui's avatar wuwangwolihui
Browse files
Options

breadcrumb数量自适应

parent 35afbd47
Show whitespace changes
Inline Side-by-side
Showing with 179 additions and 128 deletions
src/components/breadcrumb.vue
View file @ 529b0202
<template> <template>
<div class="steps flex"> <div class="steps flex">
<!-- 1 --> <div class="step flex" v-for="(item, index) in bCList" :key="item.status">
<div class="step flex"> <div :class="'cricle' + ' ' + (status >= item.status? 'speed-bg-color' : '')">
<div :class="'cricle' + ' ' + (status >= 0? 'speed-bg-color' : '')"> <span class="num">{{index+1}}</span>
<span class="num">1</span>
</div> </div>
<div <div
:class="'step_title' + ' ' + (status >= 0 ? 'speed-text-color' : '')" :class="'step_title' + ' ' + (status >= item.status ? 'speed-text-color' : '')"
> >
确认报名须知 {{item.name}}
</div> </div>
<div> <div>
<img src="../assets/img/signUp/left.png" alt="" /> <img src="../assets/img/signUp/left.png" alt="" v-if="item.status<4"/>
</div> </div>
</div> </div>
<!-- 1 -->
<!-- <div class="step flex">-->
<!-- <div :class="'cricle' + ' ' + (status >= 0? 'speed-bg-color' : '')">-->
<!-- <span class="num">1</span>-->
<!-- </div>-->
<!-- <div-->
<!-- :class="'step_title' + ' ' + (status >= 0 ? 'speed-text-color' : '')"-->
<!-- >-->
<!-- 确认报名须知-->
<!-- </div>-->
<!-- <div>-->
<!-- <img src="../assets/img/signUp/left.png" alt=""/>-->
<!-- </div>-->
<!-- </div>-->
<!-- 2 --> <!-- 2 -->
<div class="step flex"> <!-- <div class="step flex">-->
<div <!-- <div-->
class="cricle cc" <!-- class="cricle cc"-->
:class="'cricle' + ' ' + (status >= 1 ? 'speed-bg-color' : '')" <!-- :class="'cricle' + ' ' + (status >= 1 ? 'speed-bg-color' : '')"-->
> <!-- >-->
<span class="num">2</span> <!-- <span class="num">2</span>-->
</div> <!-- </div>-->
<div <!-- <div-->
:class="'step_title' + ' ' + (status >= 1? 'speed-text-color' : '')" <!-- :class="'step_title' + ' ' + (status >= 1? 'speed-text-color' : '')"-->
> <!-- >-->
填写邀请码 <!-- 填写邀请码-->
</div> <!-- </div>-->
<img src="../assets/img/signUp/left.png" alt="" /> <!-- <img src="../assets/img/signUp/left.png" alt=""/>-->
</div> <!-- </div>-->
<!-- 3 --> <!-- 3 -->
<div class="step flex"> <!-- <div class="step flex">-->
<div <!-- <div-->
class="cricle cc" <!-- class="cricle cc"-->
:class="'cricle' + ' ' + (status >=2 ? 'speed-bg-color' : '')" <!-- :class="'cricle' + ' ' + (status >=2 ? 'speed-bg-color' : '')"-->
> <!-- >-->
<span class="num">3</span> <!-- <span class="num">3</span>-->
</div> <!-- </div>-->
<div <!-- <div-->
:class="'step_title' + ' ' + (status >=2 ? 'speed-text-color' : '')" <!-- :class="'step_title' + ' ' + (status >=2 ? 'speed-text-color' : '')"-->
> <!-- >-->
填写报名资料 <!-- 填写报名资料-->
</div> <!-- </div>-->
<img src="../assets/img/signUp/left.png" alt="" /> <!-- <img src="../assets/img/signUp/left.png" alt=""/>-->
</div> <!-- </div>-->
<!-- 4 --> <!-- 4 -->
<div class="step flex"> <!-- <div class="step flex">-->
<div <!-- <div-->
class="cricle cc" <!-- class="cricle cc"-->
:class="'cricle' + ' ' + (status >=3 ? 'speed-bg-color' : '')" <!-- :class="'cricle' + ' ' + (status >=3 ? 'speed-bg-color' : '')"-->
> <!-- >-->
<span class="num">4</span> <!-- <span class="num">4</span>-->
</div> <!-- </div>-->
<div :class="'step_title' + ' ' + (status >=3? 'speed-text-color' : '')"> <!-- <div :class="'step_title' + ' ' + (status >=3? 'speed-text-color' : '')">-->
报名资料审核 <!-- 报名资料审核-->
</div> <!-- </div>-->
<img src="../assets/img/signUp/left.png" alt="" /> <!-- <img src="../assets/img/signUp/left.png" alt=""/>-->
</div> <!-- </div>-->
<!-- 5 --> <!-- 5 -->
<div class="step flex"> <!-- <div class="step flex">-->
<div <!-- <div-->
class="cricle cc" <!-- class="cricle cc"-->
:class="'cricle' + ' ' + (status >= 4 ? 'speed-bg-color' : '')" <!-- :class="'cricle' + ' ' + (status >= 4 ? 'speed-bg-color' : '')"-->
> <!-- >-->
<span class="num">5</span> <!-- <span class="num">5</span>-->
</div> <!-- </div>-->
<div :class="'step_title' + ' ' + (status >= 4 ? 'speed-text-color' : '')"> <!-- <div :class="'step_title' + ' ' + (status >= 4 ? 'speed-text-color' : '')">-->
缴费 <!-- 缴费-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> </div>
</template> </template>
<script> <script>
/* eslint-disable */ /* eslint-disable */
export default { export default {
name: "breadcrumb", name: "breadcrumb",
props: { statusNum: [String, Number] }, //进度参数 props: {statusNum: [String, Number]}, //进度参数
data() { data() {
return { return {
status: this.statusNum, status: this.statusNum,
bCList: []
}; };
}, },
created() {}, created() {
const doubt_code = window.localStorage.getItem("doubt_code");
const doubt_info = window.localStorage.getItem("doubt_info");
const doubt_check = window.localStorage.getItem("doubt_check");
const newArr = [
{
name: '确认报名须知',
status: 0
},
{
name: '填写邀请码',
status: 1
},
{
name: '填写报名资料',
status: 2
},
{
name: '报名资料审核',
status: 3
},
{
name: '缴费',
status: 4
}
];
newArr.forEach((item, index, array) => {
if(doubt_code == 0 && item.status == 1){
array.splice(item, 1);
}
if(doubt_info == 0 && item.status == 2){
array.splice(item, 1);
}
if(doubt_check == 0 && item.status == 3){
array.splice(item, 1);
}
})
this.bCList = newArr;
},
watch: { watch: {
statusNum(val) { statusNum(val) {
console.log(val) console.log(val)
...@@ -90,31 +142,36 @@ export default { ...@@ -90,31 +142,36 @@ export default {
}, },
}, },
methods: {}, methods: {},
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.flex { .flex {
display: flex; display: flex;
} }
.speed-bg-color {
background-color:var(--color) !important; .speed-bg-color {
} background-color: var(--color) !important;
.speed-text-color { }
.speed-text-color {
color: var(--color) !important; color: var(--color) !important;
} }
.steps {
.steps {
.step { .step {
align-items: center; align-items: center;
} }
.num { .num {
color: #ffff; color: #ffff;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
} }
.cricle { .cricle {
position: relative; position: relative;
width: 57px; width: 57px;
...@@ -124,9 +181,11 @@ export default { ...@@ -124,9 +181,11 @@ export default {
border-radius: 41px; border-radius: 41px;
margin-right: 10px; margin-right: 10px;
} }
img { img {
margin: 15px; margin: 15px;
} }
.step_title { .step_title {
font-size: 14px; font-size: 14px;
width: 100%; width: 100%;
...@@ -134,5 +193,5 @@ export default { ...@@ -134,5 +193,5 @@ export default {
font-weight: 600; font-weight: 600;
color: #d0ced0; color: #d0ced0;
} }
} }
</style> </style>
src/views/index/camp/SignUp.vue
View file @ 529b0202
...@@ -6,18 +6,12 @@ ...@@ -6,18 +6,12 @@
<Breadcrumb :statusNum="status"> </Breadcrumb> <Breadcrumb :statusNum="status"> </Breadcrumb>
</div> </div>
</div> </div>
<Confirm v-if="type == 'examInfo'" :statusNum="status"> </Confirm> <Confirm v-if="type == 'examInfo'" :statusNum="status" @getstatus="statuss"></Confirm>
<Invitation <Invitation v-else-if="type == 'invitation'" :statusNum="status" @getstatus="statuss"></Invitation>
v-else-if="type == 'invitation'" <ReferInfo v-else-if="type == 'referInfo'" @getstatus="statuss"></ReferInfo>
:statusNum="status" <Pass v-else-if="type == 'check'" @getstatus="statuss"></Pass>
@getstatus="statuss" <Paying v-else-if="type == 'pay'" @getstatus="statuss"></Paying>
> <Success v-else-if="type == 'success'" @getstatus="statuss"></Success>
</Invitation>
<ReferInfo v-else-if="type == 'referInfo'" @getstatus="statuss">
</ReferInfo>
<Pass v-else-if="type == 'check'" @getstatus="statuss"> </Pass>
<Paying v-else-if="type == 'pay'" @getstatus="statuss"> </Paying>
<Success v-else-if="type == 'success'" @getstatus="statuss"> </Success>
</div> </div>
</template> </template>
...@@ -47,7 +41,6 @@ export default { ...@@ -47,7 +41,6 @@ export default {
return { return {
type: "examInfo", type: "examInfo",
status: "", //进度 status: "", //进度
// statuss:''
doubt_code: window.localStorage.getItem("doubt_code"), doubt_code: window.localStorage.getItem("doubt_code"),
doubt_info: window.localStorage.getItem("doubt_info"), doubt_info: window.localStorage.getItem("doubt_info"),
doubt_check: window.localStorage.getItem("doubt_check"), doubt_check: window.localStorage.getItem("doubt_check"),
...@@ -73,11 +66,10 @@ export default { ...@@ -73,11 +66,10 @@ export default {
}, },
}, },
methods: { methods: {
// 点击邀请码下一步传来的status // 点击下一步，触发父组件方法
statuss(val) { statuss(val) {
console.log(val, "val"); console.log(val, "val");
// this.statuss = val; this.signUpInit();
// this.signUpInit();
}, },
signUpInit() { signUpInit() {
// console.log(111); // console.log(111);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment