d第一次提交
This commit is contained in:
dt_2916866708
63
components/orderItem/index.scss
Normal file
63
components/orderItem/index.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
.orderItem {
|
||||
width: 690rpx;
|
||||
// height: 502rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(132, 132, 132, 0.05);
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 27rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
.orderItem-footer {
|
||||
color: #007dff;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx 0 0 0;
|
||||
text {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
.orderItem-center {
|
||||
padding-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
.orderItem-line {
|
||||
overflow: hidden;
|
||||
margin-top: 20rpx;
|
||||
.orderItem-line-value {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
text {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.orderItem-line-label {
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.orderItem-header {
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: solid 1rpx #f3f5f7;
|
||||
.orderItem-header-type {
|
||||
font-size: 36rpx;
|
||||
color: #f98b13;
|
||||
}
|
||||
.orderItem-header-number {
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-broder {
|
||||
border-bottom: solid 1rpx #f3f5f7;
|
||||
}
|
||||
128
components/orderItem/orderItem.vue
Normal file
128
components/orderItem/orderItem.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<view class="orderItem">
|
||||
<!-- 顶部 -->
|
||||
<view class="orderItem-header flex jw bottom-broder">
|
||||
<view class="orderItem-header-number">
|
||||
<view> {{orderData.orderNumber}}</view>
|
||||
<view> {{orderData.createTime}}</view>
|
||||
</view>
|
||||
<view :style="{color:tool.orderStatus(orderData.status).color}" class="orderItem-header-type">{{tool.orderStatus(orderData.status).label}}</view>
|
||||
</view>
|
||||
<!-- 中间 -->
|
||||
<view @click="centerClick" :class="type=='item'?'bottom-broder': ''" class="orderItem-center ">
|
||||
<view class="orderItem-line flex jw">
|
||||
<view class="orderItem-line-label">车辆信息：</view>
|
||||
<view class="orderItem-line-value oneflex flex flex-end ">
|
||||
<text class="textov">
|
||||
{{orderData.plateNumber}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="orderItem-line flex jw">
|
||||
<view class="orderItem-line-label">预计发货时间：</view>
|
||||
<view class="orderItem-line-value oneflex flex flex-end ">
|
||||
<text class="textov">
|
||||
{{orderData.departureDate}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="orderData.unloadingDate" class="orderItem-line flex jw">
|
||||
<view class="orderItem-line-label">卸货时间：</view>
|
||||
<view class="orderItem-line-value oneflex flex flex-end ">
|
||||
<text class="textov">
|
||||
{{orderData.unloadingDate}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="orderItem-line flex jw">
|
||||
<view class="orderItem-line-label">货物信息：</view>
|
||||
<view class="orderItem-line-value oneflex flex flex-end ">
|
||||
<text class="textov">
|
||||
{{dataMark['CARGO_TYPE'][orderData.cargoType ]||'暂无'}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="orderData.weight" class="orderItem-line flex jw">
|
||||
<view class="orderItem-line-label">货物重量：</view>
|
||||
<view class="orderItem-line-value oneflex flex flex-end ">
|
||||
<text class="textov">
|
||||
{{orderData.weight}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="type=='item'" class="orderItem-line flex jw textov">
|
||||
<view class="orderItem-line-label">备注信息：</view>
|
||||
<view class="orderItem-line-value oneflex flex flex-end ">
|
||||
<text class="textov">{{orderData.remark||"暂无"}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="word-break: break-all;" v-else class="orderItem-line ">
|
||||
<view class="orderItem-line-label">备注信息：</view>
|
||||
<view style="margin-top: 10rpx;word-break：break-all;" class="orderItem-line-value">
|
||||
{{orderData.remark||"暂无"}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部 -->
|
||||
<view @click="orderItemFooterClick" v-if="type=='item'&orderData.status!=='4'&orderData.uploadFlag=='1' " class="orderItem-footer flex jc ac">
|
||||
<uni-icons type="compose" size="20" color="#007DFF"></uni-icons>
|
||||
<text>{{orderData.status | status}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "orderItem",
|
||||
props: {
|
||||
orderData: {
|
||||
type: Object,
|
||||
default: () => null
|
||||
},
|
||||
listIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
type:{
|
||||
type:String,
|
||||
default:"item"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataMark: uni.getStorageSync('dataMark') || null,
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
status(e) {
|
||||
switch (e) {
|
||||
case '1':
|
||||
return '录入发货信息'
|
||||
case '2':
|
||||
return '录入卸货信息'
|
||||
case '3':
|
||||
return '上传费用'
|
||||
case '4':
|
||||
return '已取消'
|
||||
default :
|
||||
return '暂无'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
centerClick(){
|
||||
this.$emit('orderItemCenterClick',this.orderData)
|
||||
},
|
||||
orderItemFooterClick() {
|
||||
this.$emit('orderItemFooterClick',this.orderData)
|
||||
// uni.navigateTo({
|
||||
// url:"/Enter/pages/send/index"
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user