Authored by baoss

Merge branch 'develop' of git.yoho.cn:fe/xianyu-ufo-app-web into develop

@@ -100,7 +100,8 @@ export default { @@ -100,7 +100,8 @@ export default {
100 100
101 .layout-context { 101 .layout-context {
102 flex: 1; 102 flex: 1;
103 - overflow: hidden; 103 + overflow-x: hidden;
  104 + overflow-y: auto;
104 position: relative; 105 position: relative;
105 } 106 }
106 107
1 <template> 1 <template>
2 <div class="layout-scroll"> 2 <div class="layout-scroll">
3 <div class="layout-scroll-main" ref="scroll"> 3 <div class="layout-scroll-main" ref="scroll">
4 - <slot></slot> 4 + <div class="scroll-body" :style="{'minHeight': wrapHeight + 'px'}">
  5 + <slot></slot>
  6 + </div>
5 <div v-if="loading && !loading.hide" class="loading"> 7 <div v-if="loading && !loading.hide" class="loading">
6 - <p v-if="loading.noMore" class="load-text">没有更多了</p> 8 + <p v-if="loading.noMore" class="load-text">{{loading.noMoreText || '没有更多了'}}</p>
7 <Loading v-else :size="20"></Loading> 9 <Loading v-else :size="20"></Loading>
8 </div> 10 </div>
9 </div> 11 </div>
@@ -20,13 +22,16 @@ export default { @@ -20,13 +22,16 @@ export default {
20 name: 'LayoutScroll', 22 name: 'LayoutScroll',
21 data() { 23 data() {
22 return { 24 return {
23 - noMore: false 25 + noMore: false,
  26 + wrapHeight: 0,
24 }; 27 };
25 }, 28 },
26 props: { 29 props: {
27 loading: Object 30 loading: Object
28 }, 31 },
29 mounted() { 32 mounted() {
  33 + this.wrapHeight = this.$el.offsetHeight;
  34 +
30 this._forceUpdate = throttle(this.forceUpdate.bind(this), 500); 35 this._forceUpdate = throttle(this.forceUpdate.bind(this), 500);
31 this._onPullingUp = throttle(this.onPullingUp.bind(this), 1000); 36 this._onPullingUp = throttle(this.onPullingUp.bind(this), 1000);
32 37
@@ -18,10 +18,9 @@ @@ -18,10 +18,9 @@
18 </Scroll> 18 </Scroll>
19 </div> 19 </div>
20 <div class="right-content"> 20 <div class="right-content">
21 - <Scroll ref="subScroll"  
22 - :scroll-events="scrollEvents"  
23 - @scroll-end="onScrollEndHandler"  
24 - > 21 + <layoutScroll ref="subScroll"
  22 + @scroll-end="onScrollEndHandler"
  23 + >
25 <div v-for="(itemSub, index) in categorySubList" :key="index"> 24 <div v-for="(itemSub, index) in categorySubList" :key="index">
26 <CategoryTitle>{{itemSub.name}}</CategoryTitle> 25 <CategoryTitle>{{itemSub.name}}</CategoryTitle>
27 <div class="category-sub-root" :class="'sub-type-' + itemSub.type"> 26 <div class="category-sub-root" :class="'sub-type-' + itemSub.type">
@@ -44,14 +43,13 @@ @@ -44,14 +43,13 @@
44 </div> 43 </div>
45 </div> 44 </div>
46 </div> 45 </div>
47 - </Scroll> 46 + </layoutScroll>
48 </div> 47 </div>
49 48
50 </div> 49 </div>
51 </LayoutApp> 50 </LayoutApp>
52 </template> 51 </template>
53 <script> 52 <script>
54 -import { Scroll } from 'cube-ui';  
55 import { createNamespacedHelpers } from 'vuex'; 53 import { createNamespacedHelpers } from 'vuex';
56 import Vue from 'vue'; 54 import Vue from 'vue';
57 55
@@ -63,7 +61,6 @@ export default { @@ -63,7 +61,6 @@ export default {
63 name: 'category', 61 name: 'category',
64 props: ['hideHeader'], 62 props: ['hideHeader'],
65 components: { 63 components: {
66 - Scroll,  
67 ImgSize, 64 ImgSize,
68 CategoryTitle 65 CategoryTitle
69 }, 66 },
1 <template> 1 <template>
2 <LayoutApp :show-back="true"> 2 <LayoutApp :show-back="true">
3 <div class="scroll-list-wrap"> 3 <div class="scroll-list-wrap">
4 - <Scroll 4 + <LayoutScroll
5 ref="scroll" 5 ref="scroll"
6 - :options="options"  
7 - @pulling-up="onPullingUp"  
8 - :data="newsList.list"> 6 + :loading="loadingOptions"
  7 + @pulling-up="onPullingUp">
9 <div class="news-content"> 8 <div class="news-content">
10 <Title :title="title"></Title> 9 <Title :title="title"></Title>
11 <List v-if="newsList.list && newsList.list.length > 0" :list="newsList.list || []"></List> 10 <List v-if="newsList.list && newsList.list.length > 0" :list="newsList.list || []"></List>
12 <UfoNoItem v-else :tip="`暂无数据`" style="margin-top: 60px"></UfoNoItem> 11 <UfoNoItem v-else :tip="`暂无数据`" style="margin-top: 60px"></UfoNoItem>
13 </div> 12 </div>
14 - </Scroll> 13 + </LayoutScroll>
15 </div> 14 </div>
16 </LayoutApp> 15 </LayoutApp>
17 </template> 16 </template>
@@ -49,6 +48,12 @@ export default { @@ -49,6 +48,12 @@ export default {
49 return { 48 return {
50 pullUpLoad: this.newsList.list.length > 0 ? true : false, 49 pullUpLoad: this.newsList.list.length > 0 ? true : false,
51 } 50 }
  51 + },
  52 + loadingOptions() {
  53 + return {
  54 + hide: !this.newsList.list || !this.newsList.list.length,
  55 + noMore: !this.newsList.isMoreData
  56 + };
52 } 57 }
53 // options: { 58 // options: {
54 // // pullUpLoad: { 59 // // pullUpLoad: {
@@ -89,7 +94,7 @@ export default { @@ -89,7 +94,7 @@ export default {
89 94
90 async onPullingUp() { 95 async onPullingUp() {
91 if (!this.newsList.isMoreData) { 96 if (!this.newsList.isMoreData) {
92 - this.$refs.scroll.forceUpdate() 97 + this.$refs.scroll.forceUpdate()
93 return; 98 return;
94 } 99 }
95 this.fetchList(this.params); 100 this.fetchList(this.params);
@@ -20,9 +20,6 @@ @@ -20,9 +20,6 @@
20 </div> 20 </div>
21 <LayoutScroll ref="scroll" class="product-list" v-show="!productList.isEmpty" 21 <LayoutScroll ref="scroll" class="product-list" v-show="!productList.isEmpty"
22 :loading="loadingOption" 22 :loading="loadingOption"
23 - :scroll-events="['scroll', 'scroll-end']"  
24 - :options="scrollOptions"  
25 - :data="productList.list"  
26 @scroll="scrollHandler" 23 @scroll="scrollHandler"
27 @scroll-end="scrollEndHandler" 24 @scroll-end="scrollEndHandler"
28 @pulling-up="onPullingUp"> 25 @pulling-up="onPullingUp">
@@ -124,6 +121,7 @@ export default { @@ -124,6 +121,7 @@ export default {
124 ...mapState(['yoho']), 121 ...mapState(['yoho']),
125 loadingOption() { 122 loadingOption() {
126 return { 123 return {
  124 + hide: !this.productList.list || !this.productList.list.length,
127 noMore: this.productList && this.productList.endReached 125 noMore: this.productList && this.productList.endReached
128 }; 126 };
129 }, 127 },
@@ -316,8 +314,9 @@ export default { @@ -316,8 +314,9 @@ export default {
316 314
317 <style scoped> 315 <style scoped>
318 .filter { 316 .filter {
319 - display: flex; 317 + width: 100%;
320 height: 120px; 318 height: 120px;
  319 + display: flex;
321 flex-direction: row; 320 flex-direction: row;
322 justify-content: space-between; 321 justify-content: space-between;
323 align-items: center; 322 align-items: center;
@@ -325,7 +324,8 @@ export default { @@ -325,7 +324,8 @@ export default {
325 padding-right: 38px; 324 padding-right: 38px;
326 z-index: 999; 325 z-index: 999;
327 background: #fff; 326 background: #fff;
328 - position: relative; 327 + position: absolute;
  328 + z-index: 1;
329 } 329 }
330 330
331 .filter-tab { 331 .filter-tab {
@@ -387,8 +387,14 @@ export default { @@ -387,8 +387,14 @@ export default {
387 } 387 }
388 388
389 .product-list { 389 .product-list {
  390 + width: 100%;
390 background: #f5f5f5; 391 background: #f5f5f5;
391 - height: calc(100% - 120px); 392 + padding-top: 120px;
  393 + box-sizing: border-box;
  394 + position: absolute;
  395 + z-index: 0;
  396 + top: 0;
  397 + bottom: 0;
392 } 398 }
393 399
394 .search-img { 400 .search-img {
1 <template> 1 <template>
2 <div class="product-wrapper"> 2 <div class="product-wrapper">
3 - <ImageFormat :src="data.goodImg" width="90" height="90"></ImageFormat>  
4 - 3 + <div class="good-image">
  4 + <ImageFormat :src="data.goodImg" :width="180" :height="180"></ImageFormat>
  5 + </div>
5 <div class="product-price"> 6 <div class="product-price">
6 <div class="red">¥{{data.goodPrice}}</div> 7 <div class="red">¥{{data.goodPrice}}</div>
7 <div class="product-name">{{data.productName}}</div> 8 <div class="product-name">{{data.productName}}</div>
@@ -30,6 +31,16 @@ export default { @@ -30,6 +31,16 @@ export default {
30 height: 180px; 31 height: 180px;
31 } 32 }
32 33
  34 +.good-image {
  35 + width: 180px;
  36 + height: 180px;
  37 + overflow: hidden;
  38 + img {
  39 + width: 100%;
  40 + display: block;
  41 + }
  42 +}
  43 +
33 .product-price { 44 .product-price {
34 display: inline-block; 45 display: inline-block;
35 vertical-align: top; 46 vertical-align: top;
1 <template> 1 <template>
2 <div class="product-wrapper"> 2 <div class="product-wrapper">
3 - <ImageFormat :src="data.goodImg" width="120" height="120"></ImageFormat>  
4 - 3 + <div class="good-image">
  4 + <ImageFormat :src="data.goodImg" :width="240" :height="240"></ImageFormat>
  5 + </div>
5 <div class="product-price"> 6 <div class="product-price">
6 <div class="product-price-wrapper"> 7 <div class="product-price-wrapper">
7 <div class="price">{{data.colorName}},{{data.sizeName}}</div> 8 <div class="price">{{data.colorName}},{{data.sizeName}}</div>
@@ -33,6 +34,16 @@ export default { @@ -33,6 +34,16 @@ export default {
33 overflow: hidden; 34 overflow: hidden;
34 } 35 }
35 36
  37 +.good-image {
  38 + width: 240px;
  39 + height: 240px;
  40 + overflow: hidden;
  41 + img {
  42 + width: 100%;
  43 + display: block;
  44 + }
  45 +}
  46 +
36 .product-price { 47 .product-price {
37 display: flex; 48 display: flex;
38 height: 100%; 49 height: 100%;
@@ -3,13 +3,13 @@ @@ -3,13 +3,13 @@
3 :title="$route.params.owner === 'sell' ? '我的出售' : '我的购买订单'" 3 :title="$route.params.owner === 'sell' ? '我的出售' : '我的购买订单'"
4 class="list-page" 4 class="list-page"
5 > 5 >
6 - <status-nav :status="status" :owner="owner" @select="onStatusChange"/> 6 + <status-nav class="order-status-nav" :status="status" :owner="owner" @select="onStatusChange"/>
7 <div class="content-wrapper"> 7 <div class="content-wrapper">
8 - <scroll 8 + <LayoutScroll
  9 + @scroll="scrollHandler"
9 @pulling-up="fetchData" 10 @pulling-up="fetchData"
10 @pulling-down="onRefresh" 11 @pulling-down="onRefresh"
11 - :options="options"  
12 - :data="viewOrderList" 12 + :loading="loadingOptions"
13 class="order-list-scroll-wrap" 13 class="order-list-scroll-wrap"
14 ref="scroll" 14 ref="scroll"
15 > 15 >
@@ -48,13 +48,12 @@ @@ -48,13 +48,12 @@
48 tip="这里什么都没有..." 48 tip="这里什么都没有..."
49 v-show="orderStatus.isShowEmpty" 49 v-show="orderStatus.isShowEmpty"
50 /> 50 />
51 - </scroll> 51 + </LayoutScroll>
52 </div> 52 </div>
53 </layout-app> 53 </layout-app>
54 </template> 54 </template>
55 55
56 <script> 56 <script>
57 -import { Scroll } from 'cube-ui';  
58 import { createNamespacedHelpers } from 'vuex'; 57 import { createNamespacedHelpers } from 'vuex';
59 58
60 import OrderItem from './components/order-item'; 59 import OrderItem from './components/order-item';
@@ -81,7 +80,6 @@ export default { @@ -81,7 +80,6 @@ export default {
81 // 订单操作 80 // 订单操作
82 mixins: [orderActionMixin, orderInSaleActionMixin], 81 mixins: [orderActionMixin, orderInSaleActionMixin],
83 components: { 82 components: {
84 - Scroll,  
85 OrderItem, 83 OrderItem,
86 StatusNav, 84 StatusNav,
87 OrderItemHeader, 85 OrderItemHeader,
@@ -90,6 +88,11 @@ export default { @@ -90,6 +88,11 @@ export default {
90 CountDown, 88 CountDown,
91 VideoPlayer 89 VideoPlayer
92 }, 90 },
  91 + data() {
  92 + return {
  93 + scrollY: 0
  94 + }
  95 + },
93 props: { 96 props: {
94 owner: String, 97 owner: String,
95 status: Number 98 status: Number
@@ -102,18 +105,16 @@ export default { @@ -102,18 +105,16 @@ export default {
102 viewOrderList() { 105 viewOrderList() {
103 return this.orderStatus.orderList; 106 return this.orderStatus.orderList;
104 }, 107 },
105 - options() {  
106 - const options = {  
107 - pullUpLoad: this.orderStatus.pullUpLoad,  
108 - bounce: !this.orderStatus.isShowEmpty 108 + loadingOptions() {
  109 + return {
  110 + hide: !this.viewOrderList || !this.viewOrderList.length,
  111 + noMore: this.orderStatus.page >= this.orderStatus.pagetotal
109 }; 112 };
110 - // if (this.$refs.scroll && this.$refs.scroll.scroll) {  
111 - options.pullDownRefresh = this.orderStatus.isShowEmpty  
112 - ? false  
113 - : { txt: '更新成功' };  
114 - // }  
115 -  
116 - return options; 113 + }
  114 + },
  115 + activated() {
  116 + if (this.yoho.direction === 'back') {
  117 + this.scrollY && this.$refs.scroll.scrollTo(this.scrollY);
117 } 118 }
118 }, 119 },
119 120
@@ -129,6 +130,9 @@ export default { @@ -129,6 +130,9 @@ export default {
129 methods: { 130 methods: {
130 ...mapActions(['fetchOrderList', 'confirmReceipt']), 131 ...mapActions(['fetchOrderList', 'confirmReceipt']),
131 ...mapMutations(['resetData']), 132 ...mapMutations(['resetData']),
  133 + scrollHandler({y}) {
  134 + this.scrollY = -y;
  135 + },
132 fetchData() { 136 fetchData() {
133 this.fetchOrderList({ 137 this.fetchOrderList({
134 owner: this.owner, 138 owner: this.owner,
@@ -170,9 +174,15 @@ export default { @@ -170,9 +174,15 @@ export default {
170 flex-direction: column; 174 flex-direction: column;
171 } 175 }
172 176
  177 +.order-status-nav {
  178 + position: absolute;
  179 + top: 0;
  180 + left: 0;
  181 + right: 0;
  182 +}
  183 +
173 .content-wrapper { 184 .content-wrapper {
174 flex: 1 0 0; 185 flex: 1 0 0;
175 - overflow: hidden;  
176 186
177 .footer-wrapper { 187 .footer-wrapper {
178 display: flex; 188 display: flex;
@@ -188,6 +198,13 @@ export default { @@ -188,6 +198,13 @@ export default {
188 } 198 }
189 199
190 .order-list-scroll-wrap { 200 .order-list-scroll-wrap {
  201 + width: 100%;
  202 + padding-top: 100px;
  203 + box-sizing: border-box;
  204 + position: absolute;
  205 + top: 0;
  206 + bottom: 0;
  207 +
191 .list-wrapper { 208 .list-wrapper {
192 li { 209 li {
193 padding: 40px 40px 0; 210 padding: 40px 40px 0;
@@ -61,10 +61,7 @@ export default { @@ -61,10 +61,7 @@ export default {
61 title: '订单', 61 title: '订单',
62 classes: {}, 62 classes: {},
63 scrollOption: { 63 scrollOption: {
64 - pullDownRefresh: {  
65 - threshold: 70,  
66 - stop: 90  
67 - }, 64 + pullDownRefresh: false,
68 observeDOM: false, 65 observeDOM: false,
69 pullUpLoad: false // 关闭了上拉加载 66 pullUpLoad: false // 关闭了上拉加载
70 }, 67 },
@@ -84,8 +81,6 @@ export default { @@ -84,8 +81,6 @@ export default {
84 ...mapState(['productInfo', 'skcs']), 81 ...mapState(['productInfo', 'skcs']),
85 }, 82 },
86 beforeRouteLeave(from, to, next) { 83 beforeRouteLeave(from, to, next) {
87 - console.log('from', from);  
88 - console.log('to', to);  
89 this.$refs.modalPrice.hide(); 84 this.$refs.modalPrice.hide();
90 next(); 85 next();
91 }, 86 },
1 <template> 1 <template>
2 <div class="size-list"> 2 <div class="size-list">
3 - <cube-scroll ref="sizeselectScroll" :data="viewList"> 3 + <cube-scroll ref="sizeselectScroll" class="size-scroll" :data="viewList">
4 <ul> 4 <ul>
5 <li v-for="(info, idx) in viewList" 5 <li v-for="(info, idx) in viewList"
6 :key="idx" 6 :key="idx"
@@ -203,6 +203,7 @@ export default { @@ -203,6 +203,7 @@ export default {
203 203
204 .size-list { 204 .size-list {
205 overflow: auto; 205 overflow: auto;
  206 + position: relative;
206 207
207 ul { 208 ul {
208 padding-bottom: 1px; 209 padding-bottom: 1px;
@@ -221,6 +222,13 @@ export default { @@ -221,6 +222,13 @@ export default {
221 } 222 }
222 } 223 }
223 224
  225 + .size-scroll {
  226 + width: 100%;
  227 + position: absolute;
  228 + top: 0;
  229 + bottom: 0;
  230 + }
  231 +
224 li { 232 li {
225 box-sizing: border-box; 233 box-sizing: border-box;
226 width: 25%; // 当前固定为4列 234 width: 25%; // 当前固定为4列
@@ -124,20 +124,20 @@ @@ -124,20 +124,20 @@
124 124
125 function isWeiXinAndIos() { 125 function isWeiXinAndIos() {
126 // window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息,这个属性可以用来判断浏览器类型 126 // window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息,这个属性可以用来判断浏览器类型
127 - let ua = '' + window.navigator.userAgent.toLowerCase() 127 + var ua = '' + window.navigator.userAgent.toLowerCase()
128 // 通过正则表达式匹配ua中是否含有MicroMessenger字符串且是IOS系统 128 // 通过正则表达式匹配ua中是否含有MicroMessenger字符串且是IOS系统
129 - let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua) // 是IOS系统 129 + var isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua) // 是IOS系统
130 return isIos 130 return isIos
131 } 131 }
132 132
133 (function() { 133 (function() {
134 - let myFunction  
135 - let isWXAndIos = isWeiXinAndIos() 134 + var myFunction
  135 + var isWXAndIos = isWeiXinAndIos()
136 if (isWXAndIos) { // 既是微信浏览器 又是ios============(因为查到只有在微信环境下,ios手机上才会出现input失去焦点的时候页面被顶起) 136 if (isWXAndIos) { // 既是微信浏览器 又是ios============(因为查到只有在微信环境下,ios手机上才会出现input失去焦点的时候页面被顶起)
137 - document.body.addEventListener('focusin', () => { // 软键盘弹起事件  
138 - clearTimeout(myFunction); 137 + document.body.addEventListener('focusin', function() { // 软键盘弹起事件
  138 + clearTimeout(myFunction);
139 }); 139 });
140 - document.body.addEventListener('focusout', () => { // 软键盘关闭事件 140 + document.body.addEventListener('focusout', function() { // 软键盘关闭事件
141 clearTimeout(myFunction) 141 clearTimeout(myFunction)
142 myFunction = setTimeout(function() { 142 myFunction = setTimeout(function() {
143 window.scrollTo({top: 0, left: 0, behavior: 'smooth'})// 重点 =======当键盘收起的时候让页面回到原始位置 143 window.scrollTo({top: 0, left: 0, behavior: 'smooth'})// 重点 =======当键盘收起的时候让页面回到原始位置
@@ -145,6 +145,8 @@ @@ -145,6 +145,8 @@
145 }); 145 });
146 } 146 }
147 })(); 147 })();
  148 +
  149 + window.appBaseLogs = {events: [{}]};
148 }, 500); 150 }, 500);
149 151
150 </script> 152 </script>