新增商品详情页更多页面

zhiyangdu
1 parent 079efa5d
Showing 3 changed files with 280 additions and 3 deletions
src/pages/morePoints/morePoints.less
src/pages/morePoints/morePoints.vue
src/router/index.js
+@charset "UTF-8";
+
+.gift_zone_detail{
+  width: 100%;
+  min-height: 100vh;
+  // background: #B62128 url("https://wjj.ys1.cnliveimg.com/769/h5/H5activity/kapai/detail-top.png") no-repeat center top;
+  background-size: 100%;
+  overflow: hidden;
+  .column-list-box{
+    margin-top:40px;
+  }
+  .no_more{
+    width:100%;
+    height: 37px;
+    font-size: 26px;
+    font-weight: 400;
+    color: #333;
+    line-height: 37px;
+    letter-spacing: 1px;
+    text-align: center;
+    margin-top:10px;
+    // margin-bottom: 60px;
+  }
+}
 \ No newline at end of file
+<template>
+<div class="gift_zone_detail">
+          <!-- <call-app-box
+            class="call-app-box"
+            :style="'padding-top: ' + $parent.top.value + 'px'"
+            ref="callApp"
+            v-if="!isCNLive.value"
+            :callApps="$parent.callApps"
+        >
+        </call-app-box> -->
+        <back-box
+            v-if="isCNLive.value"
+            :class="{'hide': $route.query.hideBack == true}"
+            class="back-box"
+            :style="'padding-top: ' + $parent.top.value + 'px'"
+            @back="back"
+            :backs="backs"
+        >
+        </back-box>
+                <!-- pl -->
+        <div class="pl" :style="'padding-top: ' + $parent.top.value + 'px'" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></div>
+    <!-- 商品样式 7 列表 -->
+    <div class="gift_main_box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" infinite-scroll-immediate-check="true" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" :infinite-scroll-distance="distance">
+      <column-list-box class="column-list-box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" @jump="toDetail" 
+          :lists="phyicalGoods.list"
+          :goodType="$route.query.type"
+          com="7">
+      </column-list-box>
+    </div>  
+    <!-- 没有更多了 -->
+    <div v-if="isNoMore" class="no_more">
+        — 没有更多了 —
+    </div>
+</div>
+</template>
+
+<script>
+// import callAppBox from "@/components/callAppBox/callAppBox";
+import backBox from "@/components/backBox/backBox";
+import { Toast, Indicator } from "mint-ui";
+import columnListBox from "@/components/columnListBox/columnListBox";
+export default {
+  name: 'morePoints',
+  data () {
+    return {
+      backs: null, // 后退按钮组
+      loading: true,
+      distance: 50,
+      phyicalGoods: { list: [] }, // 实物商品
+      page: 1,
+      isNoMore: false
+    }
+  },
+  //部件
+  components: {
+    backBox,
+    columnListBox,
+    // callAppBox
+  },
+  //静态
+  props: [
+  ],
+  //对象内部的属性监听，也叫深度监听
+  head: {
+    title () {
+      return {
+        inner: this.title
+      }
+    }
+  },
+  //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
+  computed: {
+  },
+  //方法表示一个具体的操作，主要书写业务逻辑；
+  methods: {
+    /**
+    * 上拉加载
+    */
+    loadMore () {
+      this.$set(this, "page", ++this.page);
+      this.getIntegralNewGoodsList(this.page);
+    },
+    /**
+     * 加载积分商城商品更多
+     * @param {int} page [页码]
+     * @param  {int}type [类型1为实物 2为虚拟物品 3为红包]
+     */
+    getIntegralNewGoodsList (page) {
+
+      // 判断必须参数
+      if (this.$route.query.type) {
+
+        // 加载中
+        this.$set(this, "loading", true);
+
+        // 加载中提示
+        Indicator.open("加载中...");
+
+        // 请求接口
+        this.http("/Api/" + (this.getApiVersion().LuckDraw) + "/integralNewGoodsList", {
+          type: this.$route.query.type,
+          // uid: this.getStore("uid"),
+          page: page || 1
+        }, this.getIntegralNewGoodsListCallback, {
+            method: "POST"
+          });
+      }
+    },
+
+    /**
+     * 礼品专区详情页回调
+     * @param {object} res [服务器返回数据]
+     * @param {object} ext [扩展参数]
+     */
+    getIntegralNewGoodsListCallback (res, ext) {
+
+      // 加载完成
+      Indicator.close();
+
+      // 返回处理
+      if (res.code == 200) {
+        // 解构数据
+        let { data: datas } = res;
+        /*设置标题 */
+        //  this.$set(this, "title", datas.title);
+        this.$set(this.backs, 'title', datas.title);
+        /* 获取商品数据 开始 */
+        if (datas.goods && datas.goods.length) {
+          // 设置列表
+          this.$set(this.phyicalGoods, "list", [...this.phyicalGoods.list, ...datas.goods]);
+          // 设置还有需要加载的内容
+          this.$set(this, "loading", false);
+        } else {
+          this.isNoMore = true; // 没有更多了
+          // 没有需要加载的内容，停止上拉加载
+          this.$set(this, "loading", true);
+        }
+        /* 获取抽奖记录数据 结束 */
+
+      } else if (res.code == 400) {
+
+        // 获取抽奖记录失败
+        Toast(res.message);
+      } else {
+
+        // 获取抽奖记录失败
+        Toast("获取专区礼包失败");
+      }
+    },
+
+     /**
+    * 跳转商品详情
+    * @param {Object} item [数据对象]
+    */
+    toDetail (item) {
+      if (this.isCNLive.value) {
+        // this.$router.push({
+        //   path: "/goodDetails",
+        //   query: {
+        //     goodsId: item.id,
+        //     uid: this.getStore("uid")
+        //   }
+        // })
+        // 通用跳转跳转到商品详情页新打开webview
+        if (typeof this.$parent.gotoDetail === 'function') {
+
+          // 设置跳转参数
+          let params = {
+            type: '5',
+            to: window.location.origin + '/html/select_good/1/#/goodDetails?goodsId=' + item.id,
+            shop_type: ''
+          };
+
+          // 页面跳转
+          this.$parent.gotoDetail(params);
+        }
+      } else {
+        this.$parent.callApp();
+      }
+    },
+
+     /**
+     * 后退
+     */
+    back () {
+      // 返回先隐藏弹框
+
+      // 判断是否有处理函数
+      if (typeof this.$parent.back === 'function') {
+        // 隐藏通用浮层
+        this.$parent.$refs.showModal.hideLayer();
+        // 后退
+        this.$parent.back();
+      } else {
+
+        // 后退
+        window.history.go(-1);
+      }
+    },
+
+     /**
+     * 分享
+     */
+    toShare () {
+      // 判断分享
+      if (typeof this.$parent.toShare === 'function') {
+        this.$parent.toShare(46, this.$route.query.goodsId, "");
+      }
+    },
+
+  },
+  //请求数据
+  created () {
+    // 抽奖记录
+    this.getIntegralNewGoodsList(this.page);
+
+     // 判断是否在App内
+    if (this.isCNLive.value) {
+
+      // 添加后退按钮组“后退”和“分享”按钮
+      this.$set(this, 'backs', {
+        funcs: {
+          back: {
+            icon: "static/img/icon_back.png"
+          },
+          funcArray: [
+            {
+              icon: "static/img/icon_share.png",
+              func: this.toShare
+            }
+          ]
+        }
+      });
+    }
+  },
+  mounted () {
+  }
+}
+</script>
+
+<style rel="stylesheet/less" lang="less" scoped>
+@import 'morePoints';
+</style>
+
@@ -243,9 +243,7 @@ const router = new Router({
                     path: "/labourUnion",
                     name: "labourUnion",
                     component: resolve => {
-                        require([
-                            "@/pages/labourUnion/labourUnion"
-                        ], resolve);
+                        require(["@/pages/labourUnion/labourUnion"], resolve);
                     },
                     meta: {
                         requireAuth: false
@@ -267,6 +265,17 @@ const router = new Router({
                     }
                 },
                 {
+                    // 积分商城商品数据更多页
+                    path: "/morePoints",
+                    name: "morePoints",
+                    component: resolve => {
+                        require(["@/pages/morePoints/morePoints"], resolve);
+                    },
+                    meta: {
+                        requireAuth: false
+                    }
+                },
+                {
                     // 积分商城兑换记录与其他积分商城共用
                     path: "/pointsExchangeRecords",
                     name: "pointsExchangeRecords",