修改物流页面样式,添加自定义表单传参

main
jinna 2 years ago
parent 4d3be3c090
commit 0a23674517
  1. 3
      pages/pages_zhentou/form/form.vue
  2. 228
      pages/pages_zhentou/order/express.vue

@ -815,7 +815,8 @@
cervicalVertebra: this.valiFormData.cervicalVertebra, cervicalVertebra: this.valiFormData.cervicalVertebra,
otherNeed: this.valiFormData.otherNeed, otherNeed: this.valiFormData.otherNeed,
orderNo: this.orderNo, orderNo: this.orderNo,
id: this.valiFormData.id ? this.valiFormData.id : '' id: this.valiFormData.id ? this.valiFormData.id : '',
purchaseChannel:4
} }
// console.log(getApp().globalData.baseUrl) // console.log(getApp().globalData.baseUrl)

@ -11,16 +11,46 @@
<!-- 步骤条 --> <!-- 步骤条 -->
<view class="pro_box"> <view class="pro_box">
<view class="set-2" :key="index" v-for="(item,index) in options"> <view class="set-2" :key="index" v-for="(item,index) in options">
<view class="img-border"> <view class="wuliu_box">
<view class="left_img"></view> <view class="left_box">
</view> <!-- <image v-if="item.statusCode == '投柜或驿站'" src="../../../static/image/over.png" mode=""></image> -->
<view v-if='index!=0' class="left_line_up"></view> <image v-if="(item.statusCode == '1' || item.statusCode == '101' || item.statusCode == '102' || item.statusCode == '103') && index !== 0" src="../../../static/image/lanshou.png" mode=""></image>
<view v-if='index!=options.length-1' class="left_line_down"></view> <image v-if="(item.statusCode == '1' || item.statusCode == '101' || item.statusCode == '102' || item.statusCode == '103') && index == 0" src="../../../static/image/lanshou_act.png" mode=""></image>
<view class="set-view"> <image v-if="(item.statusCode == '0' || item.statusCode == '1001' || item.statusCode == '1002' || item.statusCode == '1003') && index !== 0" src="../../../static/image/zaitu.png"></image>
<view :class="index == 0 ? 'active' : ''" class="set-view-test3">{{item.status}}</view> <image v-if="(item.statusCode == '0' || item.statusCode == '1001' || item.statusCode == '1002' || item.statusCode == '1003') && index == 0" src="../../../static/image/zaitu_act.png" mode=""></image>
<view :class="index == 0 ? 'active' : ''" class="set-view-test4">{{item.context}}</view> <image v-if="(item.statusCode == '5' || item.statusCode == '501') && index !== 0" src="../../../static/image/paijian.png"></image>
<view class="set-view-test"> <image v-if="(item.statusCode == '5' || item.statusCode == '501') && index == 0" src="../../../static/image/paijian_act.png" mode=""></image>
<view class="set-view-test2">{{item.time}}</view> <image v-if="(item.statusCode == '3' || item.statusCode == '301' || item.statusCode == '302' || item.statusCode == '303' || item.statusCode == '304') && index !== 0" src="../../../static/image/over.png"></image>
<image v-if="(item.statusCode == '3' || item.statusCode == '301' || item.statusCode == '302' || item.statusCode == '303' || item.statusCode == '304') && index == 0" src="../../../static/image/over_act.png" mode=""></image>
</view>
<view class="right_box">
<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '1' || item.status == '103'">
已揽收
</view>
<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '101'">
已下单
</view>
<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '102'">
待揽收
</view>
<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '0' || item.statusCode == '1001' || item.statusCode == '1002' || item.statusCode == '1003'">
运输中
</view>
<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '5'">
派件中
</view>
<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '501'">
已投递菜鸟驿站/快递柜
</view>
<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '3' || item.statusCode == '301' || item.statusCode == '302' || item.statusCode == '303' || item.statusCode == '304'">
已签收
</view>
<view class="cen_title" :class="index == 0 ? 'active_cen' : ''">
{{item.context}}
</view>
<view class="bot_title">
{{item.time}}
</view>
</view> </view>
</view> </view>
</view> </view>
@ -154,7 +184,7 @@
} }
} }
.pro_box { .pro_box{
width: 690rpx; width: 690rpx;
height: 75%; height: 75%;
overflow-y: auto; overflow-y: auto;
@ -165,138 +195,84 @@
margin-top: 30rpx; margin-top: 30rpx;
padding: 30rpx 0; padding: 30rpx 0;
.process_text { .set-2{
position: relative; width: 100%;
.process_left { &:last-child{
position: absolute; .wuliu_box{
top: 200rpx; .right_box{
left: 40rpx; border-left: none;
}
image {
width: 44rpx;
height: 44rpx;
} }
} }
}
.set-2:last-child::after {
display: none;
}
.set-2 { .wuliu_box{
border-radius: 10rpx; width: 100%;
width: 600rpx; // position: relative;
margin-left: 100rpx; // height: 200rpx;
margin-top: 60rpx; // background: red;
position: relative; margin: 0 auto;
display: flex;
// border-left: 2rpx solid #E8E8E8;
.set-view { .left_box{
width: 493rpx; width: 60rpx;
height: 100%;
display: flex;
flex-direction: column;
padding-left: 20rpx;
justify-content: center;
align-items: center;
.set-view-test { .line_box{
margin: 0 auto; width: 2rpx;
// padding-top: 20rpx; height: 100%;
padding-bottom: 20rpx; background: #E8E8E8;
// position: relative;
}
.set-view-test2 { image{
width: 100%; width: 56rpx;
height: 26rpx; height: 56rpx;
font-family: Gibson; margin-left: 40rpx;
font-size: 20rpx; position: relative;
color: #999; z-index: 100;
// position: absolute;
// left: 20rpx;
} }
} }
.right_box{
width: 100%;
padding-left: 60rpx;
padding-bottom: 60rpx;
padding-right: 80rpx;
margin-left: -10rpx;
border-left: 2rpx solid #E8E8E8;
.set-view-test3 { .top_title{
margin: 0 auto; font-size: 26rpx;
font-size: 26rpx; color: #666;
color: #666;
&.active { &.active_top{
color: #333; color: #333;
}
} }
} .cen_title{
font-size: 22rpx;
.set-view-test4 { color: #999;
margin: 20rpx auto; margin: 20rpx 0;
font-size: 22rpx;
color: #999;
&.active { &.active_cen{
color: #333; color: #333;
}
}
.bot_title{
font-size: 20rpx;
color: #999;
} }
} }
} }
} }
/* 普通 */
.set-2 .img-border {
width: 18rpx;
height: 17rpx;
background: gray;
border-radius: 50%;
position: absolute;
top: 6%;
margin-top: -1rpx;
left: -58rpx;
z-index: 100;
}
/* 特殊 */
.set-2:nth-of-type(1)>.img-border {
width: 38rpx;
height: 38rpx;
background: transparent;
border-radius: 50%;
position: absolute;
top: 0%;
margin-top: -3rpx;
left: -11%;
z-index: 100;
}
.set-2:nth-of-type(1) .left_img {
border-radius: 50%;
width: 16rpx;
height: 16rpx;
background: #FE3666;
top: 50%;
margin-top: 13rpx;
margin-left: 10rpx;
}
.left_line_up {
position: absolute;
top: 0;
left: -52upx;
height: 80%;
margin-top: -22rpx;
border-style: solid;
border-left: 1rpx;
border-color: #ccc;
}
.left_line_down {
position: absolute;
top: 50%;
left: -52upx;
height: 70%;
margin-top: 22rpx;
border-style: solid;
border-left: 1rpx;
border-color: #ccc;
}
.set-2:nth-of-type(1) .left_line_down {
top: 0;
height: 120%;
}
.set-2:last-of-type .left_line_up {
height: 20%;
}
} }
} }
</style> </style>
Loading…
Cancel
Save