1、优选库——优选，添加”品质优选“页面框架

2、优选库——优选，首页增驾锚点定位功能 3、优选库——优选，首页增驾跳转列表页事件实现，绑定到具体页面

1、优选库——优选，添加”品质优选“页面框架
2、优选库——优选，首页增驾锚点定位功能 3、优选库——优选，首页增驾跳转列表页事件实现，绑定到具体页面
王强
1 parent 74a17e5f
Showing 7 changed files with 516 additions and 40 deletions
src/components/textBgTitleCom/textBgTitleCom.less
src/components/textBgTitleCom/textBgTitleCom.vue
src/pages/optimization2/optimization2.vue
src/pages/optimizationList/optimizationList.less
src/pages/optimizationList/optimizationList.vue
src/router/index.js
static/img/icon_more_arrow_right_3c.png
@@ -55,10 +55,17 @@
 				overflow: hidden;
 			}
 		}
+		.extend-box {
+			& + .more-box {
+				margin-left: 20px;
+			}
+		}
 		.more-box {
-			display: contents;
-			color: #999999;
-			font-size: 26px;
+			display: flex;
+			justify-content: flex-end;
+			align-items: center;
+			color: #3C3C3C;
+			font-size: 24px;
 			font-weight: 400;
 			.more-text {
 				max-width: 90px;
@@ -66,9 +73,11 @@
 				text-overflow: ellipsis;
 				overflow: hidden;
 			}
-		}
-		.extend-box {
-
+			.more-img {
+				display: block;
+				width: 24px;
+				height: 24px;
+			}
 		}
 	}
 }
 \ No newline at end of file
@@ -28,6 +28,7 @@
 			<!-- 更多 -->
 			<div class="more-box" v-if="titles.more" @click="more(titles.more)">
 				<div class="more-text">更多</div>
+				<img src="static/img/icon_more_arrow_right_3c.png" class="more-img" />
 			</div>
 		</div>
     </div>
@@ -7,7 +7,7 @@
         </call-app-box>
         <!-- 后退导航 -->
-        <back-box class="back-box" :style="'padding-top: ' + $parent.top.value + 'px'" v-if="isCNLive.value && $route.query.showBack == true" @back="back"
+        <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>
@@ -21,9 +21,10 @@
             <div class="section shop-list">
                 <!-- 标题 -->
-                <text-bg-title-com
+                <text-bg-title-com @more="toDiscountList"
                     :titles="{
-                        bg: 'static/img/text_bg_title_bg.jpg'
+                        bg: 'static/img/text_bg_title_bg.jpg',
+                        more: true
                     }">
                     <!-- 倒计时组件 -->
@@ -59,7 +60,7 @@
             </div>
             <!-- 品质优选 -->
-            <div class="shop-list-box" v-if="shopLists && shopLists.length">
+            <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)">
@@ -81,7 +82,7 @@
             </div>
             <!-- 热销排行 -->
-            <div class="section hot-box">
+            <div class="section hot-box" ref="hotBox">
                 <!-- 3D轮播 -->
                 <swiper-3d-com @onMainSlideClick="toHotSaleList"
@@ -91,7 +92,7 @@
             </div>
             <!-- 积分商城 -->
-            <div class="section shop-list">
+            <div class="section shop-list" ref="integralMallBox">
                 <!-- 标题 -->
                 <text-bg-title-com
@@ -117,7 +118,7 @@
             </div>
             <!-- 猜你喜欢 -->
-            <div class="section goods-list">
+            <div class="section goods-list" ref="guessLikeBox">
                 <!-- 标题 -->
                 <text-title-box @more='changeGoods'
@@ -260,36 +261,24 @@
             // 临时，设置锚点定位数据
             this.$set(this, 'navs', [
                 {
-                    id: "295",
-                    shop_type: "",
+                    ref: 'optimizationBox',
                     simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg",
-                    title: "品质优选",
-                    to: "0",
-                    type: "0"
+                    title: "品质优选"
                 },
                 {
-                    id: "295",
-                    shop_type: "",
+                    ref: 'hotBox',
                     simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg",
-                    title: "热销排行",
-                    to: "0",
-                    type: "0"
+                    title: "热销排行"
                 },
                 {
-                    id: "295",
-                    shop_type: "",
+                    ref: 'integralMallBox',
                     simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg",
-                    title: "积分商城",
-                    to: "0",
-                    type: "0"
+                    title: "积分商城"
                 },
                 {
-                    id: "295",
-                    shop_type: "",
+                    ref: 'guessLikeBox',
                     simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg",
-                    title: "猜你喜欢",
-                    to: "0",
-                    type: "0"
+                    title: "猜你喜欢"
                 }
             ]);
@@ -556,7 +545,8 @@
                     // 设置跳转参数
                     let params = {
-
+                        url: 'discountList',
+                        query: {}
                     };
                     // 页面跳转
@@ -570,6 +560,24 @@
              */
             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));
+                }
             },
             /**
@@ -583,7 +591,8 @@
                     // 设置跳转参数
                     let params = {
-
+                        url: 'optimizationList',
+                        query: {}
                     };
                     // 页面跳转
@@ -597,16 +606,13 @@
              */
             toHotSaleList(item) {
-
-                console.log('toHotSaleList', item);
-
-
                 // 跳转封装
                 if (typeof this.$parent.navBarJump === 'function') {
                     // 设置跳转参数
                     let params = {
-
+                        url: 'hotSaleList',
+                        query: {}
                     };
                     // 页面跳转
+@charset "UTF-8";
+
+.optimization-list-page {
+    background-color: #FFFFFF;
+    min-height: 100vh;
+    .call-app-box {
+        position: fixed;
+        top: 0;
+        z-index: 100;
+    }
+    .back-box {
+        position: fixed;
+        top: 0;
+        z-index: 100;
+        background-color: #ffffff;
+    }
+    .pl {
+        background-color: transparent;
+        width: 100%;
+        &.is-open-app {
+            height: 122px;
+        }
+        &.is-cnlive {
+            height: 93px;
+        }
+    }
+    .main-box {
+        .header-box {
+            width: 100%;
+            height: auto;
+            .header-img {
+                display: block;
+                width: 100%;
+                height: auto;
+            }
+        }
+        .count-down-box {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            margin: 0 auto;
+            width: 630px;
+            height: auto;
+            .text {
+                color: #633531;
+                font-size: 24px;
+                font-weight: 400;
+            }
+        }
+        .section {
+            background-color: #ffffff;
+            margin: 40px auto;
+            width: 690px;
+            height: auto;
+            border-radius: 24px;
+            overflow: hidden;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            &.goods-list {
+                /deep/ .goods-item-8-box {
+                    .main-box {
+                        border-bottom: 1px solid #EAEAEA;
+                    }
+                }
+                /deep/ .goods-item-8-box:last-child {
+                    .main-box {
+                        border-bottom: none;
+                    }
+                }
+                .discount-flag {
+                    position: absolute;
+                    top: 10px;
+                    left: 10px;
+                    z-index: 1;
+                    background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
+                    padding: 1px 8px;
+                    color: #945A08;
+                    font-size: 20px;
+                    font-weight: 400;
+                    border-radius: 6px;
+                }
+            }
+        }
+        .bottom-pl {
+            background-color: transparent;
+            width: 100%;
+            height: 100px;
+        }
+        .tips-box {
+            position: fixed;
+            bottom: 0;
+            z-index: 1;
+            background-color: #FFF6E5;
+            padding: 30px 0;
+            width: 100%;
+            height: auto;
+            .tips {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                margin: 0 auto;
+                width: 690px;
+                height: 100%;
+                .tips-img {
+                    display: block;
+                    width: 26px;
+                    height: 26px;
+                    & + .text {
+                        margin-left: 14px;
+                    }
+                }
+                .text {
+                    color: #FEA835;
+                    font-size: 24px;
+                    font-weight: 400;
+                }
+            }
+        }
+    }
+}
 \ No newline at end of file
+<template>
+    <div class="optimization-list-page">
+
+        <!-- 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" :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}"></div>
+
+        <!-- 主区域 -->
+        <div class="main-box">
+
+            
+
+
+
+            
+        </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 gotoTop from "@/components/gotoTop/gotoTop";
+
+    export default {
+        name: 'optimizationListPage',
+        data () {
+            return {
+                title: "",          // 标题
+                backs: null,        // 后退按钮组
+                
+
+
+
+            }
+        },
+        components: {
+            callAppBox,
+            backBox,
+            
+
+
+
+            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();
+
+
+            
+
+
+
+
+        },
+        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 [数据对象]
+             */
+            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 "optimizationList";
+</style>
 \ No newline at end of file
@@ -206,6 +206,17 @@ const router = new Router({
                         requireAuth: false
                     }
                 },
+                {
+                    // 新版优选库“优选品质优选列表”页面
+                    path: "/optimizationList",
+                    name: "optimizationList",
+                    component: resolve => {
+                        require(["@/pages/optimizationList/optimizationList"], resolve);
+                    },
+                    meta: {
+                        requireAuth: false
+                    }
+                },
                 /* 优选和商城页面改版升级页面 结束 */