d157f16dfb
【原 因】： 【过 程】： 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
138 lines
3.8 KiB
Vue
138 lines
3.8 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 时间线 -->
|
|
<view class="processBox">
|
|
<!-- 背景 线 -->
|
|
<view class="flex mac processRc h0" :style="{ width: `calc(100% - ${100 / processList.length}%)` }">
|
|
<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 class="flex m-t-12">
|
|
<template v-if='processType ==="申请中" || 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">{{ processList[1]?'卖家已同意':'等待卖家处理' }}</view>
|
|
<view class="fz20">{{ processList[1]?formatTime(processList[1]) : ' ' }}
|
|
</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>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
parseTime,
|
|
formatPrice
|
|
} from '@/utils/index.js'
|
|
export default {
|
|
name: "process",
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
created() {},
|
|
props: {
|
|
processList: {
|
|
type: Array,
|
|
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>
|
|
|
|
<style lang="scss" scoped>
|
|
.processBox {
|
|
height: 60rpx;
|
|
}
|
|
|
|
.processLine {
|
|
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> |