d第一次提交
This commit is contained in:
dt_2916866708
77
Order/pages/details/index.scss
Normal file
77
Order/pages/details/index.scss
Normal file
@@ -0,0 +1,77 @@
|
||||
.details-body{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #F1F2F7;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
.details-top{
|
||||
margin-top: 35rpx;
|
||||
}
|
||||
.details-goods-information{
|
||||
position: relative;
|
||||
}
|
||||
.details-form {
|
||||
position: relative;
|
||||
width: 690rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(132, 132, 132, 0.05);
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
opacity: 1;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 27rpx;
|
||||
.details-form-item {
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: solid 1rpx #f3f5f7;
|
||||
margin-top: 40rpx;
|
||||
.details-form-item-value {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.details-form-item-label {
|
||||
width: 249rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.details-form-title {
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.upload-container {
|
||||
.upload-tip {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 5rpx 5rpx 5rpx 5rpx;
|
||||
opacity: 1;
|
||||
border: 1rpx solid #999999;
|
||||
text {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
.upload-item {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-right: 20rpx;
|
||||
position: relative;
|
||||
.colse {
|
||||
position: absolute;
|
||||
background-color: #e0e0e0;
|
||||
top: -15rpx;
|
||||
right: -15rpx;
|
||||
height: 35rpx;
|
||||
width: 35rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.noFormBorder{
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
155
Order/pages/details/index.vue
Normal file
155
Order/pages/details/index.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<view v-if="isLoad" class="details-body flex column">
|
||||
<!-- 第一个卡片 -->
|
||||
<view class="details-top">
|
||||
<order-item :order-data='orderData' type="card"></order-item>
|
||||
</view>
|
||||
<view class="details-form">
|
||||
<view class="details-form-title">货物信息：</view>
|
||||
<view class="details-form-item flex ac noFormBorder">
|
||||
<view class="details-form-item-label"> 货物信息：</view>
|
||||
<view class="details-form-item-value oneflex">
|
||||
{{ dataMark.CARGO_TYPE[orderData.cargoType] }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="details-form-item flex ac noFormBorder">
|
||||
<view class="details-form-item-label"> 货物重量：</view>
|
||||
<view class="details-form-item-value oneflex">
|
||||
{{Number(orderData.weight||0).toFixed(2)}}吨
|
||||
</view>
|
||||
</view>
|
||||
<view class="details-form-item flex ac noFormBorder">
|
||||
<view class="details-form-item-label">
|
||||
发货单：
|
||||
</view>
|
||||
<view class="details-form-item-value oneflex">
|
||||
<view v-if="orderData.otherData.departureImges&&orderData.otherData.departureImges.length" class="upload-container flex warp ">
|
||||
<view v-for="(item,index) in orderData.otherData.departureImges" class="upload-item" :key='index' >
|
||||
<image style="width: 100%; height: 100%;" @click="previewImage(orderData.otherData.departureImges.map(item=>item.imageUrl),index)"
|
||||
:src="item.imageUrl"> </image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
暂无单据信息
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="details-form-item flex ac noFormBorder">
|
||||
<view class="details-form-item-label">
|
||||
卸货单：
|
||||
</view>
|
||||
<view class="details-form-item-value oneflex">
|
||||
<view v-if="orderData.otherData.unloadingImges&&orderData.otherData.unloadingImges.length" class="upload-container flex warp ">
|
||||
<view v-for="(item,index) in orderData.otherData.unloadingImges" class="upload-item" :key='index' >
|
||||
<image style="width: 100%; height: 100%;" @click="previewImage(orderData.otherData.unloadingImges.map(item=>item.imageUrl),index)"
|
||||
:src="item.imageUrl"> </image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
暂无单据信息
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="orderData.otherData.outlayImagesList.length&&Number(orderData.outlay)" class="details-goods-information">
|
||||
<view class="details-form">
|
||||
<view class="details-form-title">支出费用：￥{{Number(orderData.outlay).toFixed(2)}}</view>
|
||||
<view v-for="(item,index) in orderData.otherData.outlayImagesList">
|
||||
<view class="details-form-item flex ac noFormBorder">
|
||||
<view class="details-form-item-label">
|
||||
{{dataMark.ORDER_EXPENSES[item.outlayType]}}
|
||||
</view>
|
||||
<view class="details-form-item-value oneflex">
|
||||
￥{{Number(item.expense).toFixed(2)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="details-form-item flex ac noFormBorder">
|
||||
<view class="details-form-item-label">
|
||||
单据图片：
|
||||
</view>
|
||||
<view class="details-form-item-value oneflex">
|
||||
<view v-if="item.images&&item.images.length" class="upload-container flex warp ">
|
||||
<view class="upload-item" :key='index' v-for="(url,urlIndex) in item.images">
|
||||
<image style="width: 100%; height: 100%;"
|
||||
@click="previewImage(item.images,urlIndex)" :src="url"> </image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
暂无单据信息
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import orderItem from "@/components/orderItem/orderItem.vue";
|
||||
import orderApi from '@/api/order.js'
|
||||
export default {
|
||||
components: {
|
||||
orderItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoad:false,
|
||||
dataMark: uni.getStorageSync('dataMark') || null,
|
||||
orderData: {
|
||||
"otherData": {
|
||||
outlayImagesList: [],
|
||||
unloadingImges:[],
|
||||
departureImges:[]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
if (e.orderData) {
|
||||
Object.assign(this.orderData, JSON.parse(decodeURIComponent(e.orderData)));
|
||||
let {
|
||||
orderNumber = ""
|
||||
} = this.orderData;
|
||||
this.isLoad = true
|
||||
this.getDetails(orderNumber);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dataMarkHandle(dataMark = this.dataMark, type = 'ORDER_EXPENSES') {
|
||||
return this.tool.dataMarkHandle(dataMark, type);
|
||||
},
|
||||
previewImage(uploadImages = [], index = undefined) {
|
||||
if (index !== undefined && uploadImages[index] !== undefined) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: uploadImages,
|
||||
longPressActions: {
|
||||
success: function(data) {},
|
||||
fail: function(err) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log('数据错误=>', ...arguments)
|
||||
}
|
||||
},
|
||||
getDetails(id) {
|
||||
orderApi.getOrderInfo(id).then(res => {
|
||||
if (res.code == 20000) {
|
||||
let {
|
||||
data: otherData = null
|
||||
} = res;
|
||||
Object.assign(this.orderData, {
|
||||
otherData
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user