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
1 <template> 1 <template>
2 - <Scroll ref="scroll" class="scroll-view" v-bind="attrMerge" v-on="listenerMerge"> 2 + <Scroll
  3 + ref="scroll"
  4 + class="scroll-view"
  5 + v-bind="attrMerge"
  6 + v-on="listenerMerge"
  7 + >
3 <slot slot="default"></slot> 8 <slot slot="default"></slot>
4 <template slot="pulldown" slot-scope="props"> 9 <template slot="pulldown" slot-scope="props">
5 - <div v-if="props.pullDownRefresh" 10 + <!-- <div
  11 + v-if="props.pullDownRefresh"
6 class="pulldown-wrapper" 12 class="pulldown-wrapper"
7 - :style="props.pullDownStyle"> 13 + :style="props.pullDownStyle"
  14 + >
8 <div class="pulldown-content"> 15 <div class="pulldown-content">
9 <div v-show="props.beforePullDown"> 16 <div v-show="props.beforePullDown">
10 <div id="beforePullDown"></div> 17 <div id="beforePullDown"></div>
@@ -13,37 +20,35 @@ @@ -13,37 +20,35 @@
13 <div id="afterPullDown"></div> 20 <div id="afterPullDown"></div>
14 </div> 21 </div>
15 </div> 22 </div>
16 - </div> 23 + </div> -->
17 </template> 24 </template>
18 </Scroll> 25 </Scroll>
19 </template> 26 </template>
20 27
21 <script> 28 <script>
22 -import {Scroll} from 'cube-ui'; 29 +import { Scroll } from "cube-ui";
23 30
24 export default { 31 export default {
25 - name: 'ScrollView', 32 + name: "ScrollView",
26 mounted() { 33 mounted() {
27 this.$nextTick(() => { 34 this.$nextTick(() => {
28 - this._initLottie(); 35 + // this._initLottie();
29 }); 36 });
30 }, 37 },
31 computed: { 38 computed: {
32 attrMerge() { 39 attrMerge() {
33 - return Object.assign({}, 40 + return Object.assign(
  41 + {},
34 { 42 {
35 - scrollEvents: ['scroll'] 43 + scrollEvents: ["scroll"]
36 }, 44 },
37 - this.$attrs, 45 + this.$attrs
38 ); 46 );
39 }, 47 },
40 listenerMerge() { 48 listenerMerge() {
41 - return Object.assign({},  
42 - this.$listeners,  
43 - {  
44 - scroll: this.onScroll.bind(this)  
45 - }  
46 - ); 49 + return Object.assign({}, this.$listeners, {
  50 + scroll: this.onScroll.bind(this)
  51 + });
47 } 52 }
48 }, 53 },
49 methods: { 54 methods: {
@@ -57,31 +62,31 @@ export default { @@ -57,31 +62,31 @@ export default {
57 this.lottieBefore.goToAndStop(0); 62 this.lottieBefore.goToAndStop(0);
58 } 63 }
59 } 64 }
60 - this.$emit('scroll', pos); 65 + this.$emit("scroll", pos);
61 }, 66 },
62 forceUpdate(dirty) { 67 forceUpdate(dirty) {
63 this.$refs.scroll.forceUpdate(dirty); 68 this.$refs.scroll.forceUpdate(dirty);
64 }, 69 },
65 _initLottie() { 70 _initLottie() {
66 - import(/* webpackChunkName: "lottie-web" */ 'lottie-web').then(lottie => { 71 + import(/* webpackChunkName: "lottie-web" */ "lottie-web").then(lottie => {
67 this.lottieBefore = lottie.loadAnimation({ 72 this.lottieBefore = lottie.loadAnimation({
68 - container: document.getElementById('beforePullDown'), // the dom element that will contain the animation  
69 - renderer: 'svg', 73 + container: document.getElementById("beforePullDown"), // the dom element that will contain the animation
  74 + renderer: "svg",
70 loop: false, 75 loop: false,
71 autoplay: false, 76 autoplay: false,
72 - path: 'https://cdn.yoho.cn/mapp/lottie/ufo-pull-1227.json' // the path to the animation json 77 + path: "https://cdn.yoho.cn/mapp/lottie/ufo-pull-1227.json" // the path to the animation json
73 }); 78 });
74 this.lottieAfter = lottie.loadAnimation({ 79 this.lottieAfter = lottie.loadAnimation({
75 - container: document.getElementById('afterPullDown'), // the dom element that will contain the animation  
76 - renderer: 'svg', 80 + container: document.getElementById("afterPullDown"), // the dom element that will contain the animation
  81 + renderer: "svg",
77 loop: true, 82 loop: true,
78 autoplay: true, 83 autoplay: true,
79 - path: 'https://cdn.yoho.cn/mapp/lottie/ufo-refresh-1227.json' // the path to the animation json 84 + path: "https://cdn.yoho.cn/mapp/lottie/ufo-refresh-1227.json" // the path to the animation json
80 }); 85 });
81 }); 86 });
82 } 87 }
83 }, 88 },
84 - components: {Scroll} 89 + components: { Scroll }
85 }; 90 };
86 </script> 91 </script>
87 92
@@ -4,7 +4,8 @@ @@ -4,7 +4,8 @@
4 ref="scroll" 4 ref="scroll"
5 :data="detailList" 5 :data="detailList"
6 :options="scrollOption" 6 :options="scrollOption"
7 - @pulling-down="onPullingDown"> 7 + @pulling-down="onPullingDown"
  8 + >
8 <div class="logistics-wrapper"> 9 <div class="logistics-wrapper">
9 <div class="header"> 10 <div class="header">
10 <img class="step" alt="" :src="stageImgUrl" /> 11 <img class="step" alt="" :src="stageImgUrl" />
@@ -19,15 +20,15 @@ @@ -19,15 +20,15 @@
19 <p> 20 <p>
20 <span class="label">快递公司:</span> 21 <span class="label">快递公司:</span>
21 <span> 22 <span>
22 - {{ logisticInfo.expressCompanyName }}  
23 - </span> 23 + {{ logisticInfo.expressCompanyName }}
  24 + </span>
24 <!-- <span class="platform-info">{{ platformName }}</span> --> 25 <!-- <span class="platform-info">{{ platformName }}</span> -->
25 </p> 26 </p>
26 <p> 27 <p>
27 <span class="label">快递单号:</span> 28 <span class="label">快递单号:</span>
28 <span> 29 <span>
29 - {{ logisticInfo.wayBillCode }}  
30 - </span> 30 + {{ logisticInfo.wayBillCode }}
  31 + </span>
31 <i ref="copy" class="copy"></i> 32 <i ref="copy" class="copy"></i>
32 </p> 33 </p>
33 </div> 34 </div>
@@ -39,29 +40,32 @@ @@ -39,29 +40,32 @@
39 :key="i" 40 :key="i"
40 > 41 >
41 <span class="title">{{ detailInfo.title }}</span> 42 <span class="title">{{ detailInfo.title }}</span>
42 - <time-line :isGoingOn="i === 0" :deliveryList="detailInfo.detailList"> 43 + <time-line
  44 + :isGoingOn="i === 0"
  45 + :deliveryList="detailInfo.detailList"
  46 + >
43 <template v-slot:content="{ detail: { miniFaultConfirm } }"> 47 <template v-slot:content="{ detail: { miniFaultConfirm } }">
44 <div class="judge-content-wrapper" v-if="miniFaultConfirm"> 48 <div class="judge-content-wrapper" v-if="miniFaultConfirm">
45 <p class="tip"> 49 <p class="tip">
46 - <span  
47 - :class="[miniFaultConfirm.showBtn ? '' : 'tipTextGray']"  
48 - >{{ miniFaultConfirm.text }}</span  
49 - > 50 + <span
  51 + :class="[miniFaultConfirm.showBtn ? '' : 'tipTextGray']"
  52 + >{{ miniFaultConfirm.text }}</span
  53 + >
50 <span v-if="miniFaultConfirm.showBtn"> 54 <span v-if="miniFaultConfirm.showBtn">
51 - ,请在<count-down  
52 - :leftTime="miniFaultConfirm.leftTime"  
53 - :isShowIcon="false"  
54 - class="judge-count-down"  
55 - />之前确定是否接受  
56 - </span> 55 + ,请在<count-down
  56 + :leftTime="miniFaultConfirm.leftTime"
  57 + :isShowIcon="false"
  58 + class="judge-count-down"
  59 + />之前确定是否接受
  60 + </span>
57 </p> 61 </p>
58 <div class="img-container"> 62 <div class="img-container">
59 <ul class="img-wrapper"> 63 <ul class="img-wrapper">
60 <li 64 <li
61 v-for="(imgUrl, i) in miniFaultConfirm.imageUrls.slice( 65 v-for="(imgUrl, i) in miniFaultConfirm.imageUrls.slice(
62 - 0,  
63 - 3  
64 - )" 66 + 0,
  67 + 3
  68 + )"
65 :key="i" 69 :key="i"
66 @click="showBigImage(miniFaultConfirm, i)" 70 @click="showBigImage(miniFaultConfirm, i)"
67 > 71 >
@@ -77,7 +81,7 @@ @@ -77,7 +81,7 @@
77 <Button 81 <Button
78 class="more" 82 class="more"
79 @click="showBigImage(miniFaultConfirm, 3)" 83 @click="showBigImage(miniFaultConfirm, 3)"
80 - >查看更多</Button 84 + >查看更多</Button
81 > 85 >
82 </li> 86 </li>
83 </ul> 87 </ul>
@@ -92,12 +96,13 @@ @@ -92,12 +96,13 @@
92 </div> 96 </div>
93 </div> 97 </div>
94 </div> 98 </div>
95 - <template slot="pulldown" slot-scope="props">  
96 - <div v-if="props.pullDownRefresh"  
97 - class="cube-pulldown-wrapper"  
98 - :style="props.pullDownStyle">  
99 - </div>  
100 - </template> 99 + <!-- <template slot="pulldown" slot-scope="props">
  100 + <div
  101 + v-if="props.pullDownRefresh"
  102 + class="cube-pulldown-wrapper"
  103 + :style="props.pullDownStyle"
  104 + ></div>
  105 + </template> -->
101 </scroll-view> 106 </scroll-view>
102 </layout-app> 107 </layout-app>
103 </template> 108 </template>
@@ -120,24 +125,25 @@ export default { @@ -120,24 +125,25 @@ export default {
120 TimeLine, 125 TimeLine,
121 CountDown, 126 CountDown,
122 ScrollView, 127 ScrollView,
123 - Button, 128 + Button
124 }, 129 },
125 data() { 130 data() {
126 return { 131 return {
127 - stageImgUrl: '', 132 + stageImgUrl: "",
128 imageUrls: [], 133 imageUrls: [],
129 scrollOption: { 134 scrollOption: {
130 pullDownRefresh: { 135 pullDownRefresh: {
131 threshold: 70, 136 threshold: 70,
132 - stop: 90 137 + stop: 90,
  138 + txt: "更新成功"
133 }, 139 },
134 observeDOM: false, 140 observeDOM: false,
135 - pullUpLoad: false,  
136 - }, 141 + pullUpLoad: false
  142 + }
137 }; 143 };
138 }, 144 },
139 computed: { 145 computed: {
140 - ...mapState(['logisticInfo']), 146 + ...mapState(["logisticInfo"]),
141 platformName() { 147 platformName() {
142 const { expressType: type } = this.logisticInfo; 148 const { expressType: type } = this.logisticInfo;
143 149
@@ -291,10 +297,6 @@ export default { @@ -291,10 +297,6 @@ export default {
291 297
292 <style lang="scss" scoped> 298 <style lang="scss" scoped>
293 .logistics-wrapper { 299 .logistics-wrapper {
294 - height: calc(100vh - 90px);  
295 - -webkit-box-orient: vertical;  
296 - overflow-x: auto;  
297 -  
298 /deep/ .time-line-wrapper .time-line-item { 300 /deep/ .time-line-wrapper .time-line-item {
299 padding-right: 0; 301 padding-right: 0;
300 } 302 }
@@ -348,7 +350,7 @@ export default { @@ -348,7 +350,7 @@ export default {
348 350
349 .judge-count-down { 351 .judge-count-down {
350 color: #d0021b; 352 color: #d0021b;
351 - font-size: 12*2px; 353 + font-size: 12 * 2px;
352 display: inline-block; 354 display: inline-block;
353 } 355 }
354 356