fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by lea guo
Commit 93b96a209c1aabfac44d65e7ca0d4245131fb296 1 parent b5f029e1

物流详情： 修复信息展示hidden、禁掉下拉动画

Inline Side-by-side
Showing 2 changed files with 69 additions and 62 deletions
<template>
<Scroll ref="scroll" class="scroll-view" v-bind="attrMerge" v-on="listenerMerge">
<Scroll
ref="scroll"
class="scroll-view"
v-bind="attrMerge"
v-on="listenerMerge"
>
<slot slot="default"></slot>
<template slot="pulldown" slot-scope="props">
<div v-if="props.pullDownRefresh"
<!-- <div
v-if="props.pullDownRefresh"
class="pulldown-wrapper"
:style="props.pullDownStyle">
:style="props.pullDownStyle"
>
<div class="pulldown-content">
<div v-show="props.beforePullDown">
<div id="beforePullDown"></div>
... ... @@ -13,37 +20,35 @@
<div id="afterPullDown"></div>
</div>
</div>
</div>
</div> -->
</template>
</Scroll>
</template>
<script>
import {Scroll} from 'cube-ui';
import { Scroll } from "cube-ui";
export default {
name: 'ScrollView',
name: "ScrollView",
mounted() {
this.$nextTick(() => {
this._initLottie();
// this._initLottie();
});
},
computed: {
attrMerge() {
return Object.assign({},
return Object.assign(
{},
{
scrollEvents: ['scroll']
scrollEvents: ["scroll"]
},
this.$attrs,
this.$attrs
);
},
listenerMerge() {
return Object.assign({},
this.$listeners,
{
scroll: this.onScroll.bind(this)
}
);
return Object.assign({}, this.$listeners, {
scroll: this.onScroll.bind(this)
});
}
},
methods: {
... ... @@ -57,31 +62,31 @@ export default {
this.lottieBefore.goToAndStop(0);
}
}
this.$emit('scroll', pos);
this.$emit("scroll", pos);
},
forceUpdate(dirty) {
this.$refs.scroll.forceUpdate(dirty);
},
_initLottie() {
import(/* webpackChunkName: "lottie-web" */ 'lottie-web').then(lottie => {
import(/* webpackChunkName: "lottie-web" */ "lottie-web").then(lottie => {
this.lottieBefore = lottie.loadAnimation({
container: document.getElementById('beforePullDown'), // the dom element that will contain the animation
renderer: 'svg',
container: document.getElementById("beforePullDown"), // the dom element that will contain the animation
renderer: "svg",
loop: false,
autoplay: false,
path: 'https://cdn.yoho.cn/mapp/lottie/ufo-pull-1227.json' // the path to the animation json
path: "https://cdn.yoho.cn/mapp/lottie/ufo-pull-1227.json" // the path to the animation json
});
this.lottieAfter = lottie.loadAnimation({
container: document.getElementById('afterPullDown'), // the dom element that will contain the animation
renderer: 'svg',
container: document.getElementById("afterPullDown"), // the dom element that will contain the animation
renderer: "svg",
loop: true,
autoplay: true,
path: 'https://cdn.yoho.cn/mapp/lottie/ufo-refresh-1227.json' // the path to the animation json
path: "https://cdn.yoho.cn/mapp/lottie/ufo-refresh-1227.json" // the path to the animation json
});
});
}
},
components: {Scroll}
components: { Scroll }
};
</script>
... ...
... ... @@ -4,7 +4,8 @@
ref="scroll"
:data="detailList"
:options="scrollOption"
@pulling-down="onPullingDown">
@pulling-down="onPullingDown"
>
<div class="logistics-wrapper">
<div class="header">
<img class="step" alt="" :src="stageImgUrl" />
... ... @@ -19,15 +20,15 @@
<p>
<span class="label">快递公司:</span>
<span>
{{ logisticInfo.expressCompanyName }}
</span>
{{ logisticInfo.expressCompanyName }}
</span>
<!-- <span class="platform-info">{{ platformName }}</span> -->
</p>
<p>
<span class="label">快递单号:</span>
<span>
{{ logisticInfo.wayBillCode }}
</span>
{{ logisticInfo.wayBillCode }}
</span>
<i ref="copy" class="copy"></i>
</p>
</div>
... ... @@ -39,29 +40,32 @@
:key="i"
>
<span class="title">{{ detailInfo.title }}</span>
<time-line :isGoingOn="i === 0" :deliveryList="detailInfo.detailList">
<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
>
<span
:class="[miniFaultConfirm.showBtn ? '' : 'tipTextGray']"
>{{ miniFaultConfirm.text }}</span
>
<span v-if="miniFaultConfirm.showBtn">
,请在<count-down
:leftTime="miniFaultConfirm.leftTime"
:isShowIcon="false"
class="judge-count-down"
/>之前确定是否接受
</span>
,请在<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(
0,
3
)"
0,
3
)"
:key="i"
@click="showBigImage(miniFaultConfirm, i)"
>
... ... @@ -77,7 +81,7 @@
<Button
class="more"
@click="showBigImage(miniFaultConfirm, 3)"
>查看更多</Button
>查看更多</Button
>
</li>
</ul>
... ... @@ -92,12 +96,13 @@
</div>
</div>
</div>
<template slot="pulldown" slot-scope="props">
<div v-if="props.pullDownRefresh"
class="cube-pulldown-wrapper"
:style="props.pullDownStyle">
</div>
</template>
<!-- <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>
... ... @@ -120,24 +125,25 @@ export default {
TimeLine,
CountDown,
ScrollView,
Button,
Button
},
data() {
return {
stageImgUrl: '',
stageImgUrl: "",
imageUrls: [],
scrollOption: {
pullDownRefresh: {
threshold: 70,
stop: 90
stop: 90,
txt: "更新成功"
},
observeDOM: false,
pullUpLoad: false,
},
pullUpLoad: false
}
};
},
computed: {
...mapState(['logisticInfo']),
...mapState(["logisticInfo"]),
platformName() {
const { expressType: type } = this.logisticInfo;
... ... @@ -291,10 +297,6 @@ export default {
<style lang="scss" scoped>
.logistics-wrapper {
height: calc(100vh - 90px);
-webkit-box-orient: vertical;
overflow-x: auto;
/deep/ .time-line-wrapper .time-line-item {
padding-right: 0;
}
... ... @@ -348,7 +350,7 @@ export default {
.judge-count-down {
color: #d0021b;
font-size: 12*2px;
font-size: 12 * 2px;
display: inline-block;
}
... ...