Skip to content

上
上药订单生命周期升级
Commit a3250456 authored by 琉璃丶c's avatar 琉璃丶c
Browse files
Options

1.添加物流追踪接口 

2.添加公共样式 empty-tips
3.重置了页面样式根据提供的小程序
parent a513918f
Show whitespace changes
Inline Side-by-side
Showing with 298 additions and 78 deletions
src/api/myOrder.js
View file @ a3250456
......@@ -26,6 +26,15 @@ export function getOrderInvoiceList(params) {
loading: true
})
}
// 获取物流追踪信息
export function getTrackInfo(params) {
return fetch({
url: '/OrderLife/TrackInfo',
method: 'post',
data: params,
loading: true
})
}
// 获取商品详情列表
export function getGoodInfoList(params) {
......
src/assets/styles/common.scss
View file @ a3250456
......@@ -276,4 +276,12 @@ body{
text-align: center;
min-width:20px;
}
.empty-tips {
height: 70px;
text-align: center;
line-height: 70px;
font-size: 13px;
color: $txtGrayL;
}
/*-----------公共样式---------------------------结束*/
src/views/myOrder/components/goodsSimpleItem.vue
View file @ a3250456
<template>
<div class="goods-simple-content ">
<div class="goods-simple-content " :style = "{'border-bottom': isLast?'none':''}">
<!-- <div class="goods-company">-->
<!-- <span class="company-name">{{item.company}}</span>-->
<!-- <span class="state-type order-type-tip-cold">{{item.goodsType}}</span>-->
......@@ -44,6 +44,10 @@ export default {
manufacturer: ''
}
}
},
isLast: {
type: Boolean,
default: false
}
},
methods: {
......
src/views/myOrder/components/invoiceSimpleItem.vue
View file @ a3250456
<template>
<div class="invoice-simple-content" @click="onItemClick">
<div class="invoice-simple-content" :style = "{'border-bottom': isLast?'none':''}" @click="onItemClick">
<!-- <div class="invoice-company">-->
<!-- {{item.company}}-->
<!-- </div>-->
......@@ -27,6 +27,10 @@ export default {
invoiceDate: ''
}
}
},
isLast: {
type: Boolean,
default: false
}
},
methods: {
......
src/views/myOrder/components/orderState.vue
View file @ a3250456
......@@ -7,6 +7,12 @@
<script>
export default {
name: 'orderState',
props: {
active: {
type: Number,
default: 0
}
},
mounted() {
this.calDashLineWidth()
},
......@@ -16,6 +22,7 @@ export default {
let width = '88%'
switch (lineEle.length) {
case 2:
width = '90%'
break
case 3:
width = '84%'
......
src/views/myOrder/components/orderStateItem.vue
View file @ a3250456
<template>
<div class="state-item" :class="'state-item__'+state">
<div style="position:relative">
<van-icon class="state-icon" :name="this.state==='select'?'checked':'passed'" />
<div :style="{display:state!=='end'?'inline-block':'none'}" class="state-line"></div>
<div class="state-item" :class="'state-item__'+stepState">
<div style="position:relative;z-index:1">
<div
:style="{display:(stepState!=='end'&& hasNext)?'block':'none',backgroundColor:stepState==='normal'?'white':''}"
class="state-line"></div>
<span class="state-icon-layout">
<span v-if="this.stepState!=='select'" class="state-icon-text state-icon-b">{{ itemNum }}</span>
<span v-else class="state-icon-b">
<van-icon class="state-icon-img" name="success"/>
</span>
</span>
</div>
<div >{{text}}</div>
<div class="state-name">{{ text }}</div>
</div>
</template>
......@@ -14,55 +21,117 @@ export default {
props: {
state: {
type: String,
default: 'normal' // normal; select; end
default: 'normal' // normal; select; next;end
},
hasNext: {
type: Boolean,
default: true
},
itemNum: {
type: Number,
default: 0
},
text: {
type: String,
default: '已开单'
}
},
data () {
data() {
return {}
},
computed: {
stepState: function () {
let res = 'normal'
let parentActive = this.$parent.active
if (parentActive === this.itemNum) {
res = 'select'
} else if (parentActive > this.itemNum) {
res = 'normal'
} else {
res = 'next'
}
return res
}
}
}
</script>
<style lang="scss" scoped>
.state-item {
.state-item {
text-align: center;
margin: 0 auto;
width: 100%;
color: #fff;
i {
font-size: 25px;
.state-icon-layout {
background: #16a7f0;
padding: 3px;
.state-icon-b {
display: inline-block;
border-radius: 20px;
border: solid 2.5px #fff;
width: 25px;
height: 25px;
text-align: center;
}
.state-icon {
position: relative;
.state-icon-img {
font-size: 10px;
font-weight: bold;
line-height: 22px;
}
.state-icon-text {
line-height: 22px;
font-size: 16px;
}
}
.state-item__normal {
color: #fff;
.state-name {
margin-top:5px;
color: #a8e1f3;
}
}
.state-item__normal {
.state-icon {
.state-item__select {
color: #ea9518;
}
}
.state-item__end {
color: #707070;
.state-item__select {
.state-icon-b {
background: #ea9518;
}
.state-name {
color: #fff;
}
}
.state-item__next {
.state-line {
}
.state-item__end {
}
.state-line {
position: absolute;
top: 14px;
top: 12px;
left: 50%;
z-index: -1;
width: 88%;
height: 1px;
height: 2px;
background-size: 15px 3px;
background-repeat: repeat-x;
background-image: linear-gradient(
to right,
#fff 0%,
#fff 80%,
#fff 60%,
transparent 50%
);
}
}
</style>
src/views/myOrder/detail/orderDetail.vue
View file @ a3250456
<template>
<div class="order-detail">
<!-- 订单状态 -->
<order-state style="height: 120px;padding-top: 20px;background-color: #16a7f0;">
<order-state-item text="已开单"/>
<order-state-item text="已发货" state="normal"/>
<order-state-item text="运输中" state="select"/>
<order-state-item text="已收货" state="end"/>
<!-- 订单状态 正常 -->
<order-state class="order-state" :active="orderStateActive" v-if="detailData.orderType === 'SALE' && trackData.currentOrderStatusCode !== '110'">
<order-state-item text="已开单" :item-num="1"/>
<order-state-item text="已发货" :item-num="2"/>
<order-state-item text="运输中" :item-num="3"/>
<order-state-item text="已签收" :item-num="4" :hasNext="false"/>
</order-state>
<!-- 订单状态 退货 -->
<order-state class="order-state" :active="orderStateActive" v-if="detailData.orderType === 'SALE_RTN' && trackData.currentOrderStatusCode !== '110'">
<order-state-item text="已开单" :item-num="1"/>
<order-state-item text="退货中" :item-num="2"/>
<order-state-item text="已完成" :item-num="3" :hasNext="false"/>
</order-state>
<!-- 订单状态 取消 -->
<order-state class="order-state" :active="1" v-if="trackData.currentOrderStatusCode === '110'">
<order-state-item text="已开单" :item-num="1"/>
<order-state-item text="已取消" :item-num="2" :hasNext="false"/>
</order-state>
<!-- 订单状态：
100 待处理
110 已开单
120 已取消
130 退货中
180 已完成
200 待出库
210 拣配中
220 已出库
230 调度中
240 运输变更
300 运输中
400 已签收
410 签收回执
-->
<!-- 订单基本信息 -->
<div class="order-common order-info">
<div class="info-content">
......@@ -20,16 +48,16 @@
</div>
</div>
<div class="info-state">
<span class="state-type order-type-tip-return">退</span>
<span class="state-type order-type-tip-cold">冷</span>
<span class="state-type order-type-tip-jm">精麻</span>
</div>
<div class="info-arrival">
<div class="arrival-time">
<van-icon name="clock-o"/>
预计到达时间: 2020-11-13
</div>
<span v-if="this.storageModel.rtn" class="state-type order-type-tip-return">退</span>
<span v-if="this.storageModel.cold" class="state-type order-type-tip-cold">冷</span>
<span v-if="this.storageModel.jm" class="state-type order-type-tip-jm">精麻</span>
</div>
<!-- <div class="info-arrival">-->
<!-- <div class="arrival-time">-->
<!-- <van-icon name="clock-o"/>-->
<!-- 预计到达时间: 2020-11-13-->
<!-- </div>-->
<!-- </div>-->
</div>
<!-- 订单物流信息 -->
<div class="order-common order-logistics">
......@@ -37,10 +65,10 @@
<van-icon :name="icons.inDelivery" class="order-icon logistics-icon"/>
<div class="logistics-text">
<div style="display:flex">
<span class="logistics-speak">您的物流单：YDH4236272752430已从上海市绥德路发出 </span>
<span class="logistics-speak">{{ trackData.orderStatusInfoVoList[0].statusMsg }}</span>
<van-icon class="logistics-arrow" name="arrow"/>
</div>
<div class="logistics-time">2020-11-10 18:09:30</div>
<div class="logistics-time">{{ trackData.orderStatusInfoVoList[0].opDate }}</div>
</div>
</div>
<div class="location-content">
......@@ -58,18 +86,20 @@
<van-icon class="title-arrow" name="arrow"/>
</div>
<div class="order-common " style="padding-top: 0">
<goods-simple-item v-for="item in detailData.goodsInfos" :key="item.goodsId" :item="item"/>
<goods-simple-item v-for="(item,index) in detailData.goodsInfos" :key="item.goodsId" :item="item"
:is-last="index === detailData.goodsInfos.length - 1"/>
</div>
<!-- 订单发票信息 -->
<div>
<div class="goods-all" @click="openOrderInvoice()">
<span class="all-title">发票信息 ({{invoiceData.total}})</span>
<span class="all-title">发票信息 ({{ invoiceData.total ? invoiceData.total : 0 }})</span>
<span class="title-more">更多</span>
<van-icon class="title-arrow" name="arrow"/>
</div>
<div class="order-common">
<invoice-simple-item v-for="item in invoiceData.invoiceList" :item="item" :key="item.invoiceNo"
@itemClick="openInvoice(item)"/>
<div class="order-common" style="margin-bottom: 10px">
<invoice-simple-item v-for="(item, index) in invoiceData.invoiceList" :item="item" :key="item.invoiceNo"
:is-last="index === invoiceData.invoiceList.length - 1" @itemClick="openInvoice(item)"/>
<div class="empty-tips" v-if="!invoiceData || !invoiceData.invoiceList || invoiceData.invoiceList.length <= 0">暂无数据</div>
</div>
</div>
</div>
......@@ -80,14 +110,27 @@ import OrderStateItem from '../components/orderStateItem'
import OrderState from '../components/orderState'
import GoodsSimpleItem from '../components/goodsSimpleItem'
import InvoiceSimpleItem from '../components/invoiceSimpleItem'
import {getMyOrderList, getDeliveryOrder, getOrderInvoiceList} from '@/api/myOrder'
import {getMyOrderList, getTrackInfo, getOrderInvoiceList} from '@/api/myOrder'
export default {
name: 'orderDetail',
components: {InvoiceSimpleItem, GoodsSimpleItem, OrderState, OrderStateItem},
data() {
return {
orderItem: this.$route.query,
orderStateActive: 1,
detailData: {},
storageModel: {
cold: false,
rtn: false,
jm: false
},
trackData: {
orderStatusInfoVoList: [{
statusMsg: '',
opDate: ''
}]
},
invoiceData: {},
icons: {
inDelivery: require('@/assets/img/u546.svg'),
......@@ -108,14 +151,17 @@ export default {
})
// 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
window.addEventListener('popstate', this.onBrowserBack, false)
this.orderItem = this.$route.query
this.getOrderDetail()
this.getInvoiceDetail()
this.getTrackInfoDetail()
},
deactivated() {
// 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
window.removeEventListener('popstate', this.onBrowserBack, false)
},
mounted() {
this.getOrderDetail()
this.getInvoiceDetail()
},
destroyed() {
},
......@@ -152,6 +198,41 @@ export default {
})
console.log(item)
},
/* 计算订单状态Step */
calcOrderStep(statusCode) {
this.orderStateActive = 1
switch (statusCode) {
// 已开单
case '100':
this.orderStateActive = 1
break
// 已取消
case '110':
this.orderStateActive = 2
break
// 已发货
case '220':
this.orderStateActive = 2
break
// 运输中
case '310':
this.orderStateActive = 3
break
// 已签收
case '400':
case '420':
this.orderStateActive = 4
break
// 退货中
case '120':
this.orderStateActive = 2
break
// 已退货
case '180':
this.orderStateActive = 3
break
}
},
/* 获取订单详情 */
getOrderDetail() {
let params = {
......@@ -169,10 +250,10 @@ export default {
'manufacturer': '',
'mdmClientCode': '',
'order': '',
'orderId': '19965720', // 19977352;19965720
'orderNo': '',
'orderId': this.orderItem.orderId, // 19977352;19965720
'orderNo': '', // 225202103170165
'orderStatusCode': '',
'orderType': '',
'orderType': this.orderItem.orderType,
'pageNum': 1,
'pageSize': 20,
'shippingAdress': '',
......@@ -184,22 +265,52 @@ export default {
'supplierId': []
}
getMyOrderList(params).then(res => {
console.log(res)
if (res.code === 200 && res.data && res.data.code === '00000' &&
res.data.entity && res.data.entity.orderList && res.data.entity.orderList.length > 0) {
this.detailData = res.data.entity.orderList[0]
this.detailData.goodsInfos.forEach(item => {
// console.log(111, item)
let mode = item.storageMode
if (mode.indexOf('冷') !== -1) {
// 插入到
this.storageModel.cold = true
}
if (mode.indexOf('退') !== -1) {
this.storageModel.rtn = true
}
if (mode.indexOf('精') !== -1) {
this.storageModel.jm = true
}
})
} else {
console.log('请求失败')
console.log('订单详情', '请求失败')
}
}).catch(err => {
console.log(err)
console.log('订单详情', err)
})
},
getTrackInfoDetail() {
let data = {
'sourceDb': this.orderItem.sourceDb,
'supplierId': [this.orderItem.supplierId],
'clientID': [this.orderItem.clientId],
'orderId': '',
'orderNo': this.orderItem.orderNo,
'orderType': this.orderItem.orderType,
'supplierCode': [
this.orderItem.supplierCode
],
'clientCode': [this.orderItem.clientCode]
}
getTrackInfo(data).then(res => {
if (res.code === 200 && res.data && res.data.code === '00000' &&
res.data.entity && res.data.entity.logisticsTrackingInfoList) {
this.trackData = res.data.entity.logisticsTrackingInfoList
this.calcOrderStep(this.trackData.currentOrderStatusCode)
}
}).catch(err => {
console.log('物流跟踪', err)
})
// getDeliveryOrder(params).then(res => {
// console.log(res)
// }).catch(err => {
// console.log(err)
// })
},
/* 获取发票列表 */
getInvoiceDetail() {
......@@ -221,7 +332,7 @@ export default {
'mdmGoodsCode': '',
'order': '',
'orderId': '',
'orderNo': '301202103160009', // this.$route.query.orderNo,
'orderNo': this.orderItem.orderNo,
'pageNum': 1,
'pageSize': 3,
'sort': '',
......@@ -234,10 +345,10 @@ export default {
res.data.entity && res.data.entity.invoiceList && res.data.entity.invoiceList.length > 0) {
this.invoiceData = res.data.entity
} else {
console.log('请求失败')
console.log('发票明细', '请求失败')
}
}).catch(err => {
console.log(err)
console.log('发票明细', err)
})
}
}
......@@ -266,6 +377,12 @@ export default {
}
}
.order-state {
height: 120px;
padding-top: 20px;
background-color: #16a7f0;
}
/*订单主信息区域*/
.order-info {
margin-top: -30px !important;
......@@ -312,14 +429,15 @@ export default {
/*订单状态*/
.info-state {
margin: 10px 0 0 60px;
margin: 6px 0 0 45px;
.state-type {
display: inline-block;
text-align: center;
font-size: 12px;
min-width: 40px;
min-width: 30px;
margin: 0 4px;
transform: scale(0.85);
}
}
......@@ -368,6 +486,7 @@ export default {
margin-right: 20px;
font-weight: bold;
font-size: 12px;
flex: 1
}
/*箭头*/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment