|
|
@@ -0,0 +1,350 @@
|
|
|
+<template>
|
|
|
+ <view class="detail">
|
|
|
+ <u-navbar title="物流详情" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
|
|
|
+ <!-- 物流信息 -->
|
|
|
+ <view class="detail-info">
|
|
|
+ <view class="detail-info-one" v-for="(item,index) in list" :key="index" @click="jumpPosition(index)"
|
|
|
+ :class="{'aside-active':listIndex === index}">
|
|
|
+ 包裹{{index+1}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="detail-info">
|
|
|
+ <view class="detail-info-title">商品信息</view>
|
|
|
+ <view class="detail-info-content">
|
|
|
+ <view class="detail-info-content-goods">
|
|
|
+ <view class="flex detail-info-content-goods__detail">
|
|
|
+ <view class="detail-info-content-goods__detail__left">
|
|
|
+ <view class="img">
|
|
|
+ <image class="img" :src="list[listIndex].picUrl" mode="aspectFill">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="detail-info-content-goods__detail__right">
|
|
|
+ <view class="ells title">{{ list[listIndex].title }}</view>
|
|
|
+ <view class="sku" v-if="list[listIndex].properties">规格：{{ list[listIndex].properties }}
|
|
|
+ </view>
|
|
|
+ <view class="num">数量：{{ list[listIndex].goodsNum }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="detail-info">
|
|
|
+ <view class="detail-info-content-desc">
|
|
|
+ <view>配送方式：</view>
|
|
|
+ <view>{{ list[listIndex].companyName ? "快递发货" : "无需物流" }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="detail-info-content-desc" v-if="list[listIndex].companyName?true:false">
|
|
|
+ <view>{{ list[listIndex].companyName }}：</view>
|
|
|
+ <view class="copy" @click="copyDeliveryFlowId(list[listIndex].deliveryFlowId)">复制</view>
|
|
|
+ <view>{{ list[listIndex].deliveryFlowId }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="detail-info" v-if="list[listIndex].companyName && logistics!==''?true:false">
|
|
|
+ <u-steps current="1" direction="column" dot>
|
|
|
+ <u-steps-item :desc="item.context" :title="item.status + ' ' + item.time"
|
|
|
+ v-for="(item,index) in logistics">
|
|
|
+ <!-- <text class="slot-icon" slot="icon" v-if="item.status == '签收'">签</text> -->
|
|
|
+ <!-- <text class="slot-icon" slot="icon" v-else-if="item.status == '揽收'">揽</text>
|
|
|
+ <text class="slot-icon" slot="icon" v-else-if="item.status == '在途'">途</text> -->
|
|
|
+ </u-steps-item>
|
|
|
+ </u-steps>
|
|
|
+ </view>
|
|
|
+ <view v-else-if="list[listIndex].companyName?true:false" class="detail-info">
|
|
|
+ <view style="color: #b1b1b1;">
|
|
|
+ 暂无物流信息
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import env from '../../config/env.js'
|
|
|
+ import $http from '@/utils/request.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ info: '',
|
|
|
+ list: [{
|
|
|
+ picUrl: '',
|
|
|
+ deliveryFlowId: '',
|
|
|
+ deliveryId: '',
|
|
|
+ }],
|
|
|
+ orderId: '',
|
|
|
+ deliverList: '',
|
|
|
+ listIndex: 0,
|
|
|
+ logistics: '',
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opthios) {
|
|
|
+ this.orderId = opthios.id
|
|
|
+ this.getDetail()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDetail() {
|
|
|
+ // uni.showLoading({
|
|
|
+ // title: '加载中'
|
|
|
+ // });
|
|
|
+ $http.post('/api/v1/mp/user/deliver/order/detail', {
|
|
|
+ orderId: this.orderId
|
|
|
+ }).then(res => {
|
|
|
+
|
|
|
+ // uni.hideLoading();
|
|
|
+ this.info = res.data
|
|
|
+ res.data.items.forEach(item => {
|
|
|
+ let picUrlArr = item.picUrl.split(',')
|
|
|
+ item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170'
|
|
|
+ })
|
|
|
+ res.data.deliverList && res.data.deliverList.forEach((item) => {
|
|
|
+ item.items.forEach((ele) => {
|
|
|
+ let picUrlArr = ele.picUrl.split(",");
|
|
|
+ ele.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170';
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.deliverList = res.data.deliverList;
|
|
|
+ this.list = res.data.items
|
|
|
+ this.logisticsQuery()
|
|
|
+ }).catch(() => {
|
|
|
+ // uni.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ jumpPosition(index) {
|
|
|
+
|
|
|
+ this.listIndex = index
|
|
|
+ this.logisticsQuery()
|
|
|
+
|
|
|
+ },
|
|
|
+ copyDeliveryFlowId(id) {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: id,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ logisticsQuery() {
|
|
|
+ if (this.list[this.listIndex].deliveryFlowId == "") {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ deliveryFlowId: this.list[this.listIndex].deliveryFlowId,
|
|
|
+ deliveryId: this.list[this.listIndex].deliveryId,
|
|
|
+ }
|
|
|
+ $http.post('/api/v1/mp/logistics/query', data).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.logistics = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scopen>
|
|
|
+ .aside-active {
|
|
|
+ color: #f27120;
|
|
|
+ border-bottom: 2rpx solid #f27120;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .detail {
|
|
|
+ margin: 10rpx;
|
|
|
+ padding-bottom: 160rpx;
|
|
|
+
|
|
|
+ &-state {
|
|
|
+ padding: 28rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ line-height: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-time {
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: #b1b1b1;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-info {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ padding: 20rpx 28rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+
|
|
|
+ &-one {
|
|
|
+ height: 60rpx;
|
|
|
+ padding: 1px;
|
|
|
+ line-height: 60rpx;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ line-height: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-content {
|
|
|
+
|
|
|
+ &-goods {
|
|
|
+
|
|
|
+ &__detail {
|
|
|
+ padding: 20rpx 0;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid rgba(236, 236, 236, 100);
|
|
|
+
|
|
|
+ &__left {
|
|
|
+ display: flex;
|
|
|
+ height: 170rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 170rpx;
|
|
|
+ height: 170rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__right {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ height: 170rpx;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ font-size: 30rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sku {
|
|
|
+ color: #8C8C8C;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ &__detail:last-child {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-money {
|
|
|
+ margin-top: 40rpx;
|
|
|
+
|
|
|
+ &__item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-toatl {
|
|
|
+ padding-top: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-desc {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+
|
|
|
+ view:first-child {
|
|
|
+ width: 150rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ view:last-child {
|
|
|
+ width: calc(100% - 150rpx)
|
|
|
+ }
|
|
|
+
|
|
|
+ .copy {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: -6rpx;
|
|
|
+ width: 136rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(149, 149, 149, 100);
|
|
|
+ border: 1px solid rgba(187, 187, 187, 100);
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-desc:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-deliver {
|
|
|
+ &__detail {
|
|
|
+ padding: 20rpx 0;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid rgba(236, 236, 236, 100);
|
|
|
+
|
|
|
+ &__left {
|
|
|
+ display: flex;
|
|
|
+ height: 170rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 170rpx;
|
|
|
+ height: 170rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__right {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ height: 170rpx;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .num {
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .sku {
|
|
|
+ color: #8C8C8C;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ &__detail:last-child {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .border {
|
|
|
+ border-bottom: 1px solid rgba(236, 236, 236, 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ .border:last-child {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|
