Commit bceaeaab authored by chuan.liu's avatar chuan.liu

新增物流查询页面

parent 66bc15fa
......@@ -526,6 +526,21 @@
}
}
}
},
{
"path": "pages/my-order/my-order",
"style": {
"app-plus": {
"titleNView": {
"titleAlign": "left",
"titleColor": "#333",
"titleSize": "17px",
"backgroundColor": "#fff",
"titleText": "我的订单",
"autoBackButton": true
}
}
}
}
],
"globalStyle": {
......
......@@ -2,46 +2,49 @@
<view class="apply-history view" :style="winHeight">
<view class="status_bar" :style="navHeight"></view>
<view class="apply-history-wrapper view">
<view class="middle view">
<view class="middle view">
<view class="title">发运单号:FH200333222</view>
<view class="steps">
<view class="steps__row-container">
<view class="steps__row-line-item">
<!-- <view class="steps__row-line steps__row-line--before steps__row-line--hide"></view> -->
<view class="steps__row-check">
<i class="icon-dot icon-dot-active"></i>
</view>
<view class="steps__row-line steps__row-line--after steps__row-line--active"></view>
</view>
<view class="steps__row-line-item">
<view class="steps__row-line steps__row-line--before" :class="{'steps__row-line--active':deliveryListBeforeLineShow}"></view>
<view class="steps__row-check steps__row-circle">
<i class="icon-dot" :class="{'icon-dot-active':deliveryListBeforeLineShow}"></i>
</view>
<view class="steps__row-line steps__row-line--after" :class="{'steps__row-line--active':deliveryListAfterLineShow}"></view>
</view>
<view class="steps__row-line-item">
<view class="steps__row-line steps__row-line--before" :class="{'steps__row-line--active':deliveryCheckLineShow}"></view>
<view class="steps__row-check steps__row-circle">
<i class="icon-dot " :class="{'icon-dot-active':deliveryCheckLineShow}"></i>
</view>
<view class="steps__row-line steps__row-line--after steps__row-line--hide"></view>
</view>
</view>
<view class="steps__row-text-container">
<view class="steps__row-text">
<text class="steps__row-title">装车</text>
<text class="steps__row-desc">2021.7.21 9:00</text>
</view>
<view class="steps__row-text">
<text class="steps__row-title">起运</text>
<text class="steps__row-desc">预计 2021.7.21 9:00</text>
</view>
<view class="steps__row-text">
<text class="steps__row-title">到达宣化中转仓</text>
<text class="steps__row-desc">预计 2021.7.21 9:00</text>
</view>
</view>
<view class="steps">
<view class="steps__row-container">
<view class="steps__row-line-item">
<!-- <view class="steps__row-line steps__row-line--before steps__row-line--hide"></view> -->
<view class="steps__row-check">
<i class="icon-dot icon-dot-active"></i>
</view>
<view class="steps__row-line steps__row-line--after steps__row-line--active"></view>
</view>
<view class="steps__row-line-item">
<view class="steps__row-line steps__row-line--before"
:class="{'steps__row-line--active':deliveryListBeforeLineShow}"></view>
<view class="steps__row-check steps__row-circle">
<i class="icon-dot" :class="{'icon-dot-active':deliveryListBeforeLineShow}"></i>
</view>
<view class="steps__row-line steps__row-line--after"
:class="{'steps__row-line--active':deliveryListBeforeLineShow}"></view>
</view>
<view class="steps__row-line-item">
<view class="steps__row-line steps__row-line--before"
:class="{'steps__row-line--active':deliveryCheckLineShow}"></view>
<view class="steps__row-check steps__row-circle">
<i class="icon-dot " :class="{'icon-dot-active':deliveryCheckLineShow}"></i>
</view>
<view class="steps__row-line steps__row-line--after steps__row-line--hide"></view>
</view>
</view>
<view class="steps__row-text-container">
<view class="steps__row-text">
<text class="steps__row-title steps__row-title--active">装车</text>
<text class="steps__row-desc">2021.7.21 9:00</text>
</view>
<view class="steps__row-text">
<text class="steps__row-title" :class="{'steps__row-title--active':deliveryListAfterLineShow}">起运</text>
<text class="steps__row-desc">预计 2021.7.21 9:00</text>
</view>
<view class="steps__row-text">
<text class="steps__row-title" :class="{'steps__row-title--active':deliveryCheckLineShow}">到达宣化中转仓</text>
<text class="steps__row-desc">预计 2021.7.21 9:00</text>
</view>
</view>
</view>
</view>
</view>
......@@ -53,9 +56,20 @@
} from 'vuex'
export default {
data() {
return {}
return {
deliveryStatus: 'doing'
}
},
computed: {
deliveryListBeforeLineShow() {
return this.deliveryStatus === 'doing'
},
deliveryListAfterLineShow() {
return this.deliveryStatus === 'doing'
},
deliveryCheckLineShow() {
return this.deliveryStatus === 'end'
},
...mapState(['sysinfo'])
},
onLoad() {
......@@ -80,7 +94,7 @@
padding: 0 16rpx;
}
.apply-history-wrapper {
.apply-history-wrapper {
flex: 1;
background-color: #fff;
margin-top: 18rpx;
......@@ -88,104 +102,93 @@
box-shadow: 0px 2px 4px 0px #dbe4ee;
}
.middle {
.middle {
flex: 1;
padding: 26rpx 32rpx;
}
.title{
font-size: 32rpx;
color: $text-base-color;
font-weight: 500;
margin-bottom: 64rpx;
}
.steps {
flex: 1;
margin: 28rpx 0 32rpx;
}
.steps__row-text-container {
flex-direction: column;
align-items: flex-start;
margin-left: 20rpx;
}
.steps__row-text {
height: 200rpx;
flex-direction: column;
align-items: flex-start;
}
.steps__row-title {
font-size: 34rpx;
line-height: 16px;
text-align: center;
color: $text-base-color;
margin-bottom: 4rpx;
}
.steps__row-title--active{
color: #F62C29;
}
.steps__row-desc{
font-size: 30rpx;
color: #999;
}
.steps__row-container {
width: 80rpx;
flex-direction: column;
}
.steps__row-line-item {
align-items: center;
justify-content: center;
flex-direction: column;
}
.steps__row-line--before {
transform: translateX(-1px);
}
.steps__row-line {
height: 80rpx;
background-color: #999;
}
.icon-dot {
width: 40rpx;
height: 40rpx;
background: #E5E5E5;
border-radius: 50%;
}
.icon-dot-active {
background: #ff1d32;
}
.steps__row-line--after {
transform: translateX(1px);
}
.steps__row-line {
width: 1px;
height: 80rpx;
background-color: #e5e5e5;
}
.steps__row-line--active {
background: #ff3e61;
border-radius: 1px;
}
.steps__row-circle {
background: #E5E5E5;
}
.steps__row-line--hide {
background-color: transparent;
}
.title {
font-size: 32rpx;
color: $text-base-color;
font-weight: 500;
margin-bottom: 64rpx;
}
.steps {
flex: 1;
margin: 28rpx 0 32rpx;
}
.steps__row-text-container {
flex-direction: column;
align-items: flex-start;
margin-left: 20rpx;
}
.steps__row-text {
height: 200rpx;
flex-direction: column;
align-items: flex-start;
}
.steps__row-title {
font-size: 34rpx;
line-height: 16px;
text-align: center;
color: $text-base-color;
margin-bottom: 6rpx;
}
.steps__row-title--active {
color: #F62C29;
}
.steps__row-desc {
font-size: 30rpx;
color: #999;
}
.steps__row-container {
width: 80rpx;
flex-direction: column;
}
.steps__row-line-item {
align-items: center;
justify-content: center;
flex-direction: column;
}
.steps__row-line {
height: 80rpx;
background-color: #999;
}
.icon-dot {
width: 16rpx;
height: 16rpx;
background: #E5E5E5;
border-radius: 50%;
}
.icon-dot-active {
width: 40rpx;
height: 40rpx;
background: #ff1d32;
}
.steps__row-line {
width: 1px;
height: 80rpx;
background-color: #e5e5e5;
}
.steps__row-line--active {
background: #ff3e61;
border-radius: 1px;
}
.steps__row-line--hide {
background-color: transparent;
}
</style>
......@@ -58,7 +58,7 @@
<text class="entry-bill-text">我的要货</text>
</view>
<view class="entry-block">
<view class="entry-block" @click="goPage('my-order')">
<view class="entry-bill">
<image class="entry-bill-icon" src="@/static/image/uc_company@3x.png" mode=""></image>
</view>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment