Food/food_wechat
3
0
Fork 0
Code Issues 18 Pull Requests Actions Packages Projects Releases Wiki Activity

【类 型】：feat

Browse Source 
【原  因】：订单状态时间轴组件 实现
【过  程】：订单的时间列表 和 订单类型判断 实现时间轴
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动
This commit is contained in:
air 2025-01-20 21:41:27 +08:00
parent f1406d6c42
commit e203cd679d
1 changed files with 108 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
components/process/process.vue
View File

@ -1,28 +1,69 @@
<template>
<view>
<!-- 时间线 -->
<view class="processBox">
<!-- 背景 线 -->
<view class="flex mac"
style="height:0rpx; position: relative;top:50%;left:50%;transform: translate(-50%, -50%);width:66%">
<view class="bg-m flex1 processLine"></view>
<view class="bg-mg flex1 processLine"></view>
<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"
style="height:36rpx; position: relative;top:50%;left:50%;transform: translate(-50%, -50%);width:66%">
<view class="flex1">
<view class="bg-m rad-c" style="width:18rpx;height:18rpx;"></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 class="flex1 flex mse">
<view class="bg-m rad-c" style="width:18rpx;height:18rpx;"></view>
</view>
<view class="flex1 flex mr">
<view class="bg-m rad-c" style="width:38rpx;height:38rpx;"></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]) : '&nbsp;' }}
</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]) : '&nbsp;' }}
</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]) : '&nbsp;' }}
</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]) : '&nbsp;' }}
</view>
</view>
</template>
</view>
</view>
</template>
<script>
import {
parseTime,
formatPrice
} from '@/utils/index.js'
export default {
name: "process",
data() {
@ -30,12 +71,36 @@
}
},
created() {
console.error(this.processList)
},
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>
@ -47,4 +112,29 @@
.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>