With the development of technology, the complexity of development is getting higher and higher. The traditional development method makes a system into a whole application. It often happens that a small change or the addition of a small function may cause the overall logic to change. The modification affects the whole body. Through component development, individual development and maintenance can be effectively achieved, and they can be combined at will. Greatly improve low development efficiency and reduce maintenance costs.
Componentization is the only way for any front-end application with complex business scenarios and products after multiple iterations. Componentization requires more than just the module splitting and decoupling seen on the surface. There is also a lot of work behind it to support componentization, such as module splitting strategies based on business characteristics, interaction methods between modules, and building systems. etc.
A component introduced to you today is a custom horizontal step bar component that can be used for product order status; the source code download address is attached: https://ext.dcloud.net.cn/plugin?id=13494
The rendering is as follows:
# cc-horSteps
#### Instructions
```How to use
<!-- Custom horizontal step bar title: title colors: theme color stepData: step data -->
<cc-horSteps title="Service Status" :colors="colors" :stepData="stepData"></cc-horSteps>
<!-- Setting data-->
colors: '#fa436a',
stepData: [ //This data is returned by the background in the following format:
/**
* isNow: 1 represents that the current step has reached this step
* type: 1 means that the current step has been completed
*/
{
step_id: 1,
name: 'Submit application',
isNow: 0,
type: 1
},
{
step_id: 2,
name: 'Merchant Review',
isNow: 0,
type: 1
},
{
step_id: 3,
name: 'Merchant Receipt',
isNow: 0,
type: 1
},
{
step_id: 4,
name: 'Renewing',
isNow: 1,
type: 0
},
{
step_id: 5,
name: 'Completed',
isNow: 0,
type: 0
},
]
```
#### HTML code implementation part
```html
<template>
<view class="after_sale_details">
<!-- Custom horizontal step bar colors: theme color stepData: step data -->
<cc-horSteps :colors="colors" :stepData="stepData"></cc-horSteps>
</view>
</template>
<script>
export default {
data() {
return {
colors: '#fa436a',
stepData: [ //This data is returned by the background in the following format:
/**
* isNow: 1 represents that the current step has reached this step
* type: 1 means that the current step has been completed
*/
{
step_id: 1,
name: 'Submit application',
isNow: 0,
type: 1
},
{
step_id: 2,
name: 'Merchant Review',
isNow: 0,
type: 1
},
{
step_id: 3,
name: 'Merchant Receipt',
isNow: 0,
type: 1
},
{
step_id: 4,
name: 'Renewing',
isNow: 1,
type: 0
},
{
step_id: 5,
name: 'Completed',
isNow: 0,
type: 0
},
]
}
},
onLoad(options) {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #F8F8F8;
}
</style>
```