1、品质优选接口对接完成

2、商城首页（旗舰店）页面组件优化

1、品质优选接口对接完成
2、商城首页（旗舰店）页面组件优化
王强
1 parent 48009ac5
Showing 6 changed files with 146 additions and 221 deletions
src/components/titleSubTitleHoriCom/titleSubTitleHoriCom.less
src/components/titleSubTitleHoriCom/titleSubTitleHoriCom.vue
src/pages/mall2/mall2.less
src/pages/mall2/mall2.vue
src/pages/optimizationList/optimizationList.less
src/pages/optimizationList/optimizationList.vue
+@charset "UTF-8";
+
+.title-sub-title-hori-com {
+	width: 100%;
+	.box {
+		display: flex;
+		justify-content: flex-start;
+		align-items: baseline;
+		margin: 0 auto;
+		width: 90%;
+		.title {
+			color: #4A4A4A;
+			font-size: 34px;
+			font-weight: 600;
+			& + .sub-title {
+				margin-left: 20px;
+				padding-left: 16px;
+				border-left: 1px solid #979797;
+			}
+		}
+		.sub-title {
+			color: #999999;
+			font-size: 24px;
+			font-weight: 400;
+		}
+	}
+}
 \ No newline at end of file
+<template>
+	<div class="title-sub-title-hori-com" v-if="titles">
+		<div class="box">
+			<div class="title">{{titles.title}}</div>
+			<div class="sub-title">{{titles.subTitle}}</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'titleSubTitleHoriCom',
+		data() {
+			return {
+				
+			};
+		},
+		props: ["titles"],
+		methods: {
+			
+		}
+	}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang='less' scoped>
+	@import './titleSubTitleHoriCom';
+</style>
@@ -37,7 +37,9 @@
                 margin-bottom: 0;
             }
             &.shop-hot {
-
+                .title-sub-title-hori-com {
+                    margin: 30px auto;
+                }
             }
             &.shop-list {
                 .header-img-box {
@@ -18,19 +18,20 @@
         <div class="main-box">
             <!-- 店铺精选 -->
-            <div class="section shop-hot">
+            <div class="section shop-hot" v-if="navs">
                 <!-- 标题 -->
-                <text-bg-title-com
+                <title-sub-title-hori-com
                     :titles="{
-                        bg: 'static/img/text_bg_title_bg.jpg'
+                        title: '旗舰店精选',
+                        subTitle: '优质品牌 为你推荐'
                     }">
-                </text-bg-title-com>
+                </title-sub-title-hori-com>
                 <!-- 轮播展示店铺 -->
-                <iconSwiperBox @jump="toDetail"
+                <icon-swiper-box @jump="toDetail"
                     :icons="navs">
-                </iconSwiperBox>
+                </icon-swiper-box>
             </div>
             <!-- 店铺列表 -->
@@ -64,7 +65,7 @@
     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 titleSubTitleHoriCom from "@/components/titleSubTitleHoriCom/titleSubTitleHoriCom";
     import iconSwiperBox from "@/components/iconSwiperBox/iconSwiperBox";
     import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
@@ -81,20 +82,24 @@
         components: {
             callAppBox,
             backBox,
-            textBgTitleCom,
+            titleSubTitleHoriCom,
             iconSwiperBox,
             goodsItem2
         },
         created() {
-            // 获取优选库精选活动
-            this.activityAd();
+            // 设置标题
+            this.$set(this, 'title', '旗舰店');
+
+            // 品质优选
+            this.goodQuality();
             // 判断是否在App内
             if (this.isCNLive.value) {
                 // 添加后退按钮组“后退”和“分享”按钮
                 this.$set(this, 'backs', {
+                    title: this.title,
                     funcs: {
                         back: {
                             icon: "static/img/icon_back.png"
@@ -283,27 +288,27 @@
         methods: {
             /**
-             * 获取初始数据
+             * 品质优选
              */
-            activityAd() {
+            goodQuality() {
                 // 加载中提示
                 Indicator.open("加载中...");
                 // 获取证书请求接口
-                this.http("/Api/" + this.getApiVersion().index + "/activityAd", {
-                    id: this.$route.query.id
-                }, this.activityAdCallback, {
+                this.http("/Api/" + this.getApiVersion().good + "/goodQuality", {
+                    id: 0
+                }, this.goodQualityCallback, {
                     method: "POST"
                 });
             },
             /**
-             * 获取初始数据回调
+             * 品质优选回调
              * @param {Object} res [服务器返回数据]
              * @param {Object} ext [扩展参数]
              */
-            activityAdCallback(res, ext) {
+            goodQualityCallback(res, ext) {
                 // 加载完成
                 Indicator.close();
@@ -316,20 +321,7 @@
                     /* 获取优选库精选活动数据 开始 */
-                    // 设置标题
-                    this.$set(this, "title", datas.title);
-
-                    // 判断App内
-                    if (this.isCNLive.value) {
-
-                        // 设置后退按钮组
-                        this.$set(this.backs, 'title', datas.title);
-                    }
-
-                    // 设置navs数据
-                    if (datas.navs && datas.navs.length) {
-                        this.$set(this, "navs", datas.navs);
-                    }
+                    
                     /* 获取优选库精选活动数据 结束 */
@@ -340,7 +332,7 @@
                 } else {
                     // 获取初始数据失败
-                    Toast("获取初始数据失败");
+                    Toast("获取数据失败");
                 }
             },
@@ -38,48 +38,37 @@
             &:last-child {
                 margin-bottom: 0;
             }
-            &.red-box, &.blue-box, &.green-box {
-                .content-box {
-                    margin-top: 580px;
-                    .video-box {
-                        margin: 0 auto;
-                        width: 90%;
+            .content-box {
+                margin-top: 580px;
+                .video-box {
+                    margin: 0 auto;
+                    width: 90%;
+                    height: auto;
+                    border-radius: 24px;
+                    overflow: hidden;
+                    .video {
+                        width: 100%;
                         height: auto;
-                        border-radius: 24px;
-                        overflow: hidden;
-                        .video {
-                            width: 100%;
-                            height: auto;
-                        }
                     }
-                    .list-box {
-                        margin: 0 auto;
-                        width: 90%;
+                }
+                .list-box {
+                    margin: 0 auto;
+                    width: 90%;
+                    height: auto;
+                    .item {
+                        margin: 20px auto;
+                        width: 100%;
                         height: auto;
-                        .item {
-                            margin: 20px auto;
+                        border-radius: 24px;
+                        overflow: hidden;
+                        .list-img {
+                            display: block;
                             width: 100%;
                             height: auto;
-                            border-radius: 24px;
-                            overflow: hidden;
-                            .list-img {
-                                display: block;
-                                width: 100%;
-                                height: auto;
-                            }
                         }
                     }
                 }
             }
-            &.red-box {
-                background-color: #FCA389;
-            }
-            &.blue-box {
-                background-color: #5B8BB4;
-            }
-            &.green-box {
-                background-color: #ADC77F;
-            }
         }
     }
 }
 \ No newline at end of file
@@ -17,71 +17,31 @@
         <!-- 主区域 -->
         <div class="main-box">
-            <!-- 区块 -->
-            <div class="section red-box" :style="{backgroundImage: 'url(' + redBox.bg + ')'}" v-if="redBox">
+            <!-- 判断变量是否存在 -->
+            <template v-if="datas">
-                <!-- 主区域 -->
-                <div class="content-box">
+                <!-- 区块 -->
+                <div class="section" :style="{backgroundImage: 'url(' + item.img || '' + ')', backgroundColor: item.color || '#FFFFFF'}" v-for="(item, index) in datas" :key="index">
-                    <!-- 视频区块 -->
-                    <div class="video-box" v-if="redBox.video">
-                        <video class="video" controls :poster="redBox.video.poster + SIGN.BIG">
-                            <source :src="redBox.video.url" type="video/mp4" />
-                        </video>
-                    </div>
-
-                    <!-- 列表区块 -->
-                    <div class="list-box" v-if="redBox.list">
-                        <div class="item" v-for="(item, index) in redBox.list" :key="index" @click="toDetail(item)">
-                            <img :src="item.img + SIGN.BIG" class="list-img" />
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 区块 -->
-            <div class="section blue-box" :style="{backgroundImage: 'url(' + blueBox.bg + ')'}" v-if="blueBox">
+                    <!-- 主区域 -->
+                    <div class="content-box">
-                <!-- 主区域 -->
-                <div class="content-box">
-
-                    <!-- 视频区块 -->
-                    <div class="video-box" v-if="blueBox.video">
-                        <video class="video" controls :poster="blueBox.video.poster + SIGN.BIG">
-                            <source :src="blueBox.video.url" type="video/mp4" />
-                        </video>
-                    </div>
-
-                    <!-- 列表区块 -->
-                    <div class="list-box" v-if="blueBox.list">
-                        <div class="item" v-for="(item, index) in blueBox.list" :key="index" @click="toDetail(item)">
-                            <img :src="item.img + SIGN.BIG" class="list-img" />
+                        <!-- 视频区块 -->
+                        <div class="video-box" v-if="item.video">
+                            <video class="video" controls :poster="item.video_img + SIGN.BIG">
+                                <source :src="item.video" type="video/mp4" />
+                            </video>
                         </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 区块 -->
-            <div class="section green-box" :style="{backgroundImage: 'url(' + greenBox.bg + ')'}" v-if="greenBox">
-                <!-- 主区域 -->
-                <div class="content-box">
-
-                    <!-- 视频区块 -->
-                    <div class="video-box" v-if="greenBox.video">
-                        <video class="video" controls :poster="greenBox.video.poster + SIGN.BIG">
-                            <source :src="greenBox.video.url" type="video/mp4" />
-                        </video>
-                    </div>
-
-                    <!-- 列表区块 -->
-                    <div class="list-box" v-if="greenBox.list">
-                        <div class="item" v-for="(item, index) in greenBox.list" :key="index" @click="toDetail(item)">
-                            <img :src="item.img + SIGN.BIG" class="list-img" />
+                        <!-- 列表区块 -->
+                        <div class="list-box" v-if="item.ads">
+                            <div class="item" v-for="(subItem, subIndex) in item.ads" :key="subIndex" @click="toDetail(subItem)">
+                                <img :src="subItem.img + SIGN.BIG" class="list-img" />
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
+            </template>
         </div>
         <!-- 回到顶部按钮 -->
@@ -105,13 +65,7 @@
             return {
                 title: "",          // 标题
                 backs: null,        // 后退按钮组
-                redBox: null,       // 红色区块
-                blueBox: null,      // 蓝色区块
-                greenBox: null,     // 绿色区块
-
-                
-
-
+                datas: null         // 列表数据
             }
         },
         components: {
@@ -129,6 +83,7 @@
                 // 添加后退按钮组“后退”和“分享”按钮
                 this.$set(this, 'backs', {
+                    title: this.title,
                     funcs: {
                         back: {
                             icon: "static/img/icon_back.png"
@@ -141,92 +96,35 @@
                         ]
                     }
                 });
-
-                // 设置标题
-                this.$set(this.backs, 'title', '品质优选');
             }
-
-
-            // 优选页面接口
-            // this.fansShopMessageList();
-
-
-
-
-            // 临时，设置各区块头部图片地址
-            this.$set(this, 'redBox', {
-                bg: 'static/img/o_bg_01.png',
-                video: {
-                    poster: 'static/img/o_01_video.png'
-                },
-                list: [
-                    {
-                        img: 'static/img/o_01_01.png'
-                    },
-                    {
-                        img: 'static/img/o_01_02.png'
-                    }
-                ]
-            });
-            this.$set(this, 'blueBox', {
-                bg: 'static/img/o_bg_02.png',
-                video: {
-                    poster: 'static/img/o_02_video.png'
-                },
-                list: [
-                    {
-                        img: 'static/img/o_02_01.png'
-                    },
-                    {
-                        img: 'static/img/o_02_02.png'
-                    }
-                ]
-            });
-            this.$set(this, 'greenBox', {
-                bg: 'static/img/o_bg_03.png',
-                list: [
-                    {
-                        img: 'static/img/o_03_01.png'
-                    },
-                    {
-                        img: 'static/img/o_03_02.png'
-                    }
-                ]
-            });
-
-
-
-
+            // 品质优选
+            this.goodQuality();
         },
         methods: {
             /**
-             * 优选页面接口
+             * 品质优选
              */
-            fansShopMessageList() {
+            goodQuality() {
-                // 校验登录
-                if (this.$parent.checkLogin()) {
+                // 加载中提示
+                Indicator.open("加载中...");
-                    // 加载中提示
-                    Indicator.open("加载中...");
-
-                    // 获取证书请求接口
-                    this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {
-                        uid: this.getStore("uid")
-                    }, this.fansShopMessageListCallback, {
-                        method: "POST"
-                    });
-                }
+                // 获取证书请求接口
+                this.http("/Api/" + this.getApiVersion().good + "/goodQuality", {
+                    id: this.getStore('uid') || 0
+                }, this.goodQualityCallback, {
+                    method: "POST"
+                });
             },
             /**
-             * 优选页面接口回调
+             * 品质优选回调
              * @param {Object} res [服务器返回数据]
              * @param {Object} ext [扩展参数]
              */
-            fansShopMessageListCallback(res, ext) {
+            goodQualityCallback(res, ext) {
                 // 加载完成
                 Indicator.close();
@@ -237,20 +135,20 @@
                     // 解构数据
                     let { data: datas } = res;
-                    /* 获取优选库“优选”数据 开始 */
+                    /* 获取品质优选数据 开始 */
-                    
+                    this.$set(this, 'datas', datas.list);
-                    /* 获取优选库“优选”数据 结束 */
+                    /* 获取品质优选数据 结束 */
                 } else if (res.code == 400) {
-                    // 获取优选失败
+                    // 获取初始数据失败
                     Toast(res.message);
                 } else {
-                    // 获取优选失败
-                    Toast("获取优选失败");
+                    // 获取初始数据失败
+                    Toast("获取数据失败");
                 }
             },
@@ -265,13 +163,9 @@
                     // 判断通用跳转函数是否存在
                     if (typeof this.$parent.gotoDetail === 'function') {
-    
-    
-                        console.log('toDetail', item);
-    
-    
+
                         // 通用跳转
-                        this.$parent.gotoDetail(item);
+                        this.$parent.gotoDetail(item.location);
                     }
                 } else {
@@ -285,6 +179,7 @@
                                 success: this.$refs.callApp.callApp
                             }
+                            // 唤起App
                             this.$parent.callAppModal(options);
                         }
                     });
@@ -292,14 +187,6 @@
             },
             /**
-             * 列表附件按钮事件
-             * @param {Object} item [数据对象]
-             */
-            primary(item) {
-                this.toDetail(item);
-            },
-
-            /**
              * 分享
              */
             toShare() {