店铺tab

src/pages/goods/index.vue

@@ -124,8 +124,25 @@
             </section>
         </div>
 
+        <div class="tab">
+            <div @click="tabClick('1')" :class="{ on: curTab === '1' }">
+                店铺
+            </div>
+            <div @click="tabClick('2')" :class="{ on: curTab === '2' }">
+                优选
+            </div>
+        </div>
+
         <!-- :class="{ dis: categoryDis }" -->
-        <category v-if="loginAfter" :loginAfter="loginAfter" ref="category" class="category"></category>
+        <category
+            v-if="loginAfter && curTab==='1'"
+            :loginAfter="loginAfter"
+            ref="category"
+            class="category"
+        ></category>
+        <recommend v-if="loginAfter && curTab==='2'"></recommend>
+
+
         <wyg-bottom-tab
             ref="tabbar"
             :tabIndex="2"
@@ -138,11 +155,12 @@
 import MyImage from "../../components/image/index";
 import NavBar2 from "../../components/layout/nav-bar2";
 import Category from "./category";
+import Recommend from "./recommend";
 import wygBottomTab from "../../components/wyg-bottom-tab/wyg-bottom-tab";
 
 export default {
     name: "",
-    components: { MyImage, NavBar2, Category, wygBottomTab },
+    components: { MyImage, NavBar2, Category, wygBottomTab,Recommend,Recommend,Recommend },
     // 数据
     data() {
         return {
@@ -150,7 +168,8 @@ export default {
             navHeight: 0,
             categoryDis: true,
             index: 1,
-            loginAfter:false,
+            loginAfter: false,
+            curTab:'1'
         };
     },
     filters: {},
@@ -160,16 +179,16 @@ export default {
     },
     async onShow() {
         await this.fn.init();
-        if(!this.activeShop){
+        if (!this.activeShop) {
             this.router.push({
-                path:'/pages/index/index',
-                isTabBer:true
-            })
+                path: "/pages/index/index",
+                isTabBer: true,
+            });
             return;
         }
         this.loginAfter = true;
         this.getShopData();
-        if(this.$refs.category){
+        if (this.$refs.category) {
             this.$refs.category.refresh();
         }
         this.$refs.tabbar.setIndex(2);
@@ -239,6 +258,10 @@ export default {
                 },
             });
         },
+
+        tabClick(v){
+            this.curTab = v;
+        }
     },
     onShareAppMessage() {
         let url = `/pages/goods/index?uid=${this.user.id}&shopId=${this.activeShop.id}`;
@@ -383,7 +406,7 @@ export default {
     }
 }
 .shop-other {
-    margin-top: px(60);
+    margin-top: px(40);
     .discount {
         display: flex;
         justify-content: space-between;
@@ -575,4 +598,22 @@ export default {
         pointer-events: none;
     }
 }
+.tab {
+    display: flex;
+    justify-content: center;
+    padding: px(60) 0;
+    div {
+        font-size: px(48);
+        margin: 0 px(150);
+        text-align: center;
+        height: px(100);
+        line-height: px(100);
+        padding: 0 px(20);
+        border-bottom: px(4) solid transparent;
+    }
+    .on {
+        color: #27a34f;
+        border-color: #27a34f;
+    }
+}
 </style>

src/pages/goods/recommend.vue

@@ -0,0 +1,818 @@
+<template>
+    <div class="page-main page_red" :style="{ height: pageH }">
+        <div class="page__content">
+            <div class="page__box">
+                <scroll-view class="category" :scroll-y="true">
+                    <ul class="category__list">
+                        <li
+                            class="category__item"
+                            :class="{
+                                'category__item--active': categoryId === 'all',
+                            }"
+                            @click="setCategory('all')"
+                        >
+                            全部
+                        </li>
+                        <li
+                            class="category__item"
+                            :class="{
+                                'category__item--active':
+                                    categoryId === item.id,
+                            }"
+                            v-for="(item, index) in categoryList"
+                            :key="index"
+                            @click="setCategory(item)"
+                        >
+                            {{ item.name }}
+                        </li>
+                    </ul>
+                </scroll-view>
+                <div class="page__right">
+                    <div class="goods">
+                        <scroll-view
+                            class="goods__scroll"
+                            :scroll-y="true"
+                            @scrolltolower="getMoreList"
+                        >
+                            <ul class="shop-list">
+                                <li
+                                    class="shop-item"
+                                    v-for="item of dataList"
+                                    :key="item.aid"
+                                >
+                                    <div class="info" @click="jumpList(item)">
+                                        <image
+                                            mode="aspectFill"
+                                            :src="item.brandLogo"
+                                            class="shop-img"
+                                        ></image>
+                                        <div class="r">
+                                            <div class="main">
+                                                <div class="name">
+                                                    {{ item.brandName }}
+                                                </div>
+                                                <div class="other">
+                                                    <span class="tag"
+                                                        >{{
+                                                            item.onlineProductCount
+                                                        }}款</span
+                                                    >
+
+                                                    <span class="date"
+                                                        >{{
+                                                            item.beginTime
+                                                                | timestampToDate(
+                                                                    "yy/MM/dd"
+                                                                )
+                                                        }}
+                                                        —
+                                                        {{
+                                                            item.endTime
+                                                                | timestampToDate(
+                                                                    "yy/MM/dd"
+                                                                )
+                                                        }}</span
+                                                    >
+                                                </div>
+                                            </div>
+                                            <span class="btn">进入会场</span>
+                                        </div>
+                                    </div>
+                                    <div class="good-list">
+                                        <section
+                                            class="good-item"
+                                            v-for="good of item.prods"
+                                            :key="good.pid"
+                                            @click="jumpDetail(good)"
+                                        >
+                                            <div class="box">
+                                                <image
+                                                    mode="widthFix"
+                                                    :src="good.pictureUrls[0]"
+                                                    class="good-img"
+                                                ></image>
+                                                <div class="good-name">
+                                                    {{ good.name }}
+                                                </div>
+                                                <div class="price">
+                                                    ￥{{
+                                                        good.minPrice
+                                                            | minuteToRmb2
+                                                    }}
+                                                </div>
+                                                <div
+                                                    class="tag-price"
+                                                    v-if="
+                                                        good.maxPrice &&
+                                                        good.maxPrice !==
+                                                            good.minPrice
+                                                    "
+                                                >
+                                                    ￥{{
+                                                        good.maxPrice
+                                                            | minuteToRmb2
+                                                    }}
+                                                </div>
+                                            </div>
+                                        </section>
+                                    </div>
+                                </li>
+                            </ul>
+                            <div
+                                class="more-text"
+                                v-if="dataList.length && !isHaveMore"
+                            >
+                                - 没有更多商品了 -
+                            </div>
+                            <div
+                                class="null"
+                                v-if="loading && !dataList.length"
+                            >
+                                <img
+                                    class="null__img"
+                                    src="/static/common/goods_null.jpg"
+                                    alt
+                                />
+                                <div class="null__title">
+                                    抱歉！没有找到相关商品~
+                                </div>
+                            </div>
+                        </scroll-view>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import MyImage from "../../components/image/index";
+export default {
+    name: "",
+    components: { MyImage },
+    props: {
+        loginAfter: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    // 数据
+    data() {
+        return {
+            categoryId: "",
+            categoryList: [],
+            page: 1, // 页码
+            dataList: [],
+            isHaveMore: true, // 是否有更多数据
+            loading: false, // 是否加载完成
+            cartList: [],
+
+            goods: null, // 详情数据 加入购物车时用
+            cartNum: 0, // 购物车数量
+            categoryAllVisible: false, // 分类全部显示
+            shopId: "", //店铺id
+            index: 1,
+            pageH: "90vh",
+        };
+    },
+
+    async created() {
+        this.initHeight();
+        this.refresh();
+    },
+
+    // onPullDownRefresh() {
+    //     this.getCategory();
+    //     this.getList();
+    //     this.$refs.shopCart.refresh();
+    // },
+
+    // 函数
+    methods: {
+        refresh() {
+            this.categoryId = "";
+            this.subCategoryId = "";
+            this.getCategory();
+        },
+
+        initHeight() {
+            let menuButtonObject = uni.getMenuButtonBoundingClientRect();
+            uni.getSystemInfo({
+                success: (res) => {
+                    // this.navTaberHeight = res.screenWidth?44/(res.screenWidth/750):88;
+                    let statusBarHeight = res.statusBarHeight || 20;
+                    let navHeight =
+                        statusBarHeight +
+                        menuButtonObject.height +
+                        (menuButtonObject.top - statusBarHeight) * 2;
+                    this.pageH = innerHeight - navHeight - navHeight + "px";
+                },
+            });
+        },
+
+        // 获取商品分类
+        getCategory() {
+            const self = this;
+            this.api.get("/Product/GetCateList").then((res) => {
+                let data = JSON.parse(res.data);
+                for (let item of data) {
+                    item.id = item.categoryId;
+                }
+                this.categoryList = data;
+                if (!self.categoryId) {
+                    self.categoryId = this.categoryList[0].id || "";
+                }
+            });
+        },
+
+        // 设置商品分类
+        setCategory(val) {
+            const self = this;
+
+            self.categoryId = val.id;
+            this.categoryAllVisible = false;
+        },
+
+        // 获取列表
+        getList() {
+            const self = this;
+            uni.showLoading({
+                title: "加载中...",
+            });
+            self.page = 1;
+            let sendData = {
+                pageIndex: self.page,
+            };
+            if (this.categoryId !== "all") {
+                sendData.cateId = this.categoryId;
+            }
+            self.api.get("/Product/GetActivityList", sendData).then((res) => {
+                uni.hideLoading();
+                uni.stopPullDownRefresh();
+                let data = JSON.parse(res.data.list);
+                if (data.length) {
+                    self.page++;
+                } else {
+                    self.isHaveMore = false;
+                }
+
+                self.dataList = data;
+                self.loading = true;
+                uni.hideLoading();
+            });
+        },
+
+        // 获取更多商品
+        getMoreList() {
+            const self = this;
+
+            let sendData = {
+                pageIndex: self.page,
+            };
+            if (this.categoryId !== "all") {
+                sendData.cateId = this.categoryId;
+            }
+            self.api
+                .get("/Product/GetActivityList",sendData)
+                .then((res) => {
+                    let data = JSON.parse(res.data.list);
+                    if (data.length) {
+                        self.page++;
+                    } else {
+                        self.isHaveMore = false;
+                    }
+
+                    self.dataList = self.dataList.concat(data);
+                });
+        },
+
+        jumpList(item) {
+            console.log(item);
+            this.router.push({
+                path: "/pages/recommend/list",
+                query: {
+                    aid: item.activityNo,
+                },
+            });
+        },
+
+        jumpDetail(good) {
+            this.router.push({
+                path: "/pages/recommend/detail",
+                query: {
+                    goodsId: good.pid,
+                },
+            });
+        },
+    },
+
+    // 数据计算
+    computed: {
+        // 判断主题  1:红色  2：绿色
+        theme() {
+            return this.$store.state.common.theme;
+        },
+        user() {
+            return this.$store.state.user;
+        },
+    },
+
+    // 数据监听
+    watch: {
+        categoryId(val) {
+            const self = this;
+
+            if (val) {
+                self.getList();
+            }
+        },
+    },
+};
+</script>
+
+<style>
+.page-main {
+    height: 100vh;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+}
+</style>
+
+<style lang="scss" scoped>
+.page {
+    &__top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: px(145);
+        padding: 0 px(50);
+        background-color: #fff;
+        // box-shadow: 0 px(-5) px(10) #333;
+    }
+
+    &__content {
+        position: relative;
+        flex: 1;
+        margin-top: px(5);
+    }
+
+    &__box {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &__right {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        position: relative;
+    }
+}
+
+.search {
+    display: flex;
+    align-items: center;
+    width: px(890);
+    height: px(86);
+    padding: 0 px(35);
+    background-color: #f8f8f8;
+    border-radius: px(43);
+
+    &__icon {
+        margin-top: px(10);
+        font-size: px(60);
+        color: #999;
+    }
+
+    &__text {
+        margin-left: px(15);
+        font-size: px(36);
+        color: #999;
+    }
+}
+
+.service {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    &__icon {
+        font-size: px(50);
+        color: #666;
+    }
+
+    &__text {
+        font-size: px(30);
+        color: #666;
+    }
+}
+
+.category {
+    width: px(225);
+    height: 100%;
+    background-color: #f8f6f7;
+
+    &__item {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        font-size: px(40);
+        color: #888;
+        background-color: #f8f6f7;
+        padding: px(60) 0;
+
+        &--active {
+            // font-weight: 700;
+            color: #333;
+            background-color: #fff;
+            &:before {
+                content: "";
+                position: absolute;
+                top: 50%;
+                left: 0;
+                z-index: 1;
+                display: block;
+                width: px(8);
+                height: 100%;
+                transform: translateY(-50%);
+                border-radius: px(4);
+                background-color: #27a34f;
+            }
+        }
+    }
+}
+
+.category-sub {
+    position: relative;
+    height: px(130);
+    background-color: #fff;
+    margin-right: px(140);
+    margin-left: px(20);
+    &__scroll {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 1;
+    }
+
+    &__list {
+        display: flex;
+        align-items: center;
+        height: 100%;
+    }
+
+    &__toggle {
+        position: absolute;
+        top: 0;
+        right: px(-140);
+        z-index: 2;
+        width: px(140);
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: px(30);
+        transform: rotate(90deg);
+        &.active {
+            transform: rotate(-90deg);
+        }
+    }
+
+    &__item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
+        height: 100%;
+        font-size: px(34);
+        width: px(220);
+        color: #333;
+        height: px(70);
+        border-radius: px(35);
+        background-color: #f6f6f6;
+        border: 1px solid #f6f6f6;
+        color: #888;
+        margin: 0 px(10);
+        &--active {
+            color: #262626;
+            background-color: rgba(39, 163, 79, 0.2);
+            border: 1px solid #27a34f;
+            color: #27a34f;
+        }
+    }
+}
+
+.category-sub-all {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    z-index: 10;
+    margin-top: px(130);
+    &__bg {
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.3);
+    }
+    &__scroll {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 10;
+    }
+    &__list {
+        display: flex;
+        flex-wrap: wrap;
+        background-color: #fff;
+        padding: px(60) px(40);
+    }
+    &__item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
+        height: 100%;
+        font-size: px(34);
+        width: px(220);
+        color: #333;
+        height: px(70);
+        border-radius: px(35);
+        background-color: #f6f6f6;
+        border: 1px solid #f6f6f6;
+        color: #888;
+        margin: 0 px(20) px(30);
+        flex-shrink: 0;
+        &--active {
+            color: #262626;
+            background-color: rgba(39, 163, 79, 0.2);
+            border: 1px solid #27a34f;
+            color: #27a34f;
+        }
+    }
+}
+
+.goods {
+    position: relative;
+    flex: 1;
+    border-top: 1px solid #f6f6f6;
+
+    &__scroll {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 1;
+        background-color: #fff;
+    }
+}
+
+.menu {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: px(110);
+    margin-bottom: px(5);
+    padding: 0 px(85);
+    background-color: #fff;
+    // box-shadow: 0 px(-5) px(10) #333;
+
+    &__item {
+        display: flex;
+        align-items: center;
+    }
+
+    &__text {
+        font-size: px(36);
+        color: #888;
+    }
+
+    &__item--active &__text {
+        color: #27a34f;
+    }
+
+    &__sort {
+        margin-left: px(15);
+
+        &:before {
+            display: block;
+            content: "";
+            width: 0;
+            height: 0;
+            margin-bottom: px(10);
+            border-width: px(12);
+            border-style: solid;
+            border-color: transparent transparent #ccc transparent;
+        }
+
+        &:after {
+            display: block;
+            content: "";
+            width: 0;
+            height: 0;
+            border-width: px(12);
+            border-style: solid;
+            border-color: #ccc transparent transparent transparent;
+        }
+
+        &--up:before {
+            border-color: transparent transparent #27a34f transparent;
+        }
+
+        &--down:after {
+            border-color: #27a34f transparent transparent transparent;
+        }
+    }
+}
+
+.more-text {
+    display: flex;
+    justify-content: center;
+    padding-bottom: px(60);
+    font-size: px(34);
+    color: #999;
+}
+
+.null {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: px(115);
+
+    &__img {
+        width: px(576);
+        height: px(281);
+    }
+
+    &__title {
+        margin-top: px(60);
+        font-size: px(40);
+        color: #666;
+    }
+}
+
+.page_red {
+    /deep/ {
+        .category {
+            &__item {
+                &--active {
+                    &:before {
+                        background-color: #27a34f;
+                    }
+                }
+            }
+        }
+        .category-sub {
+            &__item {
+                &--active {
+                    background-color: rgba(39, 163, 79, 0.2);
+                    border: 1px solid #27a34f;
+                    color: #27a34f;
+                }
+            }
+        }
+        .category-sub-all {
+            &__item {
+                &--active {
+                    color: #262626;
+                    background-color: rgba(39, 163, 79, 0.2);
+                    border: 1px solid #27a34f;
+                    color: #27a34f;
+                }
+            }
+        }
+        .goods {
+            &__add-text {
+                background-color: #27a34f;
+            }
+            &__add {
+                background-color: #27a34f;
+                box-shadow: px(1) px(2) px(6) #27a34f;
+            }
+        }
+
+        .menu {
+            .menu__item--active .menu__text {
+                color: #27a34f;
+            }
+
+            &__sort {
+                &--up:before {
+                    border-color: transparent transparent #27a34f transparent;
+                }
+
+                &--down:after {
+                    border-color: #27a34f transparent transparent transparent;
+                }
+            }
+        }
+    }
+}
+
+.shop-list {
+    .shop-item {
+        padding: px(30);
+        background-color: #fff;
+        & ~ .shop-item {
+            margin-top: px(30);
+        }
+        .info {
+            display: flex;
+            justify-content: space-between;
+            .shop-img {
+                width: px(120);
+                height: px(120);
+                margin-right: px(30);
+                border: 1px solid #fafafa;
+                flex-shrink: 0;
+            }
+            .r {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .main {
+                    width: 100%;
+                }
+                .btn {
+                    color: #fff;
+                    background-color: $color;
+                    padding: px(10) px(20);
+                    flex-shrink: 0;
+                    font-size: px(38);
+                }
+                .name {
+                    font-size: px(40);
+                    @include omits(2);
+                }
+                .other {
+                    margin-top: px(10);
+                }
+                .tag {
+                    height: px(44);
+                    font-size: px(32);
+                    line-height: px(44);
+                    padding: 0 px(8);
+                    display: inline-block;
+                    margin-right: px(15);
+                    color: $color;
+                    border: 1px solid $color;
+                    border-radius: px(5);
+                }
+                .date {
+                    margin-top: px(6);
+                    display: block;
+                    font-size: px(38);
+                    color: #666;
+                }
+            }
+        }
+    }
+    .good-list {
+        margin: px(30) px(20) 0;
+        display: flex;
+        .good-item {
+            width: 33.333333%;
+            padding: 0 px(20);
+        }
+        .good-img {
+            width: 100%;
+            /deep/ img {
+                width: 100%;
+            }
+        }
+        .good-name {
+            margin-top: px(20);
+            font-size: px(40);
+            @include omits(2);
+        }
+        .price {
+            margin-top: px(20);
+            color: $color;
+            font-size: px(42);
+        }
+        .tag-price {
+            margin-top: px(10);
+            color: #999;
+            line-height: 1;
+            font-size: px(36);
+            text-decoration: line-through;
+        }
+    }
+}
+</style>

src/pages/recommend/index.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="page tabbar-page">
-        <section class="search">
+        <!-- <section class="search">
             <i class="iconfont iconsearch search-icon"></i>
             <input type="text" class="input" placeholder="搜索店铺" />
-        </section>
+        </section> -->
 
         <scroll-view class="cate-list" :scroll-x="true">
             <ul class="list-main">