fe / yohoblk-wap · Commits

Go to a project

Authored by 陈轩
Commit dbe4fdfe4e79550cd37ce3dacbdb876a63239d6c 1 parent 983f1827

fix list state

Inline Side-by-side
Showing 5 changed files with 74 additions and 13 deletions
@@ -16,10 +16,10 @@ @@ -16,10 +16,10 @@
16 </div> 16 </div>
17 </li> 17 </li>
18 </ul> 18 </ul>
19 - <p class="cardlist--loading text-center" v-show="inLoading">正在加载...</p>  
20 - <p class="cardlist--end text-center" v-show="atEnd ">--End--</p> 19 + <p class="cardlist--loading text-center" v-show="state === 1">正在加载...</p>
  20 + <p class="cardlist--end text-center" v-show="state === 0 ">--End--</p>
21 21
22 - <div class="empty-tip" v-show="empty"> 22 + <div class="empty-tip" v-show="state === -1">
23 <i class="icon icon-search"></i> 23 <i class="icon icon-search"></i>
24 <p class="empty-tip-cn">未找到相关商品</p> 24 <p class="empty-tip-cn">未找到相关商品</p>
25 <p class="empty-tip-en">Did not find the relevant goods</p> 25 <p class="empty-tip-en">Did not find the relevant goods</p>
@@ -43,7 +43,7 @@ @@ -43,7 +43,7 @@
43 43
44 // 数据 44 // 数据
45 data: Array, 45 data: Array,
46 - empty: Boolean 46 + state: [Number, Object] // -1: 无数据 0: 全部加载完 1: 正在加载
47 }, 47 },
48 computed: { 48 computed: {
49 // 空列表: data.length === 0 49 // 空列表: data.length === 0
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 <i class="icon icon-filter" slot="right" @click="openFilter"></i> 4 <i class="icon icon-filter" slot="right" @click="openFilter"></i>
5 </cheader> 5 </cheader>
6 <order :config="orderConfig" :val="order" v-if="enableOrder"></order> 6 <order :config="orderConfig" :val="order" v-if="enableOrder"></order>
7 - <List :data="productList" :empty="empty"></List> 7 + <List :data="productList" :state="listState"></List>
8 <Filter :config="filterConfig" v-ref:filter></Filter> 8 <Filter :config="filterConfig" v-ref:filter></Filter>
9 </div> 9 </div>
10 </template> 10 </template>
@@ -53,6 +53,23 @@ @@ -53,6 +53,23 @@
53 computed: { 53 computed: {
54 empty: function() { 54 empty: function() {
55 return this.page !== 0 && !this.productList.length; 55 return this.page !== 0 && !this.productList.length;
  56 + },
  57 + listState: function() {
  58 + let state = undefined; // 0: 全部加载完 1: 正在加载
  59 +
  60 + if (!this.page) {
  61 + return;
  62 + }
  63 +
  64 + if (!this.productList.length) {
  65 + return -1;
  66 + } else if (this.page === this.totalPage) {
  67 + return 0;
  68 + } else if (this.inSearching) {
  69 + return 1;
  70 + }
  71 +
  72 + return state;
56 } 73 }
57 }, 74 },
58 components: { 75 components: {
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 <cheader title="新品抢先看"> 3 <cheader title="新品抢先看">
4 <i class="icon icon-filter" slot="right" @click="openFilter"></i> 4 <i class="icon icon-filter" slot="right" @click="openFilter"></i>
5 </cheader> 5 </cheader>
6 - <List :data="productList" :empty="empty"></List> 6 + <List :data="productList" :state="listState"></List>
7 <Filter :config="filterConfig" action="/product/list.json" v-ref:filter></Filter> 7 <Filter :config="filterConfig" action="/product/list.json" v-ref:filter></Filter>
8 </div> 8 </div>
9 </template> 9 </template>
@@ -46,8 +46,22 @@ @@ -46,8 +46,22 @@
46 }; 46 };
47 }, 47 },
48 computed: { 48 computed: {
49 - empty: function() {  
50 - return this.page !== 0 && !this.productList.length; 49 + listState: function() {
  50 + let state = undefined; // 0: 全部加载完 1: 正在加载
  51 +
  52 + if (!this.page) {
  53 + return;
  54 + }
  55 +
  56 + if (!this.productList.length) {
  57 + return -1;
  58 + } else if (this.page === this.totalPage) {
  59 + return 0;
  60 + } else if (this.inSearching) {
  61 + return 1;
  62 + }
  63 +
  64 + return state;
51 } 65 }
52 }, 66 },
53 components: { 67 components: {
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <div> 2 <div>
3 <Order :config="orderConfig" :val="order" v-if="enableOrder"> 3 <Order :config="orderConfig" :val="order" v-if="enableOrder">
4 </Order> 4 </Order>
5 - <List :data="productList" :empty="empty"></List> 5 + <List :data="productList" :state="listState"></List>
6 </div> 6 </div>
7 </template> 7 </template>
8 <script> 8 <script>
@@ -45,9 +45,22 @@ @@ -45,9 +45,22 @@
45 }; 45 };
46 }, 46 },
47 computed: { 47 computed: {
48 - // 无数据  
49 - empty: function() {  
50 - return this.page !== 0 && !this.productList.length; 48 + listState: function() {
  49 + let state = undefined; // 0: 全部加载完 1: 正在加载
  50 +
  51 + if (!this.page) {
  52 + return;
  53 + }
  54 +
  55 + if (!this.productList.length) {
  56 + return -1;
  57 + } else if (this.page === this.totalPage) {
  58 + return 0;
  59 + } else if (this.inSearching) {
  60 + return 1;
  61 + }
  62 +
  63 + return state;
51 } 64 }
52 }, 65 },
53 components: { 66 components: {
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 3
4 <shop-top :shop-info="shopInfo"></shop-top> 4 <shop-top :shop-info="shopInfo"></shop-top>
5 <div :class='{"shop-goods-top": !shopInfo.isBlkShop}'> 5 <div :class='{"shop-goods-top": !shopInfo.isBlkShop}'>
6 - <goods-list :data="productList" :empty="empty"></goods-list> 6 + <goods-list :data="productList" :state="listState"></goods-list>
7 </div> 7 </div>
8 <filter :config="filterConfig" v-ref:filter></filter> 8 <filter :config="filterConfig" v-ref:filter></filter>
9 </template> 9 </template>
@@ -57,6 +57,23 @@ @@ -57,6 +57,23 @@
57 computed: { 57 computed: {
58 empty: function() { 58 empty: function() {
59 return this.page !== 0 && !this.productList.length; 59 return this.page !== 0 && !this.productList.length;
  60 + },
  61 + listState: function() {
  62 + let state = undefined; // 0: 全部加载完 1: 正在加载
  63 +
  64 + if (!this.page) {
  65 + return;
  66 + }
  67 +
  68 + if (!this.productList.length) {
  69 + return -1;
  70 + } else if (this.page === this.totalPage) {
  71 + return 0;
  72 + } else if (this.inSearching) {
  73 + return 1;
  74 + }
  75 +
  76 + return state;
60 } 77 }
61 }, 78 },
62 watch: { 79 watch: {