【类 型】：feat
【原 因】：订单状态时间轴组件 实现 【过 程】：订单的时间列表 和 订单类型判断 实现时间轴 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
This commit is contained in:
air
parent
f1406d6c42
commit
e203cd679d
@ -1,28 +1,69 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="processBox">
|
<view>
|
||||||
<!-- 背景 线 -->
|
<!-- 时间线 -->
|
||||||
<view class="flex mac"
|
<view class="processBox">
|
||||||
style="height:0rpx; position: relative;top:50%;left:50%;transform: translate(-50%, -50%);width:66%">
|
<!-- 背景 线 -->
|
||||||
<view class="bg-m flex1 processLine"></view>
|
<view class="flex mac processRc h0" :style="{ width: `calc(100% - ${100 / processList.length}%)` }">
|
||||||
<view class="bg-mg flex1 processLine"></view>
|
<view v-for='index in processList.length-1' :key="index" class="flex1 processLine"
|
||||||
|
:class="processList[index+1] ? 'bg-m' : 'bg-mb'"></view>
|
||||||
|
</view>
|
||||||
|
<!-- 背景 点 -->
|
||||||
|
<view class="flex mac msb processRc h36" :style="{ width: `calc(100% - ${100 / processList.length}%)` }">
|
||||||
|
<view v-for="(item, index) in processList" :key="index" class="rad-c"
|
||||||
|
:class="[processList[index] ? 'bg-m' : 'bg-mb', index === lastNonEmptyIndex ? 'wh40' : 'wh20']">
|
||||||
|
<u-icon name="checkbox-mark" size="40rpx" color="#fff" v-if="lastNonEmptyIndex ===index"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 背景 点 -->
|
<!-- 时间线描述 -->
|
||||||
<view class="flex mac"
|
<view class="flex m-t-12">
|
||||||
style="height:36rpx; position: relative;top:50%;left:50%;transform: translate(-50%, -50%);width:66%">
|
<template v-if='processType ==="申请中" || processType ==="已同意"'>
|
||||||
<view class="flex1">
|
<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===0?'':'fcb'">
|
||||||
<view class="bg-m rad-c" style="width:18rpx;height:18rpx;"></view>
|
<view class="fz28">申请退款</view>
|
||||||
</view>
|
<view class="fz20">{{ formatTime(processList[0]) }}</view>
|
||||||
<view class="flex1 flex mse">
|
</view>
|
||||||
<view class="bg-m rad-c" style="width:18rpx;height:18rpx;"></view>
|
<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===1?'':'fcb'">
|
||||||
</view>
|
<view class="fz28">{{ processList[1]?'卖家已同意':'等待卖家处理' }}</view>
|
||||||
<view class="flex1 flex mr">
|
<view class="fz20">{{ processList[1]?formatTime(processList[1]) : ' ' }}
|
||||||
<view class="bg-m rad-c" style="width:38rpx;height:38rpx;"></view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===2?'':'fcb'">
|
||||||
|
<view class="fz28">退款成功</view>
|
||||||
|
<view class="fz20">{{ processList[2]?formatTime(processList[2]) : ' ' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<template v-if='processType ==="主动退"'>
|
||||||
|
<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===0?'':'fcb'">
|
||||||
|
<view class="fz28">卖家取消订单</view>
|
||||||
|
<view class="fz20">{{ formatTime(processList[0]) }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===1?'':'fcb'">
|
||||||
|
<view class="fz28">已退款</view>
|
||||||
|
<view class="fz20">{{ processList[1]?formatTime(processList[1]) : ' ' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<template v-if='processType ==="拒绝退"'>
|
||||||
|
<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===0?'':'fcb'">
|
||||||
|
<view class="fz28">申请退款</view>
|
||||||
|
<view class="fz20">{{ formatTime(processList[0]) }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===1?'':'fcb'">
|
||||||
|
<view class="fz28">卖家拒绝退款</view>
|
||||||
|
<view class="fz20">{{ processList[1]?formatTime(processList[1]) : ' ' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import {
|
||||||
|
parseTime,
|
||||||
|
formatPrice
|
||||||
|
} from '@/utils/index.js'
|
||||||
export default {
|
export default {
|
||||||
name: "process",
|
name: "process",
|
||||||
data() {
|
data() {
|
||||||
@ -30,12 +71,36 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
console.error(this.processList)
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
processList: {
|
processList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
deep: true
|
deep: true
|
||||||
|
},
|
||||||
|
processType: {
|
||||||
|
type: String
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
// 计算属性：查找最后一个非空值的下标
|
||||||
|
lastNonEmptyIndex() {
|
||||||
|
// 从数组末尾开始遍历
|
||||||
|
for (let i = this.processList.length - 1; i >= 0; i--) {
|
||||||
|
// 如果当前值不是空的，则返回其下标
|
||||||
|
if (this.processList[i] !== '' && this.processList[i] !== null) {
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return -1; // 如果没有找到非空值，返回-1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatTime(time) {
|
||||||
|
return parseTime(time, '{m}-{d} {h}:{i}')
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -47,4 +112,29 @@
|
|||||||
.processLine {
|
.processLine {
|
||||||
height: 2rpx;
|
height: 2rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.processRc {
|
||||||
|
position: relative;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.h0 {
|
||||||
|
height: 0rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h30 {
|
||||||
|
height: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wh20 {
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wh40 {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user