“优选”页面，商品部分套用接口完成~

王强
1 parent 77386572
Showing 10 changed files with 343 additions and 28 deletions
src/components/goodsItem_1/goodsItem_1.less
src/components/goodsItem_2/goodsItem_2.less
src/components/goodsItem_3/goodsItem_3.less
src/components/goodsItem_3/goodsItem_3.vue
src/components/style_7/style_7.vue
src/components/textTitleBox/textTitleBox.vue
src/pages/mall/mall.vue
src/pages/optimization/optimization.less
src/pages/optimization/optimization.vue
src/router/index.js
@@ -12,7 +12,8 @@
 		height: 200px;
 		.simg {
 			display: block;
-			width: 200px;
+            width: 200px;
+            height: 200px;
 		}
 	}
 	.title {
@@ -52,7 +53,8 @@
 			height: 170px;
 			.simg {
 				display: block;
-				width: 170px;
+                width: 170px;
+                height: 170px;
 			}
 		}
 		.title {
@@ -62,4 +64,4 @@
 			margin-top: 10px;
 		}
 	}
-}
 \ No newline at end of file
+}
@@ -21,6 +21,7 @@
             .simg {
                 display: block;
                 width: 200px;
+                height: 200px;
             }
         }
     }
@@ -24,7 +24,8 @@
 			overflow: hidden;
 			.simg {
 				display: block;
-				width: 240px;
+                width: 240px;
+                height: 240px;
 			}
 		}
 		.content-box {
@@ -92,5 +93,5 @@
 				}
 			}
 		}
-	}	
-}
 \ No newline at end of file
+	}
+}
@@ -17,7 +17,8 @@
 						<div class="price">{{item.price}}</div>
 					</div>
 					<div class="buttons-box">
-						<div class="btn btn-primary" @click.stop.prevent @click="primary(item)">{{item.primaryText}}</div>
+						<!-- <div class="btn btn-primary" @click.stop.prevent @click="primary(item)">{{item.primaryText}}</div> -->
+						<div class="btn btn-primary" @click.stop.prevent @click="primary(item)">立即购买</div>
 					</div>
 				</div>
 			</div>
@@ -29,12 +30,12 @@
     export default {
         data: function () {
             return {
-                
+
             }
         },
         props: ["item"],
 		methods: {
-			
+
 			/**
 			 * 点击跳转
 			 * @param {object} item [数据对象]
@@ -57,4 +58,4 @@
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style rel="stylesheet/less" lang="less" scoped>
     @import './goodsItem_3';
-</style>
 \ No newline at end of file
+</style>
 <template>
     <div class="style-7-com" v-if="styles">
 		<div class="com">
-			
+
 			<!-- 引入标题 -->
 			<title-box v-if="styles.simg" @more="more"
 				:titles="{
@@ -39,7 +39,7 @@
     export default {
         data: function () {
             return {
-                
+
             }
         },
 		props: ["styles"],
@@ -48,7 +48,7 @@
 			horizList
         },
 		methods: {
-			
+
 			/**
 			 * 更多
 			 * @param {object} item [数据对象]
@@ -87,4 +87,4 @@
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style rel="stylesheet/less" lang="less" scoped>
     @import './style_7';
-</style>
 \ No newline at end of file
+</style>
@@ -4,7 +4,7 @@
 			<div class="title-box">
 				<div class="title">{{titles.title}}</div>
 			</div>
-			<div class="more-box" @click="more(titles)">
+			<div class="more-box" v-if="titles.more" @click="more(titles.more)">
 				<div class="more-text">更多</div>
 			</div>
 		</div>
 <template>
     <div class="mall-box">
-        
+
         <!--轮播-->
         <swiper v-if="banner"
             :swipers="banner">
         </swiper>
-        
+
         <!--导航-->
         <swiperItem v-if="navs"
             :navs="navs">
         </swiperItem>
-        
+
         <!-- 遍历ads，输出列表数据 -->
         <div class="ads-box">
             <div class="ads" v-for="(item, index) in ads" :key="index">
-                
+
                 <!--优惠专区-->
                 <discountZone v-if="item.style == '1'" @more="toDetail" @toDetail="toDetail"
                     :discountZoneInfo="item">
                 </discountZone>
-                
+
                 <!--天天特惠-->
                 <preferential v-if="item.style == '2'" @more="toDetail" @toDetail="toDetail"
                     :preferentialInfo="item">
                 </preferential>
-                
+
                 <!--视听专区-->
                 <videoArea v-if="item.style == '13'" @more="toDetail" @toDetail="toDetail"
                     :videoAreaInfo="item">
@@ -48,7 +48,7 @@
     import preferential from "@/components/preferential/preferential";
     import videoArea from "@/components/videoArea/videoArea";
     import style7 from "@/components/style_7/style_7";
-    
+
     export default {
         name: 'mall',
         data() {
@@ -99,7 +99,7 @@
                 // 加载完成
                 Indicator.close();
-                
+
                 // 返回处理
                 if (res.code == 200) {
@@ -107,7 +107,7 @@
                     let { data: datas } = res;
                     /* 获取优选库精选活动数据 开始 */
-                    
+
                     // 设置标题
                     this.$set(this, "title", datas.title);
@@ -125,6 +125,9 @@
                     if (datas.ads && datas.ads.length) {
                         this.$set(this, "ads", datas.ads);
                     }
+
+                    /* 获取优选库精选活动数据 结束 */
+
                 } else if (res.code == 400) {
                     // 获取优选库精选活动失败
@@ -175,11 +178,9 @@
              * @param {object} item [数据对象]
              */
             addCart(item) {
-                
-
-                console.log("addCartA", item);
-
+                // 通用跳转
+                this.jump(item);
             }
         },
         head: {
+@charset "UTF-8";
+
+.optimization-box {
+    .goods-list-box {
+        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 10%, rgba(249, 249, 249, 1) 100%);
+        padding-top: 50px;
+        .components-box {
+            margin-bottom: 50px;
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+<template>
+    <div class="optimization-box">
+
+        <!-- 已关注达人列表（4条） -->
+
+
+
+
+
+        <!-- 商品部分 -->
+        <div class="goods-list-box">
+
+            <!-- 商品样式 2 横排flex -->
+            <horiz-list-flex class="components-box" v-if="hotGoods && hotGoods.length" @jump="jump"
+                :lists="hotGoods"
+                com="2"
+                pid="2"
+                :flags="{
+                    icon: [
+                        'static/img/icon_n1.png',
+                        'static/img/icon_n2.png',
+                        'static/img/icon_n3.png'
+                    ]
+                }">
+
+                <!-- 标题 -->
+                <text-title-box slot="title-box" @more="more"
+                    :titles="{
+                        title: '热销商品',
+                        more: hotGoodsMore
+                    }">
+                </text-title-box>
+            </horiz-list-flex>
+
+            <!-- 商品样式 3 滑动 -->
+            <horiz-list class="components-box" v-if="newGoods && newGoods.length" @jump="jump" @primary="primary"
+                :lists="newGoods"
+                com="3">
+
+                <!-- 标题 -->
+                <text-title-box slot="title-box" @more="more"
+                    :titles="{
+                        title: '最新上架',
+                        more: newGoodsMore
+                    }">
+                </text-title-box>
+            </horiz-list>
+
+            <!-- 商品样式 2 滑动 -->
+            <horiz-list class="components-box" v-if="newBuyGoods && newBuyGoods.length" @jump="jump"
+                :lists="newBuyGoods"
+                com="2"
+                pid="1">
+
+                <!-- 标题 -->
+                <text-title-box slot="title-box"
+                    :titles="{
+                        title: '最近购买'
+                    }">
+                </text-title-box>
+            </horiz-list>
+
+            <!-- 商品样式 3 滑动 -->
+            <horiz-list class="components-box" v-if="recommendGoods && recommendGoods.length" @jump="jump" @primary="primary"
+                :lists="recommendGoods"
+                com="3">
+
+                <!-- 标题 -->
+                <text-title-box slot="title-box"
+                    :titles="{
+                        title: '猜你喜欢'
+                    }">
+                </text-title-box>
+            </horiz-list>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    // 引入组件
+    import { Toast, Indicator } from "mint-ui";
+    import horizList from "@/components/horizList/horizList";
+    import horizListFlex from "@/components/horizListFlex/horizListFlex";
+    import textTitleBox from "@/components/textTitleBox/textTitleBox";
+
+    export default {
+        data () {
+            return {
+                title: "",
+                hotGoods: null,         // 热销商品
+                hotGoodsMore: null,     // 热销商品更多
+                newGoods: null,         // 最新上架
+                newGoodsMore: null,     // 最新上架更多
+                newBuyGoods: null,      // 最新购买
+                recommendGoods: null    // 猜你喜欢
+            }
+        },
+        components: {
+            horizList,
+            horizListFlex,
+            textTitleBox,
+
+
+        },
+        created() {
+
+            // 设置标题
+            this.$set(this, "title", "优选");
+
+            // 优选页面接口
+            this.fansShopMessageList();
+        },
+        methods: {
+
+            /**
+             * 优选页面接口
+             */
+            fansShopMessageList() {
+
+                // 校验登录
+                if (this.$parent.checkLogin()) {
+
+                    // 加载中提示
+                    Indicator.open("加载中...");
+
+                    // 获取证书请求接口
+                    this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {
+                            uid: (this.$route.query.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;
+
+                    /* 获取优选库“优选”数据 开始 */
+
+                    // 获取“热销商品”
+                    if (datas.hotGoods && datas.hotGoods.length) {
+
+                        // 设置“热销商品”数据
+                        this.$set(this, "hotGoods", datas.hotGoods);
+
+                        // 判断“热销商品”更多
+                        if (datas.hotGoodsMore) {
+
+                            // 设置“热销商品”更多
+                            this.$set(this, "hotGoodsMore", datas.hotGoodsMore);
+                        }
+                    }
+
+                    // 获取“最新上架”
+                    if (datas.newGoods && datas.newGoods.length) {
+
+                        // 设置“最新上架”数据
+                        this.$set(this, "newGoods", datas.newGoods);
+
+                        // 判断“最新上架”更多
+                        if (datas.newGoodsMore) {
+
+                            // 设置“最新上架”更多
+                            this.$set(this, "newGoodsMore", datas.newGoodsMore);
+                        }
+                    }
+
+                    // 获取“最近购买”
+                    if (datas.newBuyGoods && datas.newBuyGoods.length) {
+
+                        // 设置“最近购买”数据
+                        this.$set(this, "newBuyGoods", datas.newBuyGoods);
+                    }
+
+                    // 获取“猜你喜欢”
+                    if (datas.recommendGoods && datas.recommendGoods.length) {
+
+                        // 设置“猜你喜欢”数据
+                        this.$set(this, "recommendGoods", datas.recommendGoods);
+                    }
+
+                    /* 获取优选库“优选”数据 结束 */
+
+                } else if (res.code == 400) {
+
+                    // 获取优选失败
+                    Toast(res.message);
+                } else {
+
+                    // 获取优选失败
+                    Toast("获取优选失败");
+                }
+            },
+
+            /**
+             * 跳转
+             * @param {object} item [数据对象]
+             */
+            jump(item) {
+
+                // 判断并调用通用跳转
+                if (typeof this.$parent.gotoDetail === "function") {
+
+                    // 构造跳转详情页参数
+                    let options = {
+                        type: "2",
+                        to: item.id,
+                        shop_type: item.shop_type
+                    }
+
+                    this.$parent.gotoDetail(options);
+                }
+            },
+
+            /**
+			 * 主按钮点击事件
+			 * @param {object} item [数据对象]
+			 */
+			primary(item) {
+
+                // 调用详情
+                this.jump(item);
+			},
+
+            /**
+             * 更多
+             * @param {object} item [数据对象]
+             */
+            more(item) {
+
+
+                console.log("more", item);
+
+
+
+                // 判断并调用通用跳转
+                if (typeof this.$parent.gotoDetail === "function") {
+                    this.$parent.gotoDetail(item);
+                }
+            }
+        },
+        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() {
+
+        }
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang='less' scoped>
+    @import "optimization";
+</style>
@@ -39,6 +39,17 @@ const router = new Router({
                     }
                 },
                 {
+                    // 优选库“优选”页面
+                    path: "/optimization",
+                    name: "optimization",
+                    component: resolve => {
+                        require(["@/pages/optimization/optimization"], resolve);
+                    },
+                    meta: {
+                        requireAuth: false
+                    }
+                },
+                {
                     // 优选库商城活动页
                     path: "/com",
                     name: "com",