gaoxs
5 years ago
12 changed files with 920 additions and 847 deletions
@ -1,381 +1,397 @@ |
|||||||
<template> |
<template> |
||||||
<view class="logistics"> |
<view class="logistics"> |
||||||
<view class="header acea-row row-between row-top" v-for="cart in cartInfo" :key="cart.id"> |
<view class="header acea-row row-between row-top" v-for="cart in cartInfo" :key="cart.id"> |
||||||
<view class="pictrue"> |
<view class="pictrue"> |
||||||
<image :src="cart.productInfo.image" /> |
<image :src="cart.productInfo.image" /> |
||||||
</view> |
</view> |
||||||
<view class="text acea-row row-between"> |
<view class="text acea-row row-between"> |
||||||
<view class="name line2">{{ cart.productInfo.store_name }}</view> |
<view class="name line2">{{ cart.productInfo.store_name }}</view> |
||||||
<view class="money"> |
<view class="money"> |
||||||
<view>￥{{ cart.truePrice }}</view> |
<view>￥{{ cart.truePrice }}</view> |
||||||
<view>x{{ cart.cart_num }}</view> |
<view>x{{ cart.cart_num }}</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
<view class="logisticsCon" style="margin-bottom: 5px"> |
<view class="logisticsCon" style="margin-bottom: 5px"> |
||||||
<view class="company acea-row row-between-wrapper"> |
<view class="company acea-row row-between-wrapper"> |
||||||
<view class="picTxt acea-row row-between-wrapper"> |
<view class="picTxt acea-row row-between-wrapper"> |
||||||
<view class="iconfont icon-wuliu"></view> |
<view class="iconfont icon-wuliu"></view> |
||||||
<view class="text"> |
<view class="text"> |
||||||
<view> |
<view> |
||||||
<text class="name line1">物流公司：</text> |
<text class="name line1">物流公司：</text> |
||||||
{{ orderInfo.deliveryName }} |
{{ orderInfo.deliveryName }} |
||||||
</view> |
</view> |
||||||
<view class="express line1"> |
<view class="express line1"> |
||||||
<text class="name">快递单号：</text> |
<text class="name">快递单号：</text> |
||||||
{{ orderInfo.deliveryId }} |
{{ orderInfo.deliveryId }} |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
<view class="copy acea-row row-center-wrapper copy-data" @click="copyClipboard(orderInfo.deliveryId)">复制单号</view> |
<view |
||||||
</view> |
class="copy acea-row row-center-wrapper copy-data" |
||||||
<view class="item" v-for="(express, expressListIndex) in expressList" :key="expressListIndex"> |
@click="copyClipboard(orderInfo.deliveryId)" |
||||||
<view class="circular" :class="expressListIndex === 0 ? 'on' : ''"></view> |
>复制单号</view> |
||||||
<view class="text"> |
</view> |
||||||
<view :class="expressListIndex === 0 ? 'font-color-red' : ''">{{ express.status }}</view> |
<view class="item" v-for="(express, expressListIndex) in expressList" :key="expressListIndex"> |
||||||
<view class="data">{{ express.time }}</view> |
<view class="circular" :class="expressListIndex === 0 ? 'on' : ''"></view> |
||||||
</view> |
<view class="text"> |
||||||
</view> |
<view :class="expressListIndex === 0 ? 'font-color-red' : ''">{{ express.status }}</view> |
||||||
</view> |
<view class="data">{{ express.time }}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
<!-- 物流进度条 --> |
<!-- 物流进度条 --> |
||||||
<view class="div-bg bg-white" style="font-size:12px; background:#fff;"> |
<view class="div-bg bg-white" style="font-size:12px; background:#fff;"> |
||||||
<!--物流跟踪--> |
<!--物流跟踪--> |
||||||
<view style="margin-bottom:5px;"> |
<view style="margin-bottom:5px;"> |
||||||
<view class="bg-white" style="width: 92%; margin-left: 4%;margin: auto;padding-left: 15px;padding-right: 15px;padding-top: 10px"> |
<view |
||||||
<view style="font-size: 26rpx;color: #111111; margin: 5px 0"> |
class="bg-white" |
||||||
物流跟踪 |
style="width: 92%; margin-left: 4%;margin: auto;padding-left: 15px;padding-right: 15px;padding-top: 10px" |
||||||
<!--物流跟踪--> |
> |
||||||
</view> |
<view style="font-size: 26rpx;color: #111111; margin: 5px 0"> |
||||||
<view> |
物流跟踪 |
||||||
<view class="track-rcol"> |
<!--物流跟踪--> |
||||||
<view class="track-list"> |
</view> |
||||||
<view> |
<view> |
||||||
<view v-for="(item,logisticsListindex) in logisticsList" :key="logisticsListindex"> |
<view class="track-rcol"> |
||||||
<view class="active" v-if="logisticsListindex===0"> |
<view class="track-list"> |
||||||
<view></view> |
<view> |
||||||
<i class="node-icon"></i> |
<view |
||||||
<text class="txt">{{item.acceptStation}}</text> |
class="track-list-item" |
||||||
<text class="time">{{item.acceptTime}}</text> |
v-for="(item,logisticsListindex) in logisticsList" |
||||||
</view> |
:key="logisticsListindex" |
||||||
<view v-if="logisticsListindex > 0 && logisticsListindex !== logisticsList.length-1"> |
> |
||||||
<i class="node-icon"></i> |
<view class="active" v-if="logisticsListindex===0"> |
||||||
<text class="txt">{{item.acceptStation}}</text> |
<view></view> |
||||||
<text class="time">{{item.acceptTime}}</text> |
<i class="node-icon"></i> |
||||||
</view> |
<text class="txt">{{item.acceptStation}}</text> |
||||||
<view v-if="logisticsListindex === logisticsList.length-1" class="finall"> |
<text class="time">{{item.acceptTime}}</text> |
||||||
<i class="div-spilander"></i> |
</view> |
||||||
<i class="node-icon"></i> |
<view |
||||||
<text class="txt">{{item.acceptStation}}</text> |
v-if="logisticsListindex > 0 && logisticsListindex !== logisticsList.length-1" |
||||||
<text class="time">{{item.acceptTime}}</text> |
> |
||||||
</view> |
<i class="node-icon"></i> |
||||||
</view> |
<text class="txt">{{item.acceptStation}}</text> |
||||||
</view> |
<text class="time">{{item.acceptTime}}</text> |
||||||
</view> |
</view> |
||||||
</view> |
<view v-if="logisticsListindex === logisticsList.length-1" class="finall"> |
||||||
</view> |
<i class="div-spilander"></i> |
||||||
</view> |
<i class="node-icon"></i> |
||||||
</view> |
<text class="txt">{{item.acceptStation}}</text> |
||||||
</view> |
<text class="time">{{item.acceptTime}}</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
<view class="no-express" v-if="loaded && !expressList.length"> |
<view class="no-express" v-if="loaded && !expressList.length"> |
||||||
<image src="@/static/images/noExpress.png" /> |
<image src="@/static/images/noExpress.png" /> |
||||||
</view> |
</view> |
||||||
<Recommend></Recommend> |
<Recommend></Recommend> |
||||||
</view> |
</view> |
||||||
</template> |
</template> |
||||||
<script> |
<script> |
||||||
import Recommend from "@/components/Recommend"; |
import Recommend from "@/components/Recommend"; |
||||||
import { |
import { express, orderDetail } from "@/api/order"; |
||||||
express, |
import { copyClipboard } from "@/utils"; |
||||||
orderDetail |
|
||||||
} from "@/api/order"; |
|
||||||
import { |
|
||||||
copyClipboard |
|
||||||
} from "@/utils"; |
|
||||||
|
|
||||||
const NAME = "Logistics"; |
const NAME = "Logistics"; |
||||||
|
|
||||||
export default { |
export default { |
||||||
name: NAME, |
name: NAME, |
||||||
components: { |
components: { |
||||||
Recommend |
Recommend |
||||||
}, |
}, |
||||||
data: function() { |
data: function() { |
||||||
return { |
return { |
||||||
id: "", |
id: "", |
||||||
cartInfo: [], |
cartInfo: [], |
||||||
orderInfo: {}, |
orderInfo: {}, |
||||||
expressList: [], |
expressList: [], |
||||||
loaded: false, |
loaded: false, |
||||||
logisticsList: [{ |
logisticsList: [ |
||||||
message: "暂无数据", |
{ |
||||||
messageDate: "" |
message: "暂无数据", |
||||||
}] |
messageDate: "" |
||||||
}; |
} |
||||||
}, |
] |
||||||
watch: { |
}; |
||||||
$yroute(n) { |
}, |
||||||
if (n.name === NAME && this.$yroute.query.id !== this.id) { |
watch: { |
||||||
this.id = this.$yroute.query.id; |
$yroute(n) { |
||||||
this.getExpress(); |
if (n.name === NAME && this.$yroute.query.id !== this.id) { |
||||||
} |
this.id = this.$yroute.query.id; |
||||||
} |
this.getExpress(); |
||||||
}, |
} |
||||||
mounted: function() { |
} |
||||||
this.id = this.$yroute.query.id; |
}, |
||||||
this.getExpress(); |
mounted: function() { |
||||||
}, |
this.id = this.$yroute.query.id; |
||||||
methods: { |
this.getExpress(); |
||||||
copyClipboard, |
}, |
||||||
getExpressInfo() { |
methods: { |
||||||
let params = { |
copyClipboard, |
||||||
orderCode: this.id, |
getExpressInfo() { |
||||||
shipperCode: this.orderInfo.deliverySn, |
let params = { |
||||||
logisticCode: this.orderInfo.deliveryId |
orderCode: this.id, |
||||||
}; |
shipperCode: this.orderInfo.deliverySn, |
||||||
express(params) |
logisticCode: this.orderInfo.deliveryId |
||||||
.then(res => { |
}; |
||||||
this.logisticsList = res.data.traces.reverse(); |
express(params) |
||||||
}) |
.then(res => { |
||||||
.catch(err => { |
this.logisticsList = res.data.traces.reverse(); |
||||||
uni.showToast({ |
}) |
||||||
title: err.msg || err.response.data.msg|| err.response.data.message, |
.catch(err => { |
||||||
icon: 'none', |
uni.showToast({ |
||||||
duration: 2000 |
title: |
||||||
}); |
err.msg || err.response.data.msg || err.response.data.message, |
||||||
}); |
icon: "none", |
||||||
}, |
duration: 2000 |
||||||
getExpress() { |
}); |
||||||
if (!this.id) { |
}); |
||||||
uni.showToast({ |
}, |
||||||
title: err.msg || err.response.data.msg|| err.response.data.message, |
getExpress() { |
||||||
icon: 'none', |
if (!this.id) { |
||||||
duration: 2000 |
uni.showToast({ |
||||||
}); |
title: err.msg || err.response.data.msg || err.response.data.message, |
||||||
return |
icon: "none", |
||||||
} |
duration: 2000 |
||||||
this.loaded = false; |
}); |
||||||
orderDetail(this.id) |
return; |
||||||
.then(res => { |
} |
||||||
this.orderInfo = { |
this.loaded = false; |
||||||
deliveryId: res.data.deliveryId, |
orderDetail(this.id) |
||||||
deliveryName: res.data.deliveryName, |
.then(res => { |
||||||
deliverySn: res.data.deliverySn |
this.orderInfo = { |
||||||
}; |
deliveryId: res.data.deliveryId, |
||||||
this.getExpressInfo(); |
deliveryName: res.data.deliveryName, |
||||||
// const result = res.data.express.result || {}; |
deliverySn: res.data.deliverySn |
||||||
// this.cartInfo = res.data.order.cartInfo; |
}; |
||||||
// this.expressList = result.list || []; |
this.getExpressInfo(); |
||||||
// this.loaded = true; |
// const result = res.data.express.result || {}; |
||||||
|
// this.cartInfo = res.data.order.cartInfo; |
||||||
}) |
// this.expressList = result.list || []; |
||||||
.catch(err => { |
// this.loaded = true; |
||||||
uni.showToast({ |
}) |
||||||
title: err.msg || err.response.data.msg|| err.response.data.message, |
.catch(err => { |
||||||
icon: 'none', |
uni.showToast({ |
||||||
duration: 2000 |
title: |
||||||
}); |
err.msg || err.response.data.msg || err.response.data.message, |
||||||
}); |
icon: "none", |
||||||
} |
duration: 2000 |
||||||
} |
}); |
||||||
}; |
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped lang="less"> |
<style scoped lang="less"> |
||||||
.no-express { |
.no-express { |
||||||
margin: 1.5*100rpx 0; |
margin: 1.5 * 100rpx 0; |
||||||
} |
} |
||||||
|
|
||||||
.no-express image { |
.no-express image { |
||||||
width: 6*100rpx; |
width: 6 * 100rpx; |
||||||
margin: 0 auto; |
margin: 0 auto; |
||||||
display: block; |
display: block; |
||||||
} |
} |
||||||
|
|
||||||
.message-text { |
.message-text { |
||||||
font-family: MicrosoftYaHei; |
font-family: MicrosoftYaHei; |
||||||
font-size: 1*100rpx; |
font-size: 1 * 100rpx; |
||||||
font-weight: normal; |
font-weight: normal; |
||||||
font-stretch: normal; |
font-stretch: normal; |
||||||
line-height: 3*100rpx; |
line-height: 3 * 100rpx; |
||||||
letter-spacing: 0*100rpx; |
letter-spacing: 0 * 100rpx; |
||||||
color: #333333; |
color: #333333; |
||||||
width: 50%; |
width: 50%; |
||||||
} |
} |
||||||
|
|
||||||
.fontblack { |
.fontblack { |
||||||
color: #999999; |
color: #999999; |
||||||
} |
} |
||||||
|
|
||||||
.img2 { |
.img2 { |
||||||
width: 0.81*100rpx; |
width: 0.81 * 100rpx; |
||||||
height: 0.8*100rpx; |
height: 0.8 * 100rpx; |
||||||
float: right; |
float: right; |
||||||
} |
} |
||||||
|
|
||||||
.addressshow2 { |
.addressshow2 { |
||||||
height: auto; |
height: auto; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
text-overflow: ellipsis; |
text-overflow: ellipsis; |
||||||
display: -webkit-box; |
display: -webkit-box; |
||||||
width: 75%; |
width: 75%; |
||||||
-webkit-line-clamp: 2; |
-webkit-line-clamp: 2; |
||||||
-webkit-box-orient: vertical; |
-webkit-box-orient: vertical; |
||||||
white-space: normal; |
white-space: normal; |
||||||
word-wrap: break-word; |
word-wrap: break-word; |
||||||
word-break: break-all; |
word-break: break-all; |
||||||
font-size: 1*100rpx; |
font-size: 1 * 100rpx; |
||||||
} |
} |
||||||
|
|
||||||
.addressshow1 { |
.addressshow1 { |
||||||
height: auto; |
height: auto; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
text-overflow: ellipsis; |
text-overflow: ellipsis; |
||||||
display: -webkit-box; |
display: -webkit-box; |
||||||
width: 75%; |
width: 75%; |
||||||
-webkit-line-clamp: 1; |
-webkit-line-clamp: 1; |
||||||
-webkit-box-orient: vertical; |
-webkit-box-orient: vertical; |
||||||
white-space: normal; |
white-space: normal; |
||||||
word-wrap: break-word; |
word-wrap: break-word; |
||||||
word-break: break-all; |
word-break: break-all; |
||||||
font-size: 1*100rpx; |
font-size: 1 * 100rpx; |
||||||
} |
} |
||||||
|
|
||||||
.orderTitle { |
.orderTitle { |
||||||
font-size: 1*100rpx; |
font-size: 1 * 100rpx; |
||||||
color: #333333; |
color: #333333; |
||||||
height: auto; |
height: auto; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
text-overflow: ellipsis; |
text-overflow: ellipsis; |
||||||
display: -webkit-box; |
display: -webkit-box; |
||||||
-webkit-line-clamp: 2; |
-webkit-line-clamp: 2; |
||||||
-webkit-box-orient: vertical; |
-webkit-box-orient: vertical; |
||||||
white-space: normal; |
white-space: normal; |
||||||
word-wrap: break-word; |
word-wrap: break-word; |
||||||
word-break: break-all; |
word-break: break-all; |
||||||
height: 2.5*100rpx; |
height: 2.5 * 100rpx; |
||||||
} |
} |
||||||
|
|
||||||
.orderDetail { |
.orderDetail { |
||||||
font-size: 0.26*100rpx; |
font-size: 0.26 * 100rpx; |
||||||
color: #666666; |
color: #666666; |
||||||
text-align: left; |
text-align: left; |
||||||
} |
} |
||||||
|
|
||||||
.border-ceter { |
.border-ceter { |
||||||
width: 92%; |
width: 92%; |
||||||
padding-left: 15px; |
padding-left: 15px; |
||||||
padding-right: 15px; |
padding-right: 15px; |
||||||
} |
} |
||||||
|
|
||||||
.pay-button { |
.pay-button { |
||||||
width: 88%; |
width: 88%; |
||||||
height: 2.6*100rpx; |
height: 2.6 * 100rpx; |
||||||
position: relative; |
position: relative; |
||||||
background-color: red; |
background-color: red; |
||||||
color: white; |
color: white; |
||||||
|
|
||||||
margin-left: 6%; |
margin-left: 6%; |
||||||
} |
} |
||||||
|
|
||||||
ul view { |
ul view { |
||||||
list-style: none; |
list-style: none; |
||||||
font-size: 0.24*100rpx; |
font-size: 0.24 * 100rpx; |
||||||
} |
} |
||||||
|
|
||||||
ul {} |
ul { |
||||||
|
} |
||||||
|
|
||||||
.track-rcol {} |
.track-rcol { |
||||||
|
} |
||||||
|
|
||||||
.track-list { |
.track-list { |
||||||
position: relative; |
position: relative; |
||||||
} |
} |
||||||
|
|
||||||
.track-list view { |
.track-list > view { |
||||||
position: relative; |
position: relative; |
||||||
padding: 0 0 0.5*100rpx 5px; |
padding: 0 0 0.5 * 100rpx 20rpx; |
||||||
line-height: 0.3*100rpx; |
} |
||||||
border-left: 1px solid #d9d9d9; |
.track-list .track-list-item { |
||||||
color: #999; |
position: relative; |
||||||
} |
padding: 0 0 0.5 * 100rpx 20rpx; |
||||||
|
line-height: 0.3 * 100rpx; |
||||||
|
border-left: 1px solid #d9d9d9; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
|
||||||
.track-list view.first { |
.track-list view.first { |
||||||
color: red; |
color: red; |
||||||
padding-top: 0; |
padding-top: 0; |
||||||
width: 100%; |
width: 100%; |
||||||
text-align: left; |
text-align: left; |
||||||
border-left: 1px solid #d9d9d9; |
border-left: 1px solid #d9d9d9; |
||||||
} |
} |
||||||
|
|
||||||
.track-list view.node-icon { |
.track-list view.node-icon { |
||||||
position: absolute; |
position: absolute; |
||||||
left: -6.5px; |
left: -6.5px; |
||||||
border-radius: 50%; |
border-radius: 50%; |
||||||
width: 0.2*100rpx; |
width: 0.2 * 100rpx; |
||||||
height: 0.2*100rpx; |
height: 0.2 * 100rpx; |
||||||
top: 4px; |
top: 4px; |
||||||
background-color: #b2b2b2; |
background-color: #b2b2b2; |
||||||
} |
padding: 0 !important; |
||||||
|
} |
||||||
|
|
||||||
.track-list view.active .node-icon { |
.track-list view.active .node-icon { |
||||||
background-position: 0-72px; |
background-position: 0 -72px; |
||||||
background-color: #ea7c0a; |
background-color: #ea7c0a; |
||||||
width: 0.3*100rpx; |
width: 0.3 * 100rpx; |
||||||
z-index: 2; |
z-index: 2; |
||||||
height: 0.3*100rpx; |
height: 0.3 * 100rpx; |
||||||
position: absolute; |
position: absolute; |
||||||
left: -0.19*100rpx; |
left: -0.19 * 100rpx; |
||||||
top: 0; |
top: 0; |
||||||
border-radius: 50%; |
border-radius: 50%; |
||||||
} |
} |
||||||
|
|
||||||
.track-list view.time { |
.track-list view.time { |
||||||
margin-right: 20px; |
margin-right: 20px; |
||||||
position: relative; |
position: relative; |
||||||
top: 4px; |
top: 4px; |
||||||
display: inline-block; |
display: inline-block; |
||||||
vertical-align: middle; |
vertical-align: middle; |
||||||
color: #999; |
color: #999; |
||||||
width: 100%; |
width: 100%; |
||||||
text-align: left; |
text-align: left; |
||||||
} |
} |
||||||
|
|
||||||
.track-list view.txt { |
.track-list view.txt { |
||||||
position: relative; |
position: relative; |
||||||
display: inline-block; |
display: inline-block; |
||||||
vertical-align: top; |
vertical-align: top; |
||||||
color: #999; |
color: #999; |
||||||
left: 0.2*100rpx; |
left: 0.2 * 100rpx; |
||||||
top: 0.04*100rpx; |
top: 0.04 * 100rpx; |
||||||
} |
} |
||||||
|
|
||||||
.track-list view.first .time { |
.track-list view.first .time { |
||||||
text-align: left; |
text-align: left; |
||||||
width: 94%; |
width: 94%; |
||||||
color: red; |
color: red; |
||||||
} |
} |
||||||
|
|
||||||
.track-list view.first .txt { |
.track-list view.first .txt { |
||||||
color: red; |
color: red; |
||||||
text-align: left; |
text-align: left; |
||||||
width: 94%; |
width: 94%; |
||||||
} |
} |
||||||
|
|
||||||
.track-list view.finall { |
.track-list view.finall { |
||||||
position: relative; |
padding: 0px 0 0.5 * 100rpx 5px; |
||||||
padding: 0px 0 0.5*100rpx 5px; |
line-height: 18px; |
||||||
line-height: 18px; |
border-color: white; |
||||||
border-color: white; |
border-left: 1px solid #ffffff; |
||||||
border-left: 1px solid #ffffff; |
color: #999; |
||||||
color: #999; |
} |
||||||
} |
|
||||||
|
|
||||||
.track-list view.finall .div-spilander { |
.track-list view.finall .div-spilander { |
||||||
width: 1px; |
width: 1px; |
||||||
position: absolute; |
position: absolute; |
||||||
left: -1.5px; |
left: -1.5px; |
||||||
height: 0.5*100rpx; |
height: 0.5 * 100rpx; |
||||||
background-color: #d9d9d9; |
background-color: #d9d9d9; |
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue