feat(wl): 查看物流页面样式调整

This commit is contained in:
woody 2025-05-29 14:21:56 +08:00
parent 2cb764e18a
commit c3f7b0050f
2 changed files with 242 additions and 120 deletions

View File

@ -102,7 +102,7 @@
@click="openWl(item)" @click="openWl(item)"
shape="circle" shape="circle"
:text="'查看物流'" :text="'查看物流'"
color="#E03030" color="#005BAC"
></u-button> ></u-button>
</view> </view>
</view> </view>

View File

@ -1,35 +1,64 @@
<template> <template>
<view class="content"> <view class="content">
<view v-for="(item, index) in wlData" <!-- 选项卡区域 - 移到外层 -->
:key="index"> <view class="tab-container" v-if="wlData.length > 0">
<view class="tab"> <view
<view @click="isClick = index" v-for="(item, index) in wlData"
class="tab_i"> :key="index"
<view>{{'快递包裹'}}{{index+1 }}</view> @click="isClick = index"
<view :class="[isClick===index?'heng':'heng1']"> class="tab-item"
:class="{ active: isClick === index }"
>
<view class="tab-text">快递包裹{{ index === 0 ? '' : index }}</view>
<view class="tab-underline" :class="{ show: isClick === index }"></view>
</view> </view>
</view> </view>
<!-- 分隔区域 -->
<view class="separator"></view>
<!-- 当前选中的物流信息 -->
<view v-if="wlData.length > 0 && wlData[isClick]">
<!-- 物流信息头部 -->
<view class="logistics-header">
<view class="logistics-info">
<image src="@/static/images/wl.png" class="logistics-icon" />
<view class="logistics-details">
<view class="company-name"
>物流公司{{ wlData[isClick].expressName }}</view
>
<view class="tracking-number"
>物流单号{{ wlData[isClick].expressCode }}</view
>
</view> </view>
<view class="hui"></view>
<view class="head_t">
<view class="disflex">
<img src="@/static/images/wl.png"
alt="">
<view>{{ item.expressName }}{{'快递包裹'}} {{ item.expressCode }}</view>
</view> </view>
<view @click="onCopy(item.expressCode)">{{'复制'}}</view> <view class="copy-btn" @click="onCopy(wlData[isClick].expressCode)"
>复制</view
>
</view> </view>
<view class="wl_tree"
v-for="ctem,cndex in item.detailList" <!-- 物流轨迹时间线 -->
:key="cndex"> <view class="timeline-container">
<view class="zhong"> <view
<view :class="cndex==0?'red1':'qiu'"></view> class="timeline-item"
<view class="gun"></view> v-for="(ctem, cndex) in wlData[isClick].detailList"
:key="cndex"
>
<view class="timeline-left">
<view class="timeline-dot" :class="{ active: cndex === 0 }"></view>
<view
class="timeline-line"
v-if="cndex < wlData[isClick].detailList.length - 1"
></view>
</view>
<view class="timeline-content">
<view class="timeline-time" :class="{ active: cndex === 0 }">{{
ctem.time
}}</view>
<view class="timeline-desc" :class="{ active: cndex === 0 }">{{
ctem.context
}}</view>
</view> </view>
<view class="tree_r">
<view :class="cndex==0?'red2':'tree_t'">{{ ctem.time }}</view>
<view :class="cndex==0?'red3':'tree_t'">{{ ctem.context }}</view>
</view> </view>
</view> </view>
</view> </view>
@ -52,7 +81,7 @@ export default {
onShow() {}, onShow() {},
methods: { methods: {
openWl(id) { openWl(id) {
api.expressList(id).then((res) => { api.expressList(id).then(res => {
if (res.code == 200) { if (res.code == 200) {
this.wlData = res.data this.wlData = res.data
} }
@ -60,7 +89,7 @@ export default {
}, },
onCopy(code) { onCopy(code) {
let text = code + '' let text = code + ''
this.$copyText(text).then((res) => { this.$copyText(text).then(res => {
uni.showToast({ uni.showToast({
title: '复制成功', title: '复制成功',
icon: 'none', icon: 'none',
@ -72,109 +101,202 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tab { .content {
display: flex; background-color: #f5f5f5;
align-items: center; min-height: 100vh;
justify-content: space-between;
padding: 0 24rpx;
margin-top: 20rpx;
margin-bottom: 6rpx;
} }
.tab_i {
// width: 120rpx; /* 选项卡样式 */
.tab-container {
display: flex;
background: #ffffff;
padding: 20rpx 40rpx 0;
}
.tab-item {
flex: 1;
text-align: center; text-align: center;
padding-bottom: 20rpx;
cursor: pointer;
}
.tab-text {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFang SC; color: #999999;
font-weight: 400; font-weight: 400;
margin-bottom: 8rpx;
}
.tab-item.active .tab-text {
color: #333333; color: #333333;
// margin-right: 28rpx; font-weight: 500;
white-space: nowrap;
display: flex;
flex-direction: column;
align-items: center;
} }
.heng {
width: 24px; .tab-underline {
height: 2px; height: 4rpx;
background: #ed1d25; background: transparent;
border-radius: 1px 1px 1px 1px; margin: 0 auto;
margin-top: 4rpx; width: 60rpx;
border-radius: 2rpx;
transition: all 0.3s ease;
} }
.heng1 {
width: 24px; .tab-underline.show {
height: 2px; background: #005bac;
background: #fff;
border-radius: 1px 1px 1px 1px;
margin-top: 4rpx;
} }
.hui {
height: 24rpx; /* 分隔区域 */
background: #eee; .separator {
height: 20rpx;
background: #f5f5f5;
} }
.head_t {
/* 物流信息头部 */
.logistics-header {
background: #ffffff;
padding: 30rpx 40rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 12px; border-bottom: 1rpx solid #eeeeee;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
border-bottom: 1px solid #ccc;
margin: 0 20rpx;
padding: 20rpx;
margin-bottom: 40rpx;
img {
width: 44px;
height: 44px;
margin-right: 10px;
}
} }
.disflex {
.logistics-info {
display: flex; display: flex;
align-items: center; align-items: center;
flex: 1;
} }
.wl_tree {
.logistics-icon {
width: 88rpx;
height: 88rpx;
margin-right: 20rpx;
border-radius: 50%;
}
.logistics-details {
flex: 1;
}
.company-name {
font-size: 28rpx;
color: #333333;
font-weight: 500;
margin-bottom: 8rpx;
}
.tracking-number {
font-size: 24rpx;
color: #666666;
font-weight: 400;
}
.copy-btn {
padding: 12rpx 24rpx;
background: #f8f8f8;
border: 1rpx solid #e6e6e6;
border-radius: 8rpx;
font-size: 24rpx;
color: #666666;
cursor: pointer;
}
.copy-btn:active {
background: #eeeeee;
}
/* 时间线样式 */
.timeline-container {
background: #ffffff;
padding: 0 40rpx 40rpx;
}
.timeline-item {
display: flex; display: flex;
padding-right: 40rpx; position: relative;
.zhong { padding: 30rpx 0;
// flex: 1; }
margin: 0 20px;
.timeline-left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.qiu { margin-right: 30rpx;
width: 10px; position: relative;
height: 10px; }
.timeline-dot {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background: #cccccc; background: #cccccc;
border-radius: 50%; position: relative;
// margin: 10px 0; z-index: 2;
// margin: 3px 0 10px 0; }
}
.gun { .timeline-dot.active {
background: #ccc; background: #ff4757;
width: 1px; width: 24rpx;
min-height: 110px; height: 24rpx;
} }
}
.tree_r { .timeline-line {
// width: 60%; width: 2rpx;
background: #eeeeee;
position: absolute;
top: 24rpx;
bottom: -30rpx;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.timeline-content {
flex: 1;
padding-top: 2rpx;
}
.timeline-time {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #999999;
.tree_t { margin-bottom: 8rpx;
color: #999; font-weight: 400;
}
}
} }
.red1 {
width: 10px; .timeline-time.active {
height: 10px; color: #ff4757;
background: #005BAC; font-weight: 500;
border-radius: 50%;
} }
.red2 {
color: #005BAC; .timeline-desc {
font-size: 28rpx;
color: #666666;
line-height: 1.5;
font-weight: 400;
} }
.timeline-desc.active {
color: #333333;
font-weight: 500;
}
/* 移除旧样式 */
.tab,
.tab_i,
.heng,
.heng1,
.hui,
.head_t,
.disflex,
.wl_tree,
.zhong,
.qiu,
.gun,
.tree_r,
.tree_t,
.red1,
.red2,
.red3 { .red3 {
color: #333; display: none;
} }
</style> </style>