Skip to content

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

breadcrumb数量自适应

parent 35afbd47
Hide whitespace changes
Inline Side-by-side
Showing with 179 additions and 128 deletions
src/components/breadcrumb.vue
View file @ 529b0202
<template>
<div class="steps flex">
<!-- 1 -->
<div class="step flex">
<div :class="'cricle' + ' ' + (status >= 0? 'speed-bg-color' : '')">
<span class="num">1</span>
<div class="step flex" v-for="(item, index) in bCList" :key="item.status">
<div :class="'cricle' + ' ' + (status >= item.status? 'speed-bg-color' : '')">
<span class="num">{{index+1}}</span>
</div>
<div
:class="'step_title' + ' ' + (status >= 0 ? 'speed-text-color' : '')"
:class="'step_title' + ' ' + (status >= item.status ? 'speed-text-color' : '')"
>
确认报名须知
{{item.name}}
</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>
<!-- 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 -->
<div class="step flex">
<div
class="cricle cc"
:class="'cricle' + ' ' + (status >= 1 ? 'speed-bg-color' : '')"
>
<span class="num">2</span>
</div>
<div
:class="'step_title' + ' ' + (status >= 1? 'speed-text-color' : '')"
>
填写邀请码
</div>
<img src="../assets/img/signUp/left.png" alt="" />
</div>
<!-- <div class="step flex">-->
<!-- <div-->
<!-- class="cricle cc"-->
<!-- :class="'cricle' + ' ' + (status >= 1 ? 'speed-bg-color' : '')"-->
<!-- >-->
<!-- <span class="num">2</span>-->
<!-- </div>-->
<!-- <div-->
<!-- :class="'step_title' + ' ' + (status >= 1? 'speed-text-color' : '')"-->
<!-- >-->
<!-- 填写邀请码-->
<!-- </div>-->
<!-- <img src="../assets/img/signUp/left.png" alt=""/>-->
<!-- </div>-->
<!-- 3 -->
<div class="step flex">
<div
class="cricle cc"
:class="'cricle' + ' ' + (status >=2 ? 'speed-bg-color' : '')"
>
<span class="num">3</span>
</div>
<div
:class="'step_title' + ' ' + (status >=2 ? 'speed-text-color' : '')"
>
填写报名资料
</div>
<img src="../assets/img/signUp/left.png" alt="" />
</div>
<!-- <div class="step flex">-->
<!-- <div-->
<!-- class="cricle cc"-->
<!-- :class="'cricle' + ' ' + (status >=2 ? 'speed-bg-color' : '')"-->
<!-- >-->
<!-- <span class="num">3</span>-->
<!-- </div>-->
<!-- <div-->
<!-- :class="'step_title' + ' ' + (status >=2 ? 'speed-text-color' : '')"-->
<!-- >-->
<!-- 填写报名资料-->
<!-- </div>-->
<!-- <img src="../assets/img/signUp/left.png" alt=""/>-->
<!-- </div>-->
<!-- 4 -->
<div class="step flex">
<div
class="cricle cc"
:class="'cricle' + ' ' + (status >=3 ? 'speed-bg-color' : '')"
>
<span class="num">4</span>
</div>
<div :class="'step_title' + ' ' + (status >=3? 'speed-text-color' : '')">
报名资料审核
</div>
<img src="../assets/img/signUp/left.png" alt="" />
</div>
<!-- <div class="step flex">-->
<!-- <div-->
<!-- class="cricle cc"-->
<!-- :class="'cricle' + ' ' + (status >=3 ? 'speed-bg-color' : '')"-->
<!-- >-->
<!-- <span class="num">4</span>-->
<!-- </div>-->
<!-- <div :class="'step_title' + ' ' + (status >=3? 'speed-text-color' : '')">-->
<!-- 报名资料审核-->
<!-- </div>-->
<!-- <img src="../assets/img/signUp/left.png" alt=""/>-->
<!-- </div>-->
<!-- 5 -->
<div class="step flex">
<div
class="cricle cc"
:class="'cricle' + ' ' + (status >= 4 ? 'speed-bg-color' : '')"
>
<span class="num">5</span>
</div>
<div :class="'step_title' + ' ' + (status >= 4 ? 'speed-text-color' : '')">
缴费
</div>
</div>
<!-- <div class="step flex">-->
<!-- <div-->
<!-- class="cricle cc"-->
<!-- :class="'cricle' + ' ' + (status >= 4 ? 'speed-bg-color' : '')"-->
<!-- >-->
<!-- <span class="num">5</span>-->
<!-- </div>-->
<!-- <div :class="'step_title' + ' ' + (status >= 4 ? 'speed-text-color' : '')">-->
<!-- 缴费-->
<!-- </div>-->
<!-- </div>-->
</div>
</template>
<script>
/* eslint-disable */
export default {
name: "breadcrumb",
props: { statusNum: [String, Number] }, //进度参数
data() {
return {
status: this.statusNum,
};
},
created() {},
watch: {
statusNum(val) {
console.log(val)
this.status = val;
/* eslint-disable */
export default {
name: "breadcrumb",
props: {statusNum: [String, Number]}, //进度参数
data() {
return {
status: this.statusNum,
bCList: []
};
},
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;
},
},
methods: {},
};
watch: {
statusNum(val) {
console.log(val)
this.status = val;
},
},
methods: {},
};
</script>
<style scoped lang="scss">
.flex {
display: flex;
}
.speed-bg-color {
background-color:var(--color) !important;
}
.speed-text-color {
color: var(--color) !important;
}
.steps {
.step {
align-items: center;
}
.num {
color: #ffff;
position: absolute;
z-index: 999;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
.flex {
display: flex;
}
.cricle {
position: relative;
width: 57px;
height: 29px;
background: #d0ced0;
border-radius: 41px;
margin-right: 10px;
.speed-bg-color {
background-color: var(--color) !important;
}
img {
margin: 15px;
.speed-text-color {
color: var(--color) !important;
}
.step_title {
font-size: 14px;
width: 100%;
height: 20px;
font-weight: 600;
color: #d0ced0;
.steps {
.step {
align-items: center;
}
.num {
color: #ffff;
position: absolute;
z-index: 999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.cricle {
position: relative;
width: 57px;
height: 29px;
background: #d0ced0;
border-radius: 41px;
margin-right: 10px;
}
img {
margin: 15px;
}
.step_title {
font-size: 14px;
width: 100%;
height: 20px;
font-weight: 600;
color: #d0ced0;
}
}
}
</style>
\ No newline at end of file
</style>
src/views/index/camp/SignUp.vue
View file @ 529b0202
......@@ -6,18 +6,12 @@
<Breadcrumb :statusNum="status"> </Breadcrumb>
</div>
</div>
<Confirm v-if="type == 'examInfo'" :statusNum="status"> </Confirm>
<Invitation
v-else-if="type == 'invitation'"
:statusNum="status"
@getstatus="statuss"
>
</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>
<Confirm v-if="type == 'examInfo'" :statusNum="status" @getstatus="statuss"></Confirm>
<Invitation v-else-if="type == 'invitation'" :statusNum="status" @getstatus="statuss"></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>
</template>
......@@ -47,7 +41,6 @@ export default {
return {
type: "examInfo",
status: "", //进度
// statuss:''
doubt_code: window.localStorage.getItem("doubt_code"),
doubt_info: window.localStorage.getItem("doubt_info"),
doubt_check: window.localStorage.getItem("doubt_check"),
......@@ -73,11 +66,10 @@ export default {
},
},
methods: {
// 点击邀请码下一步传来的status
// 点击下一步，触发父组件方法
statuss(val) {
console.log(val, "val");
// this.statuss = val;
// this.signUpInit();
this.signUpInit();
},
signUpInit() {
// 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