|
|
<template>
|
|
|
<layout-app :title="logisticInfo.expressSender">
|
|
|
<div class="logistics-wrapper">
|
|
|
<div class="header">
|
|
|
<img class="step" alt="" :src="stageImgUrl" />
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
<!-- 物流信息 -->
|
|
|
<div v-if="logisticInfo.wayBillCode" class="platform-delivery-info">
|
|
|
<div class="icon-wrapper">
|
|
|
<i />
|
|
|
</div>
|
|
|
<div class="info">
|
|
|
<p>
|
|
|
<span class="label">快递公司:</span>
|
|
|
<span>
|
|
|
<scroll-view
|
|
|
ref="scroll"
|
|
|
:data="detailList"
|
|
|
:options="scrollOption"
|
|
|
@pulling-down="onPullingDown">
|
|
|
<div class="logistics-wrapper">
|
|
|
<div class="header">
|
|
|
<img class="step" alt="" :src="stageImgUrl" />
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
<!-- 物流信息 -->
|
|
|
<div v-if="logisticInfo.wayBillCode" class="platform-delivery-info">
|
|
|
<div class="icon-wrapper">
|
|
|
<i />
|
|
|
</div>
|
|
|
<div class="info">
|
|
|
<p>
|
|
|
<span class="label">快递公司:</span>
|
|
|
<span>
|
|
|
{{ logisticInfo.expressCompanyName }}
|
|
|
</span>
|
|
|
<!-- <span class="platform-info">{{ platformName }}</span> -->
|
|
|
</p>
|
|
|
<p>
|
|
|
<span class="label">快递单号:</span>
|
|
|
<span>
|
|
|
<!-- <span class="platform-info">{{ platformName }}</span> -->
|
|
|
</p>
|
|
|
<p>
|
|
|
<span class="label">快递单号:</span>
|
|
|
<span>
|
|
|
{{ logisticInfo.wayBillCode }}
|
|
|
</span>
|
|
|
<i ref="copy" class="copy"></i>
|
|
|
</p>
|
|
|
<i ref="copy" class="copy"></i>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
class="delivery-detail"
|
|
|
v-for="(detailInfo, i) in detailList"
|
|
|
:key="i"
|
|
|
>
|
|
|
<span class="title">{{ detailInfo.title }}</span>
|
|
|
<time-line :isGoingOn="i === 0" :deliveryList="detailInfo.detailList">
|
|
|
<template v-slot:content="{ detail: { miniFaultConfirm } }">
|
|
|
<div class="judge-content-wrapper" v-if="miniFaultConfirm">
|
|
|
<p class="tip">
|
|
|
<div
|
|
|
class="delivery-detail"
|
|
|
v-for="(detailInfo, i) in detailList"
|
|
|
:key="i"
|
|
|
>
|
|
|
<span class="title">{{ detailInfo.title }}</span>
|
|
|
<time-line :isGoingOn="i === 0" :deliveryList="detailInfo.detailList">
|
|
|
<template v-slot:content="{ detail: { miniFaultConfirm } }">
|
|
|
<div class="judge-content-wrapper" v-if="miniFaultConfirm">
|
|
|
<p class="tip">
|
|
|
<span
|
|
|
:class="[miniFaultConfirm.showBtn ? '' : 'tipTextGray']"
|
|
|
>{{ miniFaultConfirm.text }}</span
|
|
|
>{{ miniFaultConfirm.text }}</span
|
|
|
>
|
|
|
<span v-if="miniFaultConfirm.showBtn">
|
|
|
<span v-if="miniFaultConfirm.showBtn">
|
|
|
,请在<count-down
|
|
|
:leftTime="miniFaultConfirm.leftTime"
|
|
|
:isShowIcon="false"
|
|
|
class="judge-count-down"
|
|
|
/>之前确定是否接受
|
|
|
</span>
|
|
|
</p>
|
|
|
<div class="img-container">
|
|
|
<ul class="img-wrapper">
|
|
|
<li
|
|
|
v-for="(imgUrl, i) in miniFaultConfirm.imageUrls.slice(
|
|
|
</p>
|
|
|
<div class="img-container">
|
|
|
<ul class="img-wrapper">
|
|
|
<li
|
|
|
v-for="(imgUrl, i) in miniFaultConfirm.imageUrls.slice(
|
|
|
0,
|
|
|
3
|
|
|
)"
|
|
|
:key="i"
|
|
|
@click="showBigImage(miniFaultConfirm, i)"
|
|
|
>
|
|
|
<ImageFormat
|
|
|
:data-secc="imgUrl"
|
|
|
:src="imgUrl"
|
|
|
alt=""
|
|
|
:width="70"
|
|
|
:height="70"
|
|
|
/>
|
|
|
</li>
|
|
|
<li v-if="miniFaultConfirm.imageUrls.length > 3">
|
|
|
<Button
|
|
|
class="more"
|
|
|
@click="showBigImage(miniFaultConfirm, 3)"
|
|
|
>查看更多</Button
|
|
|
:key="i"
|
|
|
@click="showBigImage(miniFaultConfirm, i)"
|
|
|
>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="actions-wrapper" v-if="miniFaultConfirm.showBtn">
|
|
|
<Button @click="flawRejectDialog">不接受</Button>
|
|
|
<Button @click="flawAcceptDialog">接受,请发货</Button>
|
|
|
<ImageFormat
|
|
|
:data-secc="imgUrl"
|
|
|
:src="imgUrl"
|
|
|
alt=""
|
|
|
:width="70"
|
|
|
:height="70"
|
|
|
/>
|
|
|
</li>
|
|
|
<li v-if="miniFaultConfirm.imageUrls.length > 3">
|
|
|
<Button
|
|
|
class="more"
|
|
|
@click="showBigImage(miniFaultConfirm, 3)"
|
|
|
>查看更多</Button
|
|
|
>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="actions-wrapper" v-if="miniFaultConfirm.showBtn">
|
|
|
<Button @click="flawRejectDialog">不接受</Button>
|
|
|
<Button @click="flawAcceptDialog">接受,请发货</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</time-line>
|
|
|
</template>
|
|
|
</time-line>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<template slot="pulldown" slot-scope="props">
|
|
|
<div v-if="props.pullDownRefresh"
|
|
|
class="cube-pulldown-wrapper"
|
|
|
:style="props.pullDownStyle">
|
|
|
</div>
|
|
|
</template>
|
|
|
</scroll-view>
|
|
|
</layout-app>
|
|
|
</template>
|
|
|
|
...
|
...
|
@@ -95,6 +107,7 @@ import { createNamespacedHelpers } from "vuex"; |
|
|
import TimeLine from "./components/time-line";
|
|
|
import { expressTypeEnum } from "constants/logistics-constants";
|
|
|
import CountDown from "./components/count-down";
|
|
|
import ScrollView from "components/layout/scroll-view";
|
|
|
import { Button } from "cube-ui";
|
|
|
import Clipboard from "clipboard";
|
|
|
|
...
|
...
|
@@ -106,16 +119,25 @@ export default { |
|
|
components: {
|
|
|
TimeLine,
|
|
|
CountDown,
|
|
|
Button
|
|
|
ScrollView,
|
|
|
Button,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
stageImgUrl: "",
|
|
|
imageUrls: []
|
|
|
stageImgUrl: '',
|
|
|
imageUrls: [],
|
|
|
scrollOption: {
|
|
|
pullDownRefresh: {
|
|
|
threshold: 70,
|
|
|
stop: 90
|
|
|
},
|
|
|
observeDOM: false,
|
|
|
pullUpLoad: false,
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState(["logisticInfo"]),
|
|
|
...mapState(['logisticInfo']),
|
|
|
platformName() {
|
|
|
const { expressType: type } = this.logisticInfo;
|
|
|
|
...
|
...
|
@@ -203,7 +225,6 @@ export default { |
|
|
}).show();
|
|
|
}
|
|
|
},
|
|
|
|
|
|
flawRejectDialog() {
|
|
|
this.$createDialog({
|
|
|
type: "confirm",
|
...
|
...
|
@@ -236,6 +257,9 @@ export default { |
|
|
|
|
|
onCancel: () => {}
|
|
|
}).show();
|
|
|
},
|
|
|
onPullingDown() {
|
|
|
this.fetchLogisticInfo(this.$route.params);
|
|
|
}
|
|
|
},
|
|
|
activated() {
|
...
|
...
|
|