w-front-end / select_good · Files

<template>
    <div class="hot-sale-list-page">

        <!-- H5唤起App组件 -->
        <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value"
            :callApps="$parent.callApps">
        </call-app-box>

        <!-- 后退导航 -->
        <back-box class="back-box" :class="{'hide': $route.query.hideBack == true}" :style="'padding-top: ' + $parent.top.value + 'px'" v-if="isCNLive.value" @back="back"
            :backs="backs">
        </back-box>

        <!-- pl -->
        <div class="pl" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}" :style="'padding-top: ' + $parent.top.value + 'px'"></div>

        <!-- 主区域 -->
        <div class="main-box" :style="{backgroundImage: 'url(' + headerImg + ')'}">

            <!-- 商品列表 -->
            <div class="section goods-list">

                <!-- 商品列表 -->
                <goods-item-8 v-for="(item, index) in goodsLists" :key="index" @jump="toDetail" @primary="primary"
                    :item="item"
                    sty="2"
                    isIntegral="true">

                    <!-- 添加flag -->
                    <flag slot="flag" v-if="flags && flags.icon && flags.icon[index]"
                        :flag="flags.icon[index]"
                        :position="flags.position"
                        :width="flags.width">
                    </flag>
                </goods-item-8>
            </div>
            <div style="clear: both;"></div>
        </div>

        <!-- 回到顶部按钮 -->
        <goto-top
            :top="parseInt(150)">
        </goto-top>
    </div>
</template>

<script>

    // 引入组件
    import { Toast, Indicator } from "mint-ui";
    import callAppBox from "@/components/callAppBox/callAppBox";
    import backBox from "@/components/backBox/backBox";
    import goodsItem8 from "@/components/goodsItem_8/goodsItem_8";
    import flag from "@/components/flag/flag";
    import gotoTop from "@/components/gotoTop/gotoTop";

    export default {
        name: 'hotSaleListPage',
        data () {
            return {
                title: "",          // 标题
                backs: null,        // 后退按钮组
                headerImg: '',      // 头部图片
                goodsLists: null,   // 商品列表
                flags: null         // 产品排名flag
            }
        },
        components: {
            callAppBox,
            backBox,
            goodsItem8,
            flag,
            gotoTop
        },
        created() {

            // 设置标题
            this.$set(this, "title", "兑换排行榜");

            // 判断是否在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
                            }
                        ]
                    }
                });

                // 设置标题
                this.$set(this.backs, 'title', '兑换排行榜');
            }

            // 兑换排行榜新接口
            this.getIntegralNewGoodsList();

            // 设置头部图片地址
            this.$set(this, 'headerImg', 'static/img/pointsMall/header_hot.png');

            // 设置产品排名flag对象
            this.$set(this, 'flags', {
                icon: [
                    'static/img/icon_n1.png',
                    'static/img/icon_n2.png',
                    'static/img/icon_n3.png'
                ],
                position: {
                    top: -6,
                    left: 20
                }
            });
        },
        methods: {

            /**
             * 兑换排行榜新接口
             */
            getIntegralNewGoodsList() {
                
                // 加载中提示
                Indicator.open("加载中...");

                // 获取证书请求接口
                this.http("/Api/" + (this.getApiVersion().LuckDraw) + "/integralNewGoodsList", {
                  type: 4,
                  // uid: this.getStore("uid"),
                  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, 'goodsLists', datas.goods);

                    /* 获取库“”数据 结束 */

                } else if (res.code == 400) {

                    // 获取失败
                    Toast(res.message);
                } else {

                    // 获取失败
                    Toast("获取数据失败");
                }
            },

             /**
              * 跳转商品详情
              * @param {Object} item [数据对象]
              */
              toDetail (item) {
                if (this.isCNLive.value) {
                    // 校验登录
                  if (this.$parent.checkLogin()) {
                      // 通用跳转跳转到商品详情页新打开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, {
                            activityCode: "ds_jfsc"		// 添加页面渠道码
                        });
                      }
                  }
                } else {
                  this.$parent.callApp();
                }
              },

            /**
             * 唤起App封装
             */
            openApp() {

                this.$nextTick(() => {

                    // 唤起App
                    if (typeof this.$parent.callAppModal === 'function' && typeof this.$refs.callApp === 'object') {

                        // 设置唤起参数
                        let options = {
                            success: this.$refs.callApp.callApp
                        }

                        // 唤起App
                        this.$parent.callAppModal(options);
                    }
                });
            },

            /**
             * 项目按钮事件
             * @param {Object} item [数据对象]
             */
            primary(item) {

                // 跳转商品详情
                this.toDetail(item);
            },

            /**
             * 分享
             */
            toShare() {

                // 判断分享
                if (typeof this.$parent.toShare === 'function') {
                    this.$parent.toShare(70, this.$route.query.id || 1);
                }
            },

            /**
             * 后退
             */
            back() {
                
                // 判断是否有处理函数
                if (typeof this.$parent.back === 'function') {

                    // 后退
                    this.$parent.back();
                } else {

                    // 后退
                    window.history.go(-1);
                }
            }
        },
        head: {
            title () {
                return {
                    inner: this.title
                }
            }
        },
        watch: {

            // 设置页面标题
            title(newVal) {
                if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
                    this.$iFrame.insertIFrame(newVal);
                } else {
                    this.$emit("updateHead");
                }
            }
        },
        mounted() {
            
            // 如果是App外，设置唤起App和微信内分享参数
            if (!this.isCNLive.value) {

                // 唤起详情页
                if (typeof this.$parent.getOpenApp === "function") {
                    this.$parent.getOpenApp({
                        type: 70,
                        id: this.$route.query.id || 1,
                        url: ""
                    });
                }
    
                // 分享详情页
                if (typeof this.$parent.getShareData === "function") {
                    this.$parent.getShareData({
                        type: 70,
                        id: this.$route.query.id || 1,
                        url: ""
                    });
                }
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/less" lang='less' scoped>
    @import "exchangeRanking";
</style>