优选库优选首页开发进行中~

王强
1 parent 9c47d6d1
Showing 8 changed files with 701 additions and 11 deletions
src/components/countDownCom/countDownCom.less
src/components/countDownCom/countDownCom.vue
src/components/goodsItem_2/goodsItem_2.vue
src/main.js
src/pages/mall2/mall2.vue
src/pages/optimization2/optimization2.less
src/pages/optimization2/optimization2.vue
src/router/index.js
+@charset "UTF-8";
+
+.count-down-com {
+	.count-down {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		.container {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			.block {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				background-color: #ECECEC;
+				margin-left: 10px;
+				width: 36px;
+				height: 30px;
+				color: #333333;
+				font-size: 20px;
+				border-radius: 4px;
+				&.transparent {
+					background-color: transparent;
+				}
+			}
+			.colon {
+				margin-left: 10px;
+				color: #999999;
+				font-size: 20px;
+			}
+		}
+		&.style-2 {
+			.container {
+				.block {
+					background-color: #3C3C3C;
+					width: 46px;
+					height: 36px;
+					color: #FFFFFF;
+					font-size: 25px;
+					&.transparent {
+						background-color: transparent;
+						color: #333333;
+					}
+				}
+				.colon {
+					color: #3C3C3C;
+					font-size: 24px;
+				}
+			}
+		}
+		&.style-3 {
+			.container {
+				.block {
+					background-color: rgba(189, 164, 127, 1);
+					width: 36px;
+					height: 36px;
+					color: #FFFFFF;
+					font-size: 20px;
+					font-weight: 400;
+				}
+				.colon {
+					color: rgba(189, 164, 127, 1);
+					font-size: 20px;
+					font-weight: 400;
+				}
+			}
+		}
+		&.style-4 {
+			.container {
+				.block {
+					background-color: #3C3C3C;
+					width: 36px;
+					height: 36px;
+					color: #FCF7F1;
+					font-size: 20px;
+					font-weight: 400;
+				}
+				.colon {
+					color: #3C3C3C;
+					font-size: 20px;
+					font-weight: 400;
+				}
+			}
+		}
+	}
+}
 \ No newline at end of file
+<template>
+    <div class="count-down-com" v-if="time">
+        <van-count-down class="count-down" :class="'style-' + sty" :time="time" @finish="finish">
+            <template v-slot="timeData">
+                <div class="container" v-if="timeData.days > 0">
+                    <span class="block transparent">{{ timeData.days }}</span>
+                    <span class="colon">天</span>
+                </div>
+                <div class="container">
+                    <span class="block">{{ timeData.hours }}</span>
+                    <span class="colon" v-if="sty == '2'">时</span>
+                    <span class="colon" v-else>:</span>
+                    <span class="block">{{ timeData.minutes }}</span>
+                    <span class="colon" v-if="sty == '2'">分</span>
+                    <span class="colon" v-else>:</span>
+                    <span class="block">{{ timeData.seconds }}</span>
+                    <span class="colon" v-if="sty == '2'">秒</span>
+                </div>
+            </template>
+        </van-count-down>
+    </div>
+</template>
+
+<script>
+
+    // 引入组件
+	import Vue from 'vue';
+	import { CountDown } from 'vant';
+
+	Vue.use(CountDown);
+
+    export default {
+        name: "count-down-com",
+        data: function () {
+            return {
+                
+            }
+        },
+        props: ["time", "sty"],
+        methods: {
+
+            /**
+             * 倒计时完成事件
+             */
+            finish() {
+                this.$emit("finish");
+            }
+        }
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less" scoped>
+    @import './countDownCom';
+</style>
 \ No newline at end of file
@@ -7,11 +7,11 @@
             <slot name="flag"></slot>
         </div>
 		<div class="content-box">
-			<div class="title" v-if="pid == undefined || pid == '1' ||  pid == '3'">{{item.title}}</div>
+			<div class="title" v-if="pid == undefined || pid == '1' ||  pid == '3' || pid == '4'">{{item.title}}</div>
 			<div class="price-box">
 				<div class="symbol">¥&nbsp;</div>
 				<div class="price">{{item.price}}</div>
-				<div class="prices" v-if="pid == '3' && item.prices &&  parseFloat(item.prices) > 0 ">¥{{item.prices}}</div>
+				<div class="prices" v-if="(pid == '3' || pid == '4') && item.prices &&  parseFloat(item.prices) > 0 ">¥{{item.prices}}</div>
 			</div>
 			<div class="ads" v-if="pid == '2'">
 				{{item.title || ""}}
@@ -6,7 +6,7 @@ import VueHead from &quot;vue-head&quot;;
 import sha1 from "sha1";
 import 'mint-ui/lib/style.css';
 import { Toast, Indicator,InfiniteScroll } from "mint-ui";
-import { Rate, Popup, Lazyload, Search, PullRefresh, Picker, Image, ImagePreview, Tab, Tabs} from "vant";
+import { Rate, Popup, Lazyload, Search, PullRefresh, Picker, Image, ImagePreview, Tab, Tabs, CountDown} from "vant";
 import App from "./App";
 import IdCard from './common/IdCard';
 import VueClipboard from 'vue-clipboard2';
@@ -24,6 +24,7 @@ Vue.use(ImagePreview);
 Vue.use(VueClipboard);
 Vue.use(Tab);
 Vue.use(Tabs);
+Vue.use(CountDown);
 Vue.use(Lazyload, {
     preload: 90,
     loading: "static/img/x.jpg",
@@ -34,9 +34,9 @@
             </div>
             <!-- 店铺列表 -->
-            <div class="shop-list-box" v-if="shopLists && shopLists.length">
+            <div class="shop-list-box" v-if="goodsLists && goodsLists.length">
-                <div class="section shop-list" v-for="(items, index) in shopLists" :key="index" @click="toDetail(items)">
+                <div class="section shop-list" v-for="(items, index) in goodsLists" :key="index" @click="toDetail(items)">
                     <!-- 头图 -->
                     <div class="header-img-box">
@@ -72,10 +72,10 @@
         name: "mallBox",
         data() {
             return {
-                title: "",      // 标题
-                backs: null,    // 后退按钮组
-                navs: null,     // 导航
-                shopLists: null // 店铺列表
+                title: "",          // 标题
+                backs: null,        // 后退按钮组
+                navs: null,         // 导航
+                goodsLists: null    // 店铺列表
             };
         },
         components: {
@@ -113,7 +113,7 @@
             // 临时，初始化店铺列表数据
-            this.$set(this, 'shopLists', [
+            this.$set(this, 'goodsLists', [
                 {
                     header_img: 'static/img/box_banner.jpg',
                     list: [
+@charset "UTF-8";
+
+.optimization-box {
+    background-color: #F6F6F6;
+    min-height: 100vh;
+    .call-app-box {
+        position: fixed;
+        top: 0;
+        z-index: 100;
+    }
+    .back-box {
+        position: fixed;
+        top: 0;
+        z-index: 100;
+        background: linear-gradient(180deg, rgba(0, 0, 0, 0.39) 0%, rgba(0, 0, 0, 0) 100%);
+    }
+    .pl {
+        background-color: transparent;
+        width: 100%;
+        &.is-open-app {
+            height: 122px;
+        }
+        &.is-cnlive {
+            height: 93px;
+        }
+    }
+    .main-box {
+        padding-bottom: 40px;
+        .section {
+            background-color: #ffffff;
+            margin: 40px auto;
+            width: 690px;
+            height: auto;
+            border-radius: 24px;
+            overflow: hidden;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            &.shop-list {
+                .header-img-box {
+                    width: 100%;
+                    height: 100%;
+                    .header-img {
+                        display: block;
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+                .list-box {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    .discount-flag {
+                        position: absolute;
+                        top: 4px;
+                        left: 22px;
+                        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;
+                    }
+                }
+            }
+            &.anchor-list {
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                padding: 40px 0 30px 0;
+            }
+
+
+
+
+
+        }
+    }
+}
+<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'" 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}"></div>
+
+        <!-- 主区域 -->
+        <div class="main-box">
+
+            <!-- 折扣专区 -->
+            <div class="section shop-list">
+
+                <!-- 标题 -->
+                <text-bg-title-com
+                    :titles="{
+                        bg: 'static/img/text_bg_title_bg.jpg'
+                    }">
+
+                    <!-- 倒计时组件 -->
+                    <count-down-com slot="extend"
+                        :time="new Date().getTime() + 900000 - 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" @click="toDiscount(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" @click="anchor(item)"
+                    :item="item">
+                </icons-com>
+            </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 gotoTop from "@/components/gotoTop/gotoTop";
+
+    export default {
+        name: 'optimization',
+        data () {
+            return {
+                title: "",          // 标题
+                backs: null,        // 后退按钮组
+                navs: null,         // 导航
+                goodsLists: null    // 店铺列表
+
+
+
+            }
+        },
+        components: {
+            callAppBox,
+            backBox,
+            textBgTitleCom,
+            countDownCom,
+            goodsItem2,
+            iconsCom,
+
+
+
+            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', [
+                {
+                    id: "295",
+                    shop_type: "",
+                    simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg",
+                    title: "品质优选",
+                    to: "0",
+                    type: "0"
+                },
+                {
+                    id: "295",
+                    shop_type: "",
+                    simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg",
+                    title: "热销排行",
+                    to: "0",
+                    type: "0"
+                },
+                {
+                    id: "295",
+                    shop_type: "",
+                    simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg",
+                    title: "积分商城",
+                    to: "0",
+                    type: "0"
+                },
+                {
+                    id: "295",
+                    shop_type: "",
+                    simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg",
+                    title: "猜你喜欢",
+                    to: "0",
+                    type: "0"
+                }
+            ]);
+
+
+
+
+
+
+
+        },
+        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 [通用跳转对象]
+             */
+            toDiscount(item) {
+
+                // 跳转折扣专区页面
+                if (typeof this.$parent.navBarJump === 'function') {
+
+
+                    console.log(item);
+
+
+
+                    // 页面跳转
+                    this.$parent.navBarJump(item);
+                }
+            },
+
+
+
+
+
+
+
+            /**
+             * 锚点定位
+             * @param {Object} item [数据对象]
+             */
+            anchor(item) {
+
+                
+                console.log('anchor', 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>
 \ No newline at end of file
@@ -163,7 +163,7 @@ const router = new Router({
                 /* 优选和商城页面改版升级页面 开始 */
                 {
-                    // 优选库商城活动页
+                    // 新版优选库商城活动页
                     path: "/mall2",
                     name: "mall2",
                     component: resolve => {
@@ -173,6 +173,17 @@ const router = new Router({
                         requireAuth: false
                     }
                 },
+                {
+                    // 新版优选库“优选”页面
+                    path: "/optimization2",
+                    name: "optimization2",
+                    component: resolve => {
+                        require(["@/pages/optimization2/optimization2"], resolve);
+                    },
+                    meta: {
+                        requireAuth: false
+                    }
+                },
                 /* 优选和商城页面改版升级页面 结束 */