<template>
|
<view class="orderDetail-wrap">
|
<u-popup v-model="popupShow" mode="center" width="90%" closeable>
|
<view class="orderDetail-main">
|
<view class="peisongDate-box">
|
<view class="peisongDate">
|
<text>配送时间:</text>
|
<text>{{sendDate}}</text>
|
</view>
|
<text class="status">{{status == 1 ? '已签收' : (status == 0 ? '未签收' : '异常签收')}}</text>
|
</view>
|
<view class="shangpin-table">
|
<view class="shangpin-biaoti">
|
<view class="shangpin-name">卷烟名称</view>
|
<view class="shangpin-num">条数</view>
|
</view>
|
<view class="shangpin-box">
|
<scroll-view scroll-y="true" style="height: 480rpx;">
|
<view class="shangpin-table-line" v-for="item in orderDetailList" :key="item.id">
|
<view class="shangpin-name">{{item.product}}</view>
|
<view class="shangpin-num">{{item.num}}</view>
|
</view>
|
</scroll-view>
|
<!-- <view class="shangpin-table-line">
|
<view class="shangpin-name">钻石(硬特醇)</view>
|
<view class="shangpin-num">122</view>
|
</view> -->
|
</view>
|
</view>
|
<view class="peisong-total">
|
<text>配送总量:</text>
|
<text>{{totalComputed}}条</text>
|
</view>
|
<view v-if="customerInformation.name">
|
<view class="shoujianrenxinxi-line">
|
<text>签收人：{{customerInformation.name}}</text>
|
<text>{{customerInformation.updateTime}}</text>
|
</view>
|
<view class="shoujianrenxinxi-line">
|
<text>电话：{{customerInformation.phone}}</text>
|
<!-- <text>签收方式：指纹</text> -->
|
</view>
|
</view>
|
<u-button
|
v-if="level == 0"
|
:disabled="status == 0 ? true : false"
|
:type="status == 0 ? 'info' : 'success'"
|
class="pingjiaBtn"
|
@click="gotoPingjia">我要评价</u-button>
|
</view>
|
|
</u-popup>
|
<pingjia v-if="pingjiaVisiable" ref="pingjia" @refeshOrderDetail="refeshOrderDetail"></pingjia>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name:"orderDetail",
|
data() {
|
return {
|
orderDetailList:[],
|
popupShow: false,
|
pingjiaVisiable: false,
|
customerInformation:{},
|
customerReceiveId:'', //接货人ID
|
status:0, //签收状态
|
level:0,
|
sendDate:'', //配送时间
|
type: 'success'
|
};
|
},
|
computed:{
|
totalComputed() {
|
let total = 0
|
this.orderDetailList.forEach(item => {
|
total += item.num
|
})
|
return total
|
}
|
},
|
methods: {
|
init(item) {
|
console.log(item,'item------item')
|
this.customerReceiveId = item.customerReceiveId
|
this.status = item.status
|
this.level = item.level
|
this.sendDate = item.sendDate
|
this.popupShow = true
|
this.getOrderDetail(item.id,this.customerReceiveId)
|
},
|
refeshOrderDetail() {
|
this.pingjiaVisiable = false
|
this.$emit('refeshOrderDetail')
|
},
|
getOrderDetail(id,customerReceiveId) { //接货人ID 判断是否有接货人ID 有的话有收货人信息 没有则没有收货人信息
|
this.$u.api.getOrderDetail({orderId:id}).then(res => {
|
if(res.code == 200) {
|
this.orderDetailList = res.result
|
if(customerReceiveId) {
|
this.getCustomerReceiveById(customerReceiveId)
|
this.type = 'success'
|
}else {
|
this.type = 'info'
|
}
|
}
|
})
|
},
|
getCustomerReceiveById(customerReceiveId) {
|
console.log('customerReceiveId==',customerReceiveId)
|
this.$u.api.getCustomerReceiveById({customerReceiveId:customerReceiveId}).then(res => {
|
if(res.code == 200) {
|
this.customerInformation = res.result
|
}
|
})
|
},
|
gotoPingjia() {
|
this.pingjiaVisiable = true
|
this.$nextTick(() => {
|
console.log('this.$refs',this.$refs)
|
this.$refs.pingjia.pingjiaInit()
|
})
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
/deep/ .u-btn--default{
|
background-color: red;
|
}
|
.orderDetail-main{
|
width: 90%;
|
margin: 20rpx auto;
|
display: flex;
|
flex-direction: column;
|
}
|
.peisongDate-box{
|
display: flex;
|
justify-content: space-between;
|
padding: 20rpx;
|
border-bottom: 1px dashed #CCCCCC;
|
.peisongDate{
|
display: flex;
|
text{
|
font-size: 28rpx;
|
color: #111111;
|
font-weight: light;
|
line-height: 2;
|
&:first-child{
|
margin-right: 10rpx;
|
}
|
}
|
|
}
|
.status{
|
font-size: 28rpx;
|
color: #FF0000;
|
font-weight: light;
|
line-height: 2;
|
}
|
}
|
.shangpin-table{
|
display: flex;
|
flex-direction: column;
|
.shangpin-biaoti{
|
display: flex;
|
padding: 20rpx 0;
|
border-bottom: 1px dashed #CCCCCC;
|
.shangpin-name{
|
flex: 2;
|
font-size: 28rpx;
|
color: #111111;
|
font-weight: light;
|
text-align: center;
|
}
|
.shangpin-num{
|
flex: 1;
|
font-size: 28rpx;
|
color: #111111;
|
font-weight: light;
|
text-align: center;
|
}
|
}
|
.shangpin-box{
|
display: flex;
|
flex-direction: column;
|
border-bottom: 1px dashed #CCCCCC;
|
// max-height: 480rpx;
|
// overflow-y: auto;
|
// touch-action: pan-y;
|
// -webkit-overflow-scrolling: touch;
|
.shangpin-table-line{
|
display: flex;
|
padding: 20rpx 0;
|
.shangpin-name{
|
flex: 2;
|
font-size: 28rpx;
|
color: #111111;
|
font-weight: light;
|
text-align: center;
|
}
|
.shangpin-num{
|
flex: 1;
|
font-size: 28rpx;
|
color: #111111;
|
font-weight: light;
|
text-align: center;
|
}
|
}
|
}
|
}
|
.peisong-total{
|
padding: 10rpx;
|
margin-top: 20rpx;
|
text{
|
font-size: 32rpx;
|
color: #111111;
|
font-weight: light;
|
}
|
}
|
.shoujianrenxinxi-line{
|
display: flex;
|
justify-content: space-between;
|
padding: 10rpx;
|
text{
|
font-size: 28rpx;
|
color: #111111;
|
font-weight: light;
|
line-height: 2;
|
}
|
}
|
.pingjiaBtn{
|
margin: 40rpx auto 0;
|
background-color: #1F9F4C;
|
width: 250rpx;
|
height: 76rpx;
|
}
|
</style>
|
