优选库——新版优选首页页面完成~

王强
1 parent 5b2d20fa
Showing 19 changed files with 429 additions and 38 deletions
src/components/goodsItem_2/goodsItem_2.less
src/components/goodsItem_2/goodsItem_2.vue
src/components/moreCom/moreCom.less
src/components/moreCom/moreCom.vue
src/components/textTitleBox/textTitleBox.less
src/components/textTitleBox/textTitleBox.vue
src/pages/mall2/mall2.vue
src/pages/optimization/optimization.vue
src/pages/optimization2/optimization2.less
src/pages/optimization2/optimization2.vue
static/img/header_discount_list.jpg
static/img/header_hot.png
static/img/hot_img.jpg
static/img/icon_list_arrow_right.png
static/img/icon_more_arrow_right.png
static/img/icon_refresh.png
static/img/icon_shopping_cart.png
static/img/icon_shopping_cart_active.png
static/img/icon_tips.png
@@ -86,4 +86,14 @@
 			}
 		}
 	}
+	&.pid-5 {	// 排名样式
+        .content-box {
+			.title {
+				margin-top: 20px;
+				color: #666666;
+				font-size: 28px;
+				font-weight: 500;
+			}
+		}
+	}
 }
@@ -7,8 +7,8 @@
             <slot name="flag"></slot>
         </div>
 		<div class="content-box">
-			<div class="title" v-if="pid == undefined || pid == '1' ||  pid == '3' || pid == '4'">{{item.title}}</div>
-			<div class="price-box">
+			<div class="title" v-if="pid == undefined || pid == '1' ||  pid == '3' || pid == '4' || pid == '5'">{{item.title}}</div>
+			<div class="price-box" v-if="pid != '5'">
 				<div class="symbol">¥&nbsp;</div>
 				<div class="price">{{item.price}}</div>
 				<div class="prices" v-if="(pid == '3' || pid == '4') && item.prices &&  parseFloat(item.prices) > 0 ">¥{{item.prices}}</div>
+@charset "UTF-8";
+
+.more-com {
+	background-color: transparent;
+	width: 100%;
+	height: auto;
+	.box {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin: 0 auto;
+		width: 90%;
+		height: auto;
+		.points {
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			color: #4A4A4A;
+			font-weight: 600;
+			.key {
+				font-size: 28px;
+			}
+			.value {
+				font-size: 32px;
+			}
+		}
+		.more {
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			.text {
+				color: #999999;
+				font-size: 22px;
+				font-weight: 400;
+			}
+			.icon-img {
+				display: block;
+				width: 22px;
+				height: 22px;
+			}
+		}
+	}
+}
 \ No newline at end of file
+<template>
+    <div class="more-com" v-if="mores">
+		<div class="box">
+			<div class="points" v-if="mores.key && mores.value">
+				<div class="key">
+					{{mores.key}}：
+				</div>
+				<div class="value">
+					{{mores.value}}
+				</div>
+			</div>
+			<div class="points" v-else-if="mores.key">
+				<div class="key">
+					{{mores.key}}
+				</div>
+			</div>
+			<div class="points" v-else-if="mores.value">
+				<div class="value">
+					{{mores.value}}
+				</div>
+			</div>
+			<div class="points" v-else>
+				&nbsp;
+			</div>
+			<div class="more" @click="more(mores)">
+				<div class="text" v-if="mores.moreText">
+					{{mores.moreText}}
+				</div>
+				<div class="text" v-else>查看更多</div>
+				<img :src="mores.icon" class="icon-img" v-if="mores.icon" />
+			</div>
+		</div>
+    </div>
+</template>
+
+<script>
+    export default {
+		name: 'moreCom',
+        data: function () {
+            return {
+
+            }
+        },
+        props: ["mores"],
+		methods: {
+
+			/**
+			 * 更多
+			 * @param {object} item [数据对象]
+			 */
+			more(item) {
+				this.$emit("more", item);
+			}
+		}
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less" scoped>
+    @import './moreCom';
+</style>
@@ -24,7 +24,9 @@
 			}
 		}
 		.more-box {
-			display: contents;
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
 			color: #999999;
 			font-size: 26px;
 			font-weight: 400;
@@ -33,6 +35,14 @@
 				white-space: nowrap;
 				text-overflow: ellipsis;
 				overflow: hidden;
+				& + .icon-img {
+					margin-left: 10px;
+				}
+			}
+			.icon-img {
+				display: block;
+				width: 36px;
+				height: 36px;
 			}
 		}
 	}
@@ -5,7 +5,9 @@
 				<div class="title">{{titles.title}}</div>
 			</div>
 			<div class="more-box" v-if="titles.more" @click="more(titles.more)">
-				<div class="more-text">更多</div>
+				<div class="more-text" v-if="titles.moreText">{{titles.moreText}}</div>
+				<div class="more-text" v-else>更多</div>
+				<img :src="titles.icon" class="icon-img" v-if="titles.icon" />
 			</div>
 		</div>
     </div>
@@ -34,9 +34,9 @@
             </div>
  
             <!-- 店铺列表 -->
-            <div class="shop-list-box" v-if="goodsLists && goodsLists.length">
+            <div class="shop-list-box" v-if="shopLists && shopLists.length">
  
-                <div class="section shop-list" v-for="(items, index) in goodsLists" :key="index" @click="toDetail(items)">
+                <div class="section shop-list" v-for="(items, index) in shopLists" :key="index" @click="toDetail(items)">
  
                     <!-- 头图 -->
                     <div class="header-img-box">
@@ -75,7 +75,7 @@
                 title: "",          // 标题
                 backs: null,        // 后退按钮组
                 navs: null,         // 导航
-                goodsLists: null    // 店铺列表
+                shopLists: null     // 店铺列表
             };
         },
         components: {
@@ -113,7 +113,7 @@
  
  
             // 临时，初始化店铺列表数据
-            this.$set(this, 'goodsLists', [
+            this.$set(this, 'shopLists', [
                 {
                     header_img: 'static/img/box_banner.jpg',
                     list: [
@@ -350,10 +350,11 @@
              */
             toDetail(item) {
  
-                // 判断是否有通用跳转函数
-                if (typeof this.$parent.gotoDetail === 'function') {
-                    // 调用通用跳转
-                    this.$parent.gotoDetail(item);
+                // 跳转封装
+                if (typeof this.$parent.navBarJump === 'function') {
+
+                    // 页面跳转
+                    this.$parent.navBarJump(item);
                 }
             },
  
@@ -430,6 +430,14 @@
                                 this.$set(this.newGoods, "list", [...this.newGoods.list, ...datas]);
                                 break;
                         }
+
+
+
+                        console.log('newGoods', this.newGoods);
+
+
+
+
  
                         // 设置还有需要加载的内容
                         this.$set(this.paging, "loading", false);
@@ -63,6 +63,12 @@
                         border-radius: 6px;
                     }
                 }
+                .points-box {
+                    /deep/ .box {
+                        padding: 28px 0;
+                        border-top: 1px solid #DCDCDC;
+                    }
+                }
             }
             &.anchor-list {
                 display: flex;
@@ -70,11 +76,14 @@
                 align-items: center;
                 padding: 40px 0 30px 0;
             }
-
-
-
-
-
+            &.goods-list {
+                background-color: transparent;
+                .title-box {
+                    & + .column-list-box {
+                        margin-top: 30px;
+                    }
+                }
+            }
         }
     }
 -}
+}
 \ No newline at end of file
@@ -28,7 +28,7 @@
  
                     <!-- 倒计时组件 -->
                     <count-down-com slot="extend"
-                        :time="new Date().getTime() + 900000 - new Date().getTime()"
+                        :time="new Date().getTime() + 10000000 - new Date().getTime()"
                         sty="4">
                     </count-down-com>
                 </text-bg-title-com>
@@ -37,7 +37,7 @@
                 <div class="list-box">
  
                     <!-- 商品展示样式 2 -->
-                    <goods-item-2 class="item" v-for="(item, index) in goodsLists" :key="index" @click="toDiscount(item)"
+                    <goods-item-2 class="item" v-for="(item, index) in goodsLists" :key="index" @jump="toDiscountList(item)"
                         :item="item"
                         pid="4">
  
@@ -49,22 +49,93 @@
                 </div>
             </div>
  
-            <!-- 折扣专区 -->
+            <!-- 锚点区域 -->
             <div class="section anchor-list" v-if="navs && navs.length">
  
                 <!-- 锚点区域（单个图标） -->
-                <icons-com v-for="(item, index) in navs" :key="index" @click="anchor(item)"
+                <icons-com v-for="(item, index) in navs" :key="index" @jump="anchor(item)"
                     :item="item">
                 </icons-com>
             </div>
  
+            <!-- 品质优选 -->
+            <div class="shop-list-box" 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="3">
+                        </goods-item-2>
+                    </div>
+                </div>
+            </div>
+
+
  
+            <!-- 热销排行 -->
+            <div class="section">
+                
+                <!-- 临时，热销排行占位图片 -->
+                <img src="static/img/hot_img.jpg" style="display: block;width: 100%;" />
+            </div>
  
  
  
+            <!-- 积分商城 -->
+            <div class="section shop-list">
  
+                <!-- 标题 -->
+                <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">
+
+                <!-- 标题 -->
+                <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>
  
         <!-- 回到顶部按钮 -->
@@ -84,10 +155,9 @@
     import countDownCom from "@/components/countDownCom/countDownCom";
     import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
     import iconsCom from "@/components/iconsCom/iconsCom";
-
-
-
-
+    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 {
@@ -97,7 +167,10 @@
                 title: "",          // 标题
                 backs: null,        // 后退按钮组
                 navs: null,         // 导航
-                goodsLists: null    // 店铺列表
+                goodsLists: null,   // 折扣专区数据
+                shopLists: null,    // 品质优选
+                points: null,       // 用户积分
+                likeLists: null,    // 猜你喜欢列表
  
  
  
@@ -110,9 +183,9 @@
             countDownCom,
             goodsItem2,
             iconsCom,
-
-
-
+            moreCom,
+            textTitleBox,
+            columnListBox,
             gotoTop
         },
         created() {
@@ -222,6 +295,120 @@
  
  
  
+            // 临时，初始化店铺列表数据
+            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"
+                        }
+                    ]
+                }
+            ]);
+
+
+
+            // 临时，用户积分数据设置
+            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"
+                    }
+                ]
+            });
+
  
  
  
@@ -341,42 +528,101 @@
             },
  
             /**
-             * 折扣专区
+             * 跳转折扣专区列表
              * @param {Object} item [通用跳转对象]
              */
-            toDiscount(item) {
+            toDiscountList(item) {
  
-                // 跳转折扣专区页面
+                // 跳转封装
                 if (typeof this.$parent.navBarJump === 'function') {
  
+                    // 设置跳转参数
+                    let params = {
+
+                    };
  
-                    console.log(item);
+                    // 页面跳转
+                    this.$parent.navBarJump(params);
+                }
+            },
+
+            /**
+             * 锚点定位
+             * @param {Object} item [数据对象]
+             */
+            anchor(item) {
+
+            },
+
+            /**
+             * 跳转品质优选列表
+             * @param {Object} item [通用跳转对象]
+             */
+            toOptimizationList(item) {
+
+                // 跳转封装
+                if (typeof this.$parent.navBarJump === 'function') {
  
+                    // 设置跳转参数
+                    let params = {
  
+                    };
  
                     // 页面跳转
-                    this.$parent.navBarJump(item);
+                    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 [数据对象]
              */
-            anchor(item) {
+            toDetail(item) {
+
+                // 判断通用跳转函数是否存在
+                if (typeof this.$parent.gotoDetail === 'function') {
  
-                
-                console.log('anchor', item);
  
+                    console.log('toDetail', item);
  
+
+                    // 通用跳转
+                    this.$parent.gotoDetail(item);
+                }
+            },
+            /**
+             * 列表加号按钮事件
+             * @param {Object} item [数据对象]
+             */
+            primary(item) {
+                this.toDetail(item);
             },
  
+
+
+
+
+
             /**
              * 分享
              */