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 I will introduce to you today is a customized exquisite steps step bar progress bar plug-in logistics information tracking display component process approval follow-up component; comes with the source code download address: https://ext.dcloud.net.cn/plugin?id= 13492
For more information on front-end components, please follow the WeChat public account: Front-end component development
The rendering is as follows:
cc-defineStep
Instructions
<!-- colors: 设置主题色 stepData:步骤数据 -->
<cc-defineStep :colors="colors" :stepData="stepData"></cc-defineStep>
<!-- 数据设置 -->
colors:"#fa436a",
//模拟后台返回的数据
stepData: [
{
name: '提交申请',
time: '2023-06-09 20:01:49',
isNow: 0,
type: 1,
desc: '不想要了'
},
{
name: '等待审核',
time: '2023-06-09 20:01:49',
isNow: 0,
type: 1,
desc: '您的服务单已申请成功，待售后审核中'
},
{
name: '审核意见',
time: '2023-06-09 20:13:49',
isNow: 0,
type: 1,
desc: '您的售后单已收到，会在24小时与您联系。'
},
{
name: '审核上门取件',
time: '2023-06-09 20:13:49',
isNow: 0,
type: 1,
desc: '您的服务单已预约时间2023-06-10(周日) 15:00-20:00'
},
{
name: '取件成功',
time: '2023-06-10 18:54:55',
isNow: 0,
type: 1,
desc: '您的商品已取件成功'
},
{
name: '商家售后已收到',
time: '2023-06-12 09:01:49',
isNow: 0,
type: 1,
desc: '您的服务单商品已收到'
},
{
name: '返修换新订单生产',
time: '2023-06-12 13:19:49',
isNow: 0,
type: 1,
desc: '您的服务订单已生成新的订单'
},
{
name: '返修换新完成',
time: '2023-06-13 12:12:49',
isNow: 1,
type: 1,
desc: '您的服务单已完成，如有疑问请反馈，谢谢~，欢迎再次光临'
},
]
HTML code implementation part
<template>
<!-- colors: 设置主题色 stepData:步骤数据 -->
<cc-defineStep :colors="colors" :stepData="stepData"></cc-defineStep>
</template>
<script>
export default {
data() {
return {
colors:"#fa436a",
//模拟后台返回的数据
stepData: [
{
name: '提交申请',
time: '2023-06-09 20:01:49',
isNow: 0,
type: 1,
desc: '不想要了'
},
{
name: '等待审核',
time: '2023-06-09 20:01:49',
isNow: 0,
type: 1,
desc: '您的服务单已申请成功，待售后审核中'
},
{
name: '审核意见',
time: '2023-06-09 20:13:49',
isNow: 0,
type: 1,
desc: '您的售后单已收到，会在24小时与您联系。'
},
{
name: '审核上门取件',
time: '2023-06-09 20:13:49',
isNow: 0,
type: 1,
desc: '您的服务单已预约时间2023-06-10(周日) 15:00-20:00'
},
{
name: '取件成功',
time: '2023-06-10 18:54:55',
isNow: 0,
type: 1,
desc: '您的商品已取件成功'
},
{
name: '商家售后已收到',
time: '2023-06-12 09:01:49',
isNow: 0,
type: 1,
desc: '您的服务单商品已收到'
},
{
name: '返修换新订单生产',
time: '2023-06-12 13:19:49',
isNow: 0,
type: 1,
desc: '您的服务订单已生成新的订单'
},
{
name: '返修换新完成',
time: '2023-06-13 12:12:49',
isNow: 1,
type: 1,
desc: '您的服务单已完成，如有疑问请反馈，谢谢~，欢迎再次光临'
},
]
}
},
onLoad() {
// 步骤数组数据反序
this.stepData.reverse()
}
}
</script>
<style lang="scss" scoped>
</style>