w-front-end / select_good · Files

<template>
    <div class="optimization-box">

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

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

        <!-- pl -->
        <div class="pl" :class="{'is-cnlive': isCNLive.value && $route.query.showBack == true, 'is-open-app': $parent.isOpenApp.value}"></div>

        <!-- 主区域 -->
        <div class="main-box">

            <!-- 折扣专区 -->
            <div class="section shop-list">

                <!-- 标题 -->
                <text-bg-title-com @more="toDiscountList"
                    :titles="{
                        bg: 'static/img/text_bg_title_bg.jpg',
                        more: true
                    }">

                    <!-- 倒计时组件 -->
                    <count-down-com slot="extend"
                        :time="new Date().getTime() + 10000000 - new Date().getTime()"
                        sty="4">
                    </count-down-com>
                </text-bg-title-com>

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

                    <!-- 商品展示样式 2 -->
                    <goods-item-2 class="item" v-for="(item, index) in goodsLists" :key="index" @jump="toDiscountList(item)"
                        :item="item"
                        pid="4">

                        <!-- 折扣角标 -->
                        <div class="discount-flag" slot="flag">
                            5折
                        </div>
                    </goods-item-2>
                </div>
            </div>

            <!-- 锚点区域 -->
            <div class="section anchor-list" v-if="navs && navs.length">

                <!-- 锚点区域（单个图标） -->
                <icons-com v-for="(item, index) in navs" :key="index" @jump="anchor(item)"
                    :item="item">
                </icons-com>
            </div>

            <!-- 品质优选 -->
            <div class="shop-list-box" ref="optimizationBox" v-if="shopLists && shopLists.length">

                <div class="section shop-list" v-for="(items, index) in shopLists" :key="index" @click="toOptimizationList(items)">

                    <!-- 头图 -->
                    <div class="header-img-box">
                        <img :src="items.header_img + SIGN.BIG" class="header-img" />
                    </div>

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

                        <!-- 商品展示样式 2 -->
                        <goods-item-2 class="item" v-for="(item, i) in items.list" :key="i"
                            :item="item"
                            pid="1">
                        </goods-item-2>
                    </div>
                </div>
            </div>

            <!-- 热销排行 -->
            <div class="section hot-box" ref="hotBox">
                
                <!-- 3D轮播 -->
                <swiper-3d-com @onMainSlideClick="toHotSaleList"
                    :items="swiper3dItems"
                    :options="swiper3dOptions">
                </swiper-3d-com>
            </div>

            <!-- 积分商城 -->
            <div class="section shop-list" ref="integralMallBox">

                <!-- 标题 -->
                <text-bg-title-com
                    :titles="{
                        bg: 'static/img/text_bg_title_bg.jpg'
                    }">
                </text-bg-title-com>

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

                    <!-- 商品展示样式 2 -->
                    <goods-item-2 class="item" v-for="(item, index) in goodsLists" :key="index" @jump="toDiscountList(item)"
                        :item="item"
                        pid="5">
                    </goods-item-2>
                </div>

                <!-- 积分展示 -->
                <more-com class="points-box" @more="pointsMore"
                    :mores="points">
                </more-com>
            </div>

            <!-- 猜你喜欢 -->
            <div class="section goods-list" ref="guessLikeBox">

                <!-- 标题 -->
                <text-title-box @more='changeGoods'
                    :titles="{
                        title: '猜你喜欢',
                        more: true,
                        moreText: '换一组',
                        icon: 'static/img/icon_refresh.png'
                    }">
                </text-title-box>

                <!-- 商品样式 7 列表 -->
                <column-list-box class="column-list-box" v-if="likeLists && likeLists.list && likeLists.list.length" @jump="toDetail" @primary="primary"
                    :lists="likeLists"
                    com="7">
                </column-list-box>
            </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 textBgTitleCom from "@/components/textBgTitleCom/textBgTitleCom";
    import countDownCom from "@/components/countDownCom/countDownCom";
    import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
    import iconsCom from "@/components/iconsCom/iconsCom";
    import swiper3dCom from "@/components/swiper3dCom/swiper3dCom";
    import moreCom from "@/components/moreCom/moreCom";
    import textTitleBox from "@/components/textTitleBox/textTitleBox";
    import columnListBox from "@/components/columnListBox/columnListBox";
    import gotoTop from "@/components/gotoTop/gotoTop";

    export default {
        name: 'optimization',
        data () {
            return {
                title: "",              // 标题
                backs: null,            // 后退按钮组
                navs: null,             // 导航
                goodsLists: null,       // 折扣专区数据
                shopLists: null,        // 品质优选
                swiper3dItems: null,    // 3D轮播数据数组
                swiper3dOptions: null,  // 3D轮播配置选项
                points: null,           // 用户积分
                likeLists: null         // 猜你喜欢列表
            }
        },
        components: {
            callAppBox,
            backBox,
            textBgTitleCom,
            countDownCom,
            goodsItem2,
            iconsCom,
            swiper3dCom,
            moreCom,
            textTitleBox,
            columnListBox,
            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.fansShopMessageList();




            // 临时，初始化店铺列表数据
            this.$set(this, 'goodsLists', [
                {
                    ads: "广告语",
                    id: "9519164",
                    price: "5.01",
                    prices: "6.00",
                    shop_type: "1",
                    simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
                    title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
                },
                {
                    ads: "广告语",
                    id: "9519164",
                    price: "5.01",
                    prices: "6.00",
                    shop_type: "1",
                    simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
                    title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
                },
                {
                    ads: "广告语",
                    id: "9519164",
                    price: "5.01",
                    prices: "6.00",
                    shop_type: "1",
                    simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
                    title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
                }
            ]);




            // 临时，设置锚点定位数据
            this.$set(this, 'navs', [
                {
                    ref: 'optimizationBox',
                    simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg",
                    title: "品质优选"
                },
                {
                    ref: 'hotBox',
                    simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg",
                    title: "热销排行"
                },
                {
                    ref: 'integralMallBox',
                    simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg",
                    title: "积分商城"
                },
                {
                    ref: 'guessLikeBox',
                    simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg",
                    title: "猜你喜欢"
                }
            ]);



            // 临时，初始化店铺列表数据
            this.$set(this, 'shopLists', [
                {
                    header_img: 'static/img/box_banner.jpg',
                    list: [
                        {
                            ads: "广告语",
                            id: "9519164",
                            price: "5.01",
                            prices: "6.00",
                            shop_type: "1",
                            simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
                            title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
                        },
                        {
                            ads: "广告语",
                            id: "9519164",
                            price: "5.01",
                            prices: "6.00",
                            shop_type: "1",
                            simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
                            title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
                        },
                        {
                            ads: "广告语",
                            id: "9519164",
                            price: "5.01",
                            prices: "6.00",
                            shop_type: "1",
                            simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
                            title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
                        }
                    ]
                }
            ]);



            // 临时，3D轮播参数设置
            this.$set(this, 'swiper3dItems', [
                {
                    img: 'static/img/hot_img_01.png'
                },
                {
                    img: 'static/img/hot_img_01.png'
                },
                {
                    img: 'static/img/hot_img_01.png'
                }
            ]);
            this.$set(this, 'swiper3dOptions', {
                bg: 'static/img/hot_img_bg.png'
            });



            // 临时，用户积分数据设置
            this.$set(this, 'points', {
                key: '我的积分',
                value: '9850',
                moreText: '查看更多',
                icon: 'static/img/icon_more_arrow_right.png'
            });



            // 临时，猜你喜欢产品列表
            this.$set(this, 'likeLists', {
                list: [
                    {
                        activity: "0",
                        activity_desc: "",
                        addtime: "1604544867",
                        ads: "23123",
                        code: "160454486791776561000",
                        id: "9525539",
                        price: "0.01",
                        prices: "0.00",
                        shop_type: "1",
                        simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
                        stock: "0",
                        stoptime: "0",
                        title: "aabbsdf350ml"
                    },
                    {
                        activity: "0",
                        activity_desc: "",
                        addtime: "1604544867",
                        ads: "23123",
                        code: "160454486791776561000",
                        id: "9525539",
                        price: "0.01",
                        prices: "0.00",
                        shop_type: "1",
                        simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
                        stock: "0",
                        stoptime: "0",
                        title: "aabbsdf350ml"
                    },
                    {
                        activity: "0",
                        activity_desc: "",
                        addtime: "1604544867",
                        ads: "23123",
                        code: "160454486791776561000",
                        id: "9525539",
                        price: "0.01",
                        prices: "0.00",
                        shop_type: "1",
                        simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
                        stock: "0",
                        stoptime: "0",
                        title: "aabbsdf350ml"
                    },
                    {
                        activity: "0",
                        activity_desc: "",
                        addtime: "1604544867",
                        ads: "23123",
                        code: "160454486791776561000",
                        id: "9525539",
                        price: "0.01",
                        prices: "0.00",
                        shop_type: "1",
                        simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
                        stock: "0",
                        stoptime: "0",
                        title: "aabbsdf350ml"
                    }
                ]
            });





        },
        methods: {

            /**
             * 优选页面接口
             */
            fansShopMessageList() {

                // 校验登录
                if (this.$parent.checkLogin()) {

                    // 加载中提示
                    Indicator.open("加载中...");

                    // 获取证书请求接口
                    this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {
                        uid: this.getStore("uid")
                    }, this.fansShopMessageListCallback, {
                        method: "POST"
                    });
                }
            },

            /**
             * 优选页面接口回调
             * @param {Object} res [服务器返回数据]
             * @param {Object} ext [扩展参数]
             */
            fansShopMessageListCallback(res, ext) {

                // 加载完成
                Indicator.close();

                // 返回处理
                if (res.code == 200) {

                    // 解构数据
                    let { data: datas } = res;

                    /* 获取优选库“优选”数据 开始 */

                    

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

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

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

                    // 获取优选失败
                    Toast("获取优选失败");
                }
            },

            /**
             * 商品列表
             * @param {Int} groupId [平台分类id]
             * @param {Int} page [页码]
             * @param {String} CALL_STATUS [何处触发请求]
             */
            shopGoodsList(groupId, page) {

                // 校验必填参数
                if (groupId && page) {

                    // 加载中
                    this.$set(this.paging, "loading", true);

                    // 获取证书请求接口
                    this.http("/Api/" + this.getApiVersion().index + "/shopNewGoodsList", {
                            groupid: groupId,
                            page: page
                        }, this.shopGoodsListCallback, {
                            method: "POST"
                        }
                    );
                }
            },

            /**
             * 商品列表回调
             * @param {Object} res [服务器返回数据]
             * @param {Object} ext [扩展参数]
             */
            shopGoodsListCallback(res, ext) {

                // 下拉刷新结束
                this.$set(this, "isLoading", false);

                // 返回处理
                if (res.code == 200) {

                    // 解构数据
                    let { data: datas } = res;

                    /* 获取商品列表数据 开始 */

                    

                    /* 获取商品列表数据 结束 */

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

                    // 获取最新上架列表失败
                    Toast(res.message);
                } else {

                    // 获取最新上架列表失败
                    Toast("获取最新上架列表失败");
                }
            },

            /**
             * 跳转折扣专区列表
             * @param {Object} item [通用跳转对象]
             */
            toDiscountList(item) {

                // 跳转封装
                if (typeof this.$parent.navBarJump === 'function') {

                    // 设置跳转参数
                    let params = {
                        url: 'discountList',
                        query: {}
                    };

                    // 页面跳转
                    this.$parent.navBarJump(params);
                }
            },

            /**
             * 锚点定位
             * @param {Object} item [数据对象]
             */
            anchor(item) {

                // 判断锚点是否存在
                if (item.ref && typeof this.$refs === 'object' && typeof this.$refs[item.ref] === 'object') {

                    // 根据头部设置锚点位置
                    let safeDistance = 0;

                    // 判断是否有callApp组件
                    if (typeof this.$refs.callApp === 'object') {
                        safeDistance += this.$refs.callApp.$el.clientHeight;
                    }

                    // 判断是否有backBox组件
                    if (typeof this.$refs.backBox === 'object') {
                        safeDistance += this.$refs.backBox.$el.clientHeight;
                    }

                    document.documentElement.scrollTop = document.body.scrollTop = this.$refs[item.ref].offsetTop - safeDistance - (20 * ((document.documentElement.clientWidth || document.body.clientWidth) / 750));
                }
            },

            /**
             * 跳转品质优选列表
             * @param {Object} item [通用跳转对象]
             */
            toOptimizationList(item) {

                // 跳转封装
                if (typeof this.$parent.navBarJump === 'function') {

                    // 设置跳转参数
                    let params = {
                        url: 'optimizationList',
                        query: {}
                    };

                    // 页面跳转
                    this.$parent.navBarJump(params);
                }
            },

            /**
             * 跳转热销排行列表
             * @param {Object} item [通用跳转对象]
             */
            toHotSaleList(item) {

                // 跳转封装
                if (typeof this.$parent.navBarJump === 'function') {

                    // 设置跳转参数
                    let params = {
                        url: 'hotSaleList',
                        query: {}
                    };

                    // 页面跳转
                    this.$parent.navBarJump(params);
                }
            },

            /**
             * 查看更多积分
             * @param {Object} item [数据对象]
             */
            pointsMore(item) {

                console.log('pointsMore', item);

            },

            /**
             * 换一租
             * @param {Object} item [数据对象]
             */
            changeGoods(item) {

                console.log('changeGoods', item);

            },

            /**
             * 跳转商品详情
             * @param {Object} item [数据对象]
             */
            toDetail(item) {

                // 判断通用跳转函数是否存在
                if (typeof this.$parent.gotoDetail === 'function') {


                    console.log('toDetail', item);


                    // 通用跳转
                    this.$parent.gotoDetail(item);
                }
            },
            /**
             * 列表加号按钮事件
             * @param {Object} item [数据对象]
             */
            primary(item) {
                this.toDetail(item);
            },






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

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

            /**
             * 后退
             */
            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: 38,
                        id: this.$route.query.id || 1,
                        url: ""
                    });
                }
    
                // 分享详情页
                if (typeof this.$parent.getShareData === "function") {
                    this.$parent.getShareData({
                        type: 38,
                        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 "optimization2";
</style>