1
This commit is contained in:
261
src/pages/client/order/components/SliverInfo.vue
Normal file
261
src/pages/client/order/components/SliverInfo.vue
Normal file
@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<select-modal title="物流信息" @close="$emit('close')">
|
||||
<view class="sliver-info-container">
|
||||
<view class="sliver-info-content">
|
||||
<view v-if="isLoading" class="flex-center">
|
||||
<uni-load-more status="loading" />
|
||||
</view>
|
||||
<template v-else>
|
||||
<view class="flex-row-start sliver-info-title">
|
||||
<!-- <image class="sliver-icon" :src="sliverInfo.logo" /> -->
|
||||
<text class="fs-24 app-fc-main sliver-text">
|
||||
{{ sliverInfo.name }} {{ orderData.kuaidi_no }}
|
||||
</text>
|
||||
<text class="fs-24 app-fc-main" @click="copySliverId">复制</text>
|
||||
</view>
|
||||
<view
|
||||
class="flex-row-start sliver-item"
|
||||
:class="{
|
||||
first: index === sliverList.length - 1,
|
||||
last: index === 0,
|
||||
}"
|
||||
v-for="(item, index) in sliverList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="flex-center icon-wrapper">
|
||||
<view class="icon-circle"></view>
|
||||
<view v-if="index === 0" class="icon-circle-bg"></view>
|
||||
<view
|
||||
v-if="index < sliverList.length - 1"
|
||||
class="flex-1 icon-line"
|
||||
></view>
|
||||
</view>
|
||||
<view class="flex-1 flex-column-start item-info">
|
||||
<text>
|
||||
<!-- index === 0 || index > 0 && item.status !== sliverList[index - 1].status -->
|
||||
<text class="fs-32 app-fc-main app-font-bold info-status">
|
||||
{{ item.status }}
|
||||
</text>
|
||||
<text class="fs-24 info-time ali-puhui-regular">{{ item.time }}</text>
|
||||
</text>
|
||||
<text class="fs-24 app-fc-main info-desc">{{
|
||||
item.context
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view
|
||||
class="flex-center app-fc-white fs-30 confirm-btn"
|
||||
@click.stop="$emit('close')"
|
||||
>
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</select-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import selectModal from "@/components/select-modal.vue";
|
||||
import { getSliverInfo } from "@/api/shop";
|
||||
import moment from "moment";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
orderId: {
|
||||
type: String | Number,
|
||||
default: "",
|
||||
},
|
||||
orderInfo: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
components: { selectModal },
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
sliverList: [],
|
||||
sliverInfo: {},
|
||||
orderData: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
defaultSliver() {
|
||||
return [
|
||||
{
|
||||
status: "已发货",
|
||||
time: moment(this.orderInfo.fahuo_time * 1000).format(
|
||||
"YYYY-MM-DD HH:mm:ss"
|
||||
),
|
||||
context: "包裹正在等待揽收",
|
||||
},
|
||||
{
|
||||
status: "已下单",
|
||||
time: moment(this.orderInfo.add_time * 1000).format(
|
||||
"YYYY-MM-DD HH:mm:ss"
|
||||
),
|
||||
context: "商品已经下单",
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getSliverInfo();
|
||||
},
|
||||
methods: {
|
||||
formatStatus(status) {
|
||||
switch (status) {
|
||||
case "揽收":
|
||||
return "已揽件";
|
||||
case "在途":
|
||||
return "运输中";
|
||||
case "派件":
|
||||
return "派送中";
|
||||
case "签收":
|
||||
return "已签收";
|
||||
case "已发货":
|
||||
return "已发货";
|
||||
case "已下单":
|
||||
return "已下单";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
},
|
||||
getSliverInfo() {
|
||||
getSliverInfo(this.orderId)
|
||||
.then((res) => {
|
||||
this.sliverList = [
|
||||
...(res?.info?.wuliu_list || []),
|
||||
...this.defaultSliver,
|
||||
].map((v) => ({
|
||||
...v,
|
||||
status: this.formatStatus(v.status),
|
||||
}));
|
||||
this.orderData = res?.info?.order_info || {};
|
||||
this.sliverInfo = res?.info?.express_info || {};
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
});
|
||||
},
|
||||
copySliverId() {
|
||||
uni.setClipboardData({
|
||||
data: this.orderData.kuaidi_no,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: "复制成功",
|
||||
icon: "success",
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sliver-info-container {
|
||||
padding: 30rpx 56rpx 0 48rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.sliver-info-content {
|
||||
height: 55vh;
|
||||
overflow-y: auto;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
.sliver-info-title {
|
||||
margin-bottom: 50rpx;
|
||||
|
||||
.sliver-icon {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 56rpx;
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.sliver-text {
|
||||
margin-right: 14rpx;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.sliver-item {
|
||||
align-items: stretch;
|
||||
padding-left: 8rpx;
|
||||
|
||||
&.last {
|
||||
.icon-wrapper .icon-circle {
|
||||
background: $app_color_main;
|
||||
}
|
||||
}
|
||||
|
||||
&.first {
|
||||
.item-info {
|
||||
min-height: unset;
|
||||
}
|
||||
.icon-wrapper {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
position: relative;
|
||||
|
||||
.icon-circle {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background: #d4ced1;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.icon-line {
|
||||
width: 2rpx;
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
.icon-circle-bg {
|
||||
position: absolute;
|
||||
top: -8rpx;
|
||||
left: -8rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 40rpx;
|
||||
background: rgba(254, 1, 155, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.item-info {
|
||||
min-height: 190rpx;
|
||||
padding: 0rpx 0 30rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
justify-content: flex-start;
|
||||
margin-top: -10rpx;
|
||||
|
||||
.info-time {
|
||||
color: #afa5ae;
|
||||
// font-weight: 400;
|
||||
}
|
||||
|
||||
.info-status {
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.info-desc {
|
||||
margin-top: 12rpx;
|
||||
line-height: 1.6;
|
||||
margin-left: -4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 630rpx;
|
||||
height: 92rpx;
|
||||
background: #fe019b;
|
||||
border-radius: 92rpx;
|
||||
margin: 20rpx auto 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user