优选库——优选页面，下部商品瀑布流，完成~

王强
1 parent 61b3c79c
Showing 2 changed files with 123 additions and 2 deletions
src/pages/discountList/discountList.vue
src/pages/optimization2/optimization2.vue
@@ -70,7 +70,7 @@
                         :discountType="tabs.list[tabs.active].discountType">
  
                         <!-- 折扣角标 -->
-                        <div class="discount-flag" slot="flag" v-if="tabs.list[tabs.active].type == '0' && (parseFloat(item.price) < parseFloat(item.prices))">
+                        <div class="discount-flag" slot="flag" v-if="tabs.list[tabs.active].type == '0' && (item.tag || (parseFloat(item.price) < parseFloat(item.prices)))">
                             {{item.tag || getDiscount(item.price, item.prices)}}
                         </div>
                     </goods-item-8>
@@ -136,6 +136,27 @@
                     com="7">
                 </column-list-box>
             </div>
+
+            <!-- 推荐（瀑布流） -->
+            <div class="section goods-list">
+
+                <!-- 标题 -->
+                <text-title-box
+                    :titles="{
+                        title: '推荐'
+                    }">
+                </text-title-box>
+
+                <!-- 上拉加载 -->
+                <van-list class="column-list-container" v-model="shopGoodsLists.loading" :finished="shopGoodsLists.finished" finished-text="没有更多了" @load="loadMore">
+
+                    <!-- 商品样式 7 列表 -->
+                    <column-list-box class="column-list-box" v-if="shopGoodsLists && shopGoodsLists.list && shopGoodsLists.list.length" @jump="toDetail" @primary="primary"
+                        :lists="shopGoodsLists.list"
+                        com="7">
+                    </column-list-box>
+                </van-list>
+            </div>
         </div>
  
         <!-- 回到顶部按钮 -->
@@ -148,7 +169,9 @@
 <script>
  
     // 引入组件
+    import Vue from "vue";
     import { Toast, Indicator } from "mint-ui";
+    import { List } from "vant";
     import callAppBox from "@/components/callAppBox/callAppBox";
     import backBox from "@/components/backBox/backBox";
     import textBgTitleCom from "@/components/textBgTitleCom/textBgTitleCom";
@@ -161,6 +184,8 @@
     import columnListBox from "@/components/columnListBox/columnListBox";
     import gotoTop from "@/components/gotoTop/gotoTop";
  
+    Vue.use(List);
+
     export default {
         name: 'optimization',
         data () {
@@ -178,7 +203,14 @@
                 points: null,           // 用户积分
                 pointsLists: null,      // 积分商城数据
                 likeLists: null,        // 猜你喜欢列表
-                likeNum: 0              // 猜你喜欢二维数组当前显示的下标
+                likeNum: 0,             // 猜你喜欢二维数组当前显示的下标
+                shopGoodsLists: {       // 推荐商品瀑布流
+                    loading: false,
+                    loadingNow: false,
+                    finished: false,
+                    page: 1,
+                    list: []
+                }
             }
         },
         computed: {
@@ -237,6 +269,9 @@
             // 优选页面接口
             this.index();
  
+            // 商品列表
+            // this.shopGoodsList();
+
             // 设置锚点定位数据
             this.$set(this, 'navs', [
                 {
@@ -277,6 +312,19 @@
         methods: {
  
             /**
+             * 加载更多
+             */
+            loadMore() {
+
+                // 判断是否可加载
+                if (this.shopGoodsLists.loadingNow === false && this.shopGoodsLists.finished === false) {
+                    
+                    // 商品列表
+                    this.shopGoodsList();
+                }
+            },
+
+            /**
              * 优选页面接口
              */
             index() {
@@ -396,6 +444,79 @@
             },
  
             /**
+             * 商品列表
+             */
+            shopGoodsList() {
+
+                // 校验登录
+                if (this.$parent.checkLogin()) {
+
+                    // 加载中提示
+                    Indicator.open("加载中...");
+
+                    // 设置开始加载
+                    this.$set(this.shopGoodsLists, 'loading', true);
+                    this.$set(this.shopGoodsLists, 'loadingNow', true);
+
+                    // 请求接口
+                    this.http("/Api/" + this.getApiVersion().index + "/shopGoodsList", {
+                        page: this.shopGoodsLists.page
+                    }, this.shopGoodsListCallback, {
+                        method: "POST"
+                    });
+                }
+            },
+
+            /**
+             * 商品列表回调
+             * @param {Object} res [服务器返回数据]
+             * @param {Object} ext [扩展参数]
+             */
+            shopGoodsListCallback(res, ext) {
+
+                // 加载完成
+                Indicator.close();
+
+                // 设置加载结束
+                this.$set(this.shopGoodsLists, 'loading', false);
+                this.$set(this.shopGoodsLists, 'loadingNow', false);
+
+                // 返回处理
+                if (res.code == 200) {
+
+                    // 解构数据
+                    let { data: datas } = res;
+
+                    /* 获取商品列表数据 开始 */
+
+                    // 判断是否有商品
+                    if (datas && datas.length) {
+
+                        // 设置列表数据
+                        this.$set(this.shopGoodsLists, 'list', [...this.shopGoodsLists.list, ...datas]);
+
+                        // 设置页码
+                        this.$set(this.shopGoodsLists, 'page', ++this.shopGoodsLists.page);
+                    } else {
+
+                        // 设置全部商品加载完成
+                        this.$set(this.shopGoodsLists, 'finished', true);
+                    }
+
+                    /* 获取商品列表数据 结束 */
+
+                } else if (res.code == 400) {
+
+                    // 获取优选失败
+                    Toast(res.message);
+                } else {
+
+                    // 获取优选失败
+                    Toast("获取数据失败");
+                }
+            },
+
+            /**
              * 跳转折扣专区列表
              * @param {Object} item [通用跳转对象]
              */