| | |
| | | <GlobalWindow |
| | | :title="title" |
| | | :visible.sync="visible" |
| | | width="900px" |
| | | width="1000px" |
| | | :withFooter="false" |
| | | > |
| | | <div class="order-detail" v-if="detailInfo"> |
| | | <div class="section"> |
| | | <div class="section-header"> |
| | | <span class="section-title">订单详情</span> |
| | | <el-tag v-if="detailInfo.status === 1" type="warning">待取件</el-tag> |
| | | <el-tag v-else-if="detailInfo.status === 2" type="primary">配送中</el-tag> |
| | | <el-tag v-else-if="detailInfo.status === 3" type="success">已完成</el-tag> |
| | | <el-tag v-else-if="detailInfo.status === 4" type="info">已取消</el-tag> |
| | | <el-tag v-if="detailInfo.order && detailInfo.order.status === 4" type="primary">{{detailInfo.statusDesc}}</el-tag> |
| | | <el-tag v-else-if="detailInfo.order && detailInfo.order.status <7" type="warning" >{{detailInfo.statusDesc}}</el-tag> |
| | | <el-tag v-else-if="detailInfo.order && detailInfo.order.status ===7" type="success">{{detailInfo.statusDesc}}</el-tag> |
| | | <el-tag v-else type="info">{{detailInfo.statusDesc}}</el-tag> |
| | | <el-button style="" type="primary" @click="showLogList" >加急日志</el-button> |
| | | </div> |
| | | <div class="info-grid"> |
| | | <div class="info-item"> |
| | |
| | | <span class="label">订单类型:</span> |
| | | <span class="value"> |
| | | <span v-if="detailInfo.order.type === 0">就地存取</span> |
| | | <span v-else-if="detailInfo.order.type === 1">异地存取</span> |
| | | <span v-else-if="detailInfo.order.type === 1">同城寄送</span> |
| | | <span v-else>-</span> |
| | | </span> |
| | | </div> |
| | |
| | | </span> |
| | | </div> |
| | | |
| | | <div class="info-item"> |
| | | <div class="info-item" v-if="detailInfo.order.type ===1"> |
| | | <span class="label">订单级别:</span> |
| | | <span class="value">{{ detailInfo.order.orderLevel || '-' }}</span> |
| | | <span class="value">{{ detailInfo.order.isUrgent === 1?'极速达':'标速达' }}</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="label">预计到店时间:</span> |
| | |
| | | <span class="value">¥{{ (detailInfo.order.declaredFee / 100).toFixed(2) }}</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="label">预计寄存天数/配送里程:</span> |
| | | <span class="value">{{ detailInfo.order.estimatedDepositDays || '-' }}天/{{ detailInfo.order.distance || '-' }}公里</span> |
| | | <span class="label">{{detailInfo.order.type === 0 ? '预计寄存天数' : '配送里程'}}:</span> |
| | | <span class="value" v-if="detailInfo.order.type === 0">{{ detailInfo.order.estimatedDepositDays || '-' }}天</span> |
| | | <span class="value" v-if="detailInfo.order.type === 1">{{ detailInfo.order.distance || '-' }}公里</span> |
| | | </div> |
| | | <div class="info-item full-width"> |
| | | <span class="label">客户备注:</span> |
| | |
| | | </div> |
| | | <div class="info-item full-width"> |
| | | <span class="label">物品拍照:</span> |
| | | <div v-if="detailInfo.depositImages && detailInfo.depositImages.length" class="image-list"> |
| | | <div v-if="detailInfo.orderFiles && detailInfo.orderFiles.length" class="image-list"> |
| | | <el-image |
| | | v-for="(img, index) in detailInfo.depositImages" |
| | | v-for="(img, index) in detailInfo.orderFiles" |
| | | :key="index" |
| | | style="width: 80px; height: 80px; margin-right: 10px" |
| | | :src="img" |
| | | :preview-src-list="detailInfo.depositImages" |
| | | :preview-src-list="detailInfo.orderFiles" |
| | | fit="cover" |
| | | ></el-image> |
| | | </div> |
| | |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="label">寄件地址:</span> |
| | | <span class="value">{{ detailInfo.order.depositLocation || '' }}{{ detailInfo.order.depositLocationRemark || '' }}</span> |
| | | <span class="value">{{ detailInfo.order.depositLocationRemark || '' }}</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="label">收件地址:</span> |
| | | <span class="value">{{ detailInfo.order.takeLocation || '' }}{{ detailInfo.order.takeLocationRemark || '' }}</span> |
| | | <span class="value">{{ detailInfo.order.takeLocationRemark || '' }}</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="label">是否收件服务点:</span> |
| | |
| | | </div> |
| | | <div class="info-item full-width"> |
| | | <span class="label">门店收件拍照:</span> |
| | | <div v-if="detailInfo.storeInImages && detailInfo.storeInImages.length" class="image-list"> |
| | | <div v-if="detailInfo.depositImages && detailInfo.depositImages.length" class="image-list"> |
| | | <el-image |
| | | v-for="(img, index) in detailInfo.storeInImages" |
| | | v-for="(img, index) in detailInfo.depositImages" |
| | | :key="index" |
| | | style="width: 80px; height: 80px; margin-right: 10px" |
| | | :src="img" |
| | | :preview-src-list="detailInfo.storeInImages" |
| | | :preview-src-list="detailInfo.depositImages" |
| | | fit="cover" |
| | | ></el-image> |
| | | </div> |
| | | <span v-else>-</span> |
| | | </div> |
| | | <div class="info-item full-width"> |
| | | <div class="info-item full-width" v-if="detailInfo.order && detailInfo.order.type===1"> |
| | | <span class="label">司机取件拍照:</span> |
| | | <div v-if="detailInfo.driverTakeImages && detailInfo.driverTakeImages.length" class="image-list"> |
| | | <el-image |
| | |
| | | </div> |
| | | <span v-else>-</span> |
| | | </div> |
| | | <div class="info-item full-width"> |
| | | <span class="label">司机送达拍照/门店入库拍照:</span> |
| | | <div class="info-item full-width" v-if="detailInfo.order && detailInfo.order.type===1 && detailInfo.order.takeShopId"> |
| | | <span class="label">门店入库拍照:</span> |
| | | <div v-if="detailInfo.storeInImages && detailInfo.storeInImages.length" class="image-list"> |
| | | <el-image |
| | | v-for="(img, index) in detailInfo.storeInImages" |
| | | :key="index" |
| | | style="width: 80px; height: 80px; margin-right: 10px" |
| | | :src="img" |
| | | :preview-src-list="detailInfo.storeInImages" |
| | | fit="cover" |
| | | ></el-image> |
| | | </div> |
| | | <span v-else>-</span> |
| | | </div> |
| | | <div class="info-item full-width" v-if="detailInfo.order && detailInfo.order.type===1 && !detailInfo.order.takeShopId"> |
| | | <span class="label">司机送达拍照:</span> |
| | | <div v-if="detailInfo.driverDoneImages && detailInfo.driverDoneImages.length" class="image-list"> |
| | | <el-image |
| | | v-for="(img, index) in detailInfo.driverDoneImages" |
| | |
| | | </div> |
| | | <span v-else>-</span> |
| | | </div> |
| | | <div class="info-item full-width"> |
| | | <div class="info-item full-width" v-if="detailInfo.order && detailInfo.order.takeShopId"> |
| | | <span class="label">门店出库拍照:</span> |
| | | <div v-if="detailInfo.storeOutImages && detailInfo.storeOutImages.length" class="image-list"> |
| | | <el-image |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="section"> |
| | | <div class="section" v-if="detailInfo.order.cancelTime"> |
| | | <div class="section-header"> |
| | | <span class="section-title">取消信息</span> |
| | | </div> |
| | |
| | | |
| | | <div class="info-item"> |
| | | <span class="label">退款金额:</span> |
| | | <span class="value">{{ detailInfo.ordersRefund.createTime || '-' }}</span> |
| | | <span class="value">¥{{ (detailInfo.ordersRefund.refundAmount / 100).toFixed(2) || '-' }}</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="label">退款处理时间:</span> |
| | |
| | | <div class="section-header"> |
| | | <span class="section-title">物品信息</span> |
| | | </div> |
| | | <el-table :data="detailInfo.detailList" stripe class="goods-table"> |
| | | <el-table :data="detailInfo.detailList" stripe class="goods-table" :header-row-style="headerRowStyle"> |
| | | <el-table-column prop="typeName" label="物品名称" min-width="80px"></el-table-column> |
| | | <el-table-column prop="luggageName" label="物品尺寸" min-width="80px"></el-table-column> |
| | | <el-table-column label="单价(元)" min-width="100px"> |
| | | <template slot-scope="{row}"> |
| | | ¥{{ (row.unitPriceYuan / 100).toFixed(2) }} |
| | | ¥{{ ((row.unitPrice||0) / 100).toFixed(2) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="num" label="数量" min-width="60px"></el-table-column> |
| | | <el-table-column label="小计(元)" min-width="100px"> |
| | | <template slot-scope="{row}"> |
| | | ¥{{ (row.subtotal / 100).toFixed(2) }} |
| | | <span class="yellowstate"> ¥{{ ((row.subtotal ||0) / 100).toFixed(2) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div class="price-summary"> |
| | | <span>基础服务费:¥{{ (detailInfo.order.price / 100).toFixed(2) }}</span> |
| | | <span>物品保费:¥{{ (detailInfo.order.declaredFee / 100).toFixed(2) }}</span> |
| | | <span>订单总价:¥{{ (detailInfo.order.totalAmount / 100).toFixed(2) }}</span> |
| | | <span>实际支付:¥{{ (detailInfo.order.payAmount / 100).toFixed(2) }}</span> |
| | | <span>退款金额:¥{{ (detailInfo.order.refundAmount / 100).toFixed(2) }}</span> |
| | | <span>超时金额:¥{{ (detailInfo.order.overdueAmount / 100).toFixed(2) }}</span> |
| | | <span>异常金额:¥{{ (detailInfo.order.exceptionAmount / 100).toFixed(2) }}</span> |
| | | <div class="price-summary" v-if="detailInfo.order"> |
| | | <span class="price-span">基础服务费:¥{{ ((detailInfo.order.price||0) / 100).toFixed(2) }}</span> |
| | | <span class="price-span">物品保费:¥{{ ((detailInfo.order.declaredFee||0) / 100).toFixed(2) }}</span> |
| | | <span class="price-span">订单总价:¥{{ ((detailInfo.order.totalAmount||0) / 100).toFixed(2) }}</span> |
| | | <span class="price-span">实际支付:¥{{ ((detailInfo.order.payAmount||0) / 100).toFixed(2) }}</span> |
| | | <span class="price-span">退款金额:¥{{ ((detailInfo.order.refundAmount ||0)/ 100).toFixed(2) }}</span> |
| | | <span class="price-span">超时金额:¥{{ ((detailInfo.order.overdueAmount ||0)/ 100).toFixed(2) }}</span> |
| | | <span class="price-span">异常金额:¥{{ ((detailInfo.order.exceptionAmount ||0)/ 100).toFixed(2) }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <orderProgress ref ='orderProgress'></orderProgress> |
| | | </GlobalWindow> |
| | | </template> |
| | | |
| | | <script> |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import { getById } from '@/api/business/orderManagement' |
| | | |
| | | import { getById ,logListPage} from '@/api/business/orderManagement' |
| | | import orderProgress from '@/components/business/orderProgress' |
| | | export default { |
| | | name: 'OperaOrderDetail', |
| | | components: { GlobalWindow }, |
| | | components: { GlobalWindow ,orderProgress}, |
| | | data () { |
| | | return { |
| | | title: '订单详情', |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | headerRowStyle({ rowIndex }) { |
| | | return { |
| | | background: '#007bff' , |
| | | color : '#333', |
| | | height: '50px' |
| | | } |
| | | }, |
| | | open (row) { |
| | | this.title = '订单详情' |
| | | getById(row.id).then(res => { |
| | |
| | | }).catch(e => { |
| | | this.$tip.apiFailed(e) |
| | | }) |
| | | }, |
| | | showLogList () { |
| | | var that = this |
| | | if (!this.detailInfo.order || !this.detailInfo.order.id) { |
| | | return |
| | | } |
| | | logListPage({ |
| | | capacity: 10000, |
| | | model: { |
| | | orderId: this.detailInfo.order.id |
| | | }, |
| | | page: 1 |
| | | }).then(res => { |
| | | var orderLogList = res.records || [] |
| | | if (orderLogList.length) { |
| | | this.$refs.orderProgress.open('订单派单日志', orderLogList || []) |
| | | } else { |
| | | this.$message.warning('未查询到任何派单记录!') |
| | | } |
| | | }).catch(e => { |
| | | }) |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <style scoped> |
| | | .order-detail { |
| | | |
| | | |
| | | } |
| | | .section { |
| | | margin-bottom: 25px; |
| | |
| | | } |
| | | .goods-table { |
| | | margin-bottom: 15px; |
| | | border: 1px solid #f2f2f2; |
| | | } |
| | | .price-summary { |
| | | display: flex; |
| | |
| | | border-radius: 4px; |
| | | font-size: 14px; |
| | | color: #606266; |
| | | |
| | | } |
| | | .price-span{ |
| | | width: 20%; |
| | | } |
| | | </style> |