搜索

src/pages.json

@@ -92,6 +92,12 @@
                 "navigationBarTitleText": "商品列表"
             }
         },
+        {
+            "path": "pages/goods/list2",
+            "style": {
+                "navigationBarTitleText": "搜索结果"
+            }
+        },
         {
             "path": "pages/order/affirm",
             "style": {

src/pages/goods/list2.vue

@@ -0,0 +1,869 @@
+<template>
+    <div class="page shop-cart-page" :class="{ page_red: theme === 1 }">
+        <div class="search">
+            <input
+                class="search__input"
+                type="text"
+                :focus="true"
+                v-model="keyword"
+                @confirm="confirm"
+                placeholder="搜索本店商品"
+            />
+            <div class="search__cancel" @click="confirm">搜索</div>
+        </div>
+
+        <div class="page-tab">
+            <div
+                class="tab-item"
+                :class="{ on: curTab === '0' }"
+                @click="tabClick('0')"
+            >
+                商品
+            </div>
+            <div
+                class="tab-item"
+                :class="{ on: curTab === '1' }"
+                @click="tabClick('1')"
+            >
+                活动
+            </div>
+        </div>
+
+        <scroll-view
+            class="page__scroll"
+            :scroll-y="true"
+            @scrolltolower="getMore"
+        >
+            <div v-if="curTab === '0'">
+                <ul class="menu">
+                    <li
+                        class="menu__item"
+                        :class="{ 'menu__item--active': sort === 2 }"
+                        @click="setSort(2)"
+                    >
+                        <div class="menu__text">销量</div>
+                    </li>
+                    <li
+                        class="menu__item"
+                        :class="{ 'menu__item--active': sort === 3 }"
+                        @click="setSort(3)"
+                    >
+                        <div class="menu__text">新品</div>
+                    </li>
+                    <li
+                        class="menu__item"
+                        :class="{
+                            'menu__item--active': sort === 1,
+                        }"
+                        @click="setSort('Price')"
+                    >
+                        <div class="menu__text">价格</div>
+                        <div
+                            class="menu__sort"
+                            :class="{
+                                'menu__sort--up': asc == 1 && sort === 1,
+                                'menu__sort--down': asc == 0 && sort === 1,
+                            }"
+                        ></div>
+                    </li>
+                </ul>
+                <ul class="goods">
+                    <li
+                        class="goods__item"
+                        v-for="(item, index) in goodsList"
+                        :key="index"
+                    >
+                        <my-image
+                            class="goods__img"
+                            :src="item.pictureUrls[0]"
+                            @click="jumpGoodsDetail(item)"
+                        ></my-image>
+                        <div
+                            class="goods__title"
+                            @click="jumpGoodsDetail(item)"
+                        >
+                            {{ item.name }}
+                        </div>
+                        <div
+                            class="goods__coupon"
+                            v-if="item.coupon"
+                            @click="jumpGoodsDetail(item)"
+                        >
+                            {{ item.coupon }}
+                        </div>
+                        <div class="goods__price">
+                            <div
+                                class="goods__present"
+                                @click="jumpGoodsDetail(item)"
+                            >
+                                <span class="goods__rmb">¥</span>
+                                <span class="goods__big">{{
+                                    item.minPrice / 100
+                                }}</span>
+                            </div>
+                            <div
+                                class="goods__original"
+                                @click="jumpGoodsDetail(item)"
+                                v-if="item.tagPrice !== 0"
+                            >
+                                {{ "¥" + item.tagPrice / 100 }}
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+                <div class="more-text" v-if="goodsList.length && !isHaveMore">
+                    - 没有更多了 -
+                </div>
+                <div class="null" v-if="loading && !goodsList.length">
+                    <img
+                        class="null__img"
+                        src="/static/common/goods_null_2.jpg"
+                        alt
+                    />
+                    <div class="null__title">抱歉！没有找到相关商品~</div>
+                </div>
+            </div>
+            <div v-if="curTab === '1'">
+                <ul class="shop-list">
+                    <li
+                        class="shop-item"
+                        v-for="item of activityList"
+                        :key="item.aid"
+                    >
+                        <div class="info" @click="jumpList(item)">
+                            <my-image
+                                :src="item.brandLogo"
+                                class="shop-img"
+                            ></my-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
+                                            }}
+                                            —
+                                            {{
+                                                item.endTime | timestampToDate
+                                            }}</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">
+                                    <my-image
+                                        mode="widthFix"
+                                        :src="good.pictureUrls[0]"
+                                        class="good-img"
+                                    ></my-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="activityList.length && !isHaveMore"
+                >
+                    - 没有更多了 -
+                </div>
+                <div class="null" v-if="loading && !activityList.length">
+                    <img
+                        class="null__img"
+                        src="/static/common/goods_null_2.jpg"
+                        alt
+                    />
+                    <div class="null__title">抱歉！没有找到相关商品~</div>
+                </div>
+            </div>
+        </scroll-view>
+    </div>
+</template>
+
+<script>
+import MyImage from "../../components/image/index";
+import FInputNumber from "../../components/form/inputNumber";
+
+export default {
+    name: "",
+    components: { MyImage, FInputNumber },
+    // 数据
+    data() {
+        return {
+            title: "", // 标题（搜索关键字）
+            page: 1, // 页码
+            activityList: [],
+            goodsList:[],
+            isHaveMore: true, // 是否有更多数据
+            loading: false, // 是否加载完成
+            goods: null, // 详情数据 加入购物车时用
+            curTab: "0",
+        };
+    },
+
+    onLoad() {
+        const self = this;
+        self.fn.shareMenu();
+
+        if (!self.loading) {
+            uni.showLoading({
+                title: "加载中...",
+            });
+        }
+    },
+
+    async onShow() {
+        const self = this;
+
+        await self.fn.init();
+        self.fn.shareMenu();
+        self.title = self.$mp.query.title;
+        self.fn.setTitle(self.title);
+        this.tabClick('0')
+    },
+
+    onShareAppMessage() {
+        const self = this;
+        let obj = {
+            ...self.$mp.query,
+            shopId: this.activeShop.id,
+            uid: this.user.user.id,
+        };
+
+        if (this.activeShop.store) {
+            obj.storeId = this.activeShop.store.id;
+        }
+        return {
+            title: self.siteTitle,
+            path: self.router.getPath(self.$mp.page.route, obj),
+        };
+    },
+
+    onPullDownRefresh() {
+        const self = this;
+        if(self.curTab === '0'){
+            this.getGoodsList();
+        }else{
+            self.getActivityList();
+        }
+    },
+
+    // 函数
+    methods: {
+        tabClick(val) {
+            this.curTab = val;
+            if(val==='0'){
+                this.getGoodsList();
+            }else{
+                this.getActivityList();
+            }
+        },
+
+        getMore(){
+            const self = this;
+            if(self.curTab === '0'){
+
+            }else{
+                self.getMoreActivity();
+            }
+        },
+
+        // 获取活动列表
+        getActivityList() {
+            const self = this;
+
+            let keyword = self.title;
+
+            self.page = 1;
+            uni.showLoading({
+                title: "加载中...",
+            });
+            self.api
+                .get("/Product/GetActivityList", {
+                    // aid:'1384044884066840578',
+                    keyword: keyword,
+                    pageIndex: self.page,
+                    pageSize: 20,
+                })
+                .then((res) => {
+                    uni.hideLoading();
+                    uni.stopPullDownRefresh();
+                    let list = JSON.parse(res.data.list);
+                    if (list.length) {
+                        self.page++;
+                    } else {
+                        self.isHaveMore = false;
+                    }
+
+                    self.activityList = list;
+                    self.loading = true;
+                    uni.hideLoading();
+                });
+        },
+
+        // 获取更多活动
+        getMoreActivity() {
+            const self = this;
+
+            self.api
+                .get("/Product/GetActivityList", {
+                    keyword: self.title,
+                    pageIndex: self.page,
+                    pageSize: 20,
+                })
+                .then((res) => {
+                    let list = JSON.parse(res.data.list);
+                    if (list.length) {
+                        self.page++;
+                    } else {
+                        self.isHaveMore = false;
+                    }
+
+                    self.activityList = self.activityList.concat(list);
+                    this.setGoodsList();
+                });
+        },
+
+        // 获取商品列表
+        getGoodsList() {
+            const self = this;
+
+
+            self.page = 1;
+            uni.showLoading({
+                title: "加载中...",
+            });
+            self.api
+                .get("/Product/GetHHSGProductList", {
+                    keyword: self.title,
+                    pageIndex: self.page,
+                    pageSize: 20,
+                })
+                .then((res) => {
+                    uni.hideLoading();
+                    uni.stopPullDownRefresh();
+                    let data = JSON.parse(res.data.list);
+                    if (data.length) {
+                        self.page++;
+                    } else {
+                        self.isHaveMore = false;
+                    }
+
+                    self.goodsList = data;
+                    self.loading = true;
+                    this.setGoodsList();
+                    uni.hideLoading();
+                });
+        },
+
+        // 获取更多商品
+        getMoreGoods() {
+             const self = this;
+
+            self.api
+                .get("/Product/GetHHSGProductList", {
+                    keyword: self.title,
+                    pageIndex: self.page,
+                    pageSize: 20,
+                })
+                .then((res) => {
+                    let data = JSON.parse(res.data.list);
+                    if (data.length) {
+                        self.page++;
+                    } else {
+                        self.isHaveMore = false;
+                    }
+
+                    self.goodsList = self.goodsList.concat(data);
+                    this.setGoodsList();
+                });
+        },
+
+        jumpList(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,
+                },
+            });
+        },
+        // 跳转到商品详情
+        jumpGoodsDetail(val) {
+            const self = this;
+
+            self.router.push({
+                path: "/pages/recommend/detail",
+                query: {
+                    goodsId: val.id,
+                },
+            });
+        },
+    },
+
+    // 数据计算
+    computed: {
+        // 判断主题  1:红色  2：绿色
+        theme() {
+            return this.$store.state.common.theme;
+        },
+        user() {
+            return this.$store.state.user;
+        },
+    },
+
+    // 数据监听
+    watch: {},
+};
+</script>
+
+<style>
+page {
+    height: 100%;
+}
+</style>
+
+<style lang="scss" scoped>
+.search {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: px(128);
+    padding: 0 px(45) px(4);
+    background-color: #efefef;
+
+    &__input {
+        width: px(820);
+        height: px(86);
+        padding: 0 px(24);
+        font-size: px(36);
+        color: #000;
+        background-color: #fff;
+        border-radius: px(8);
+    }
+
+    &__cancel {
+        font-size: px(36);
+        color: #000;
+    }
+}
+.page-tab {
+    // height: px(100);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .tab-item {
+        width: 40%;
+        height: px(120);
+        line-height: px(120);
+        border-bottom: 1px solid #f1f1f1;
+        text-align: center;
+        font-size: px(44);
+        &.on {
+            color: #27a34f;
+        }
+    }
+}
+.page {
+    position: relative;
+    height: 100%;
+
+    &__scroll {
+        position: absolute;
+        top: px(248);
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 1;
+    }
+}
+
+.null {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: px(115);
+
+    &__img {
+        width: px(741);
+        height: px(340);
+    }
+
+    &__title {
+        margin-top: px(60);
+        font-size: px(42);
+        color: #666;
+    }
+}
+
+.more-text {
+    display: flex;
+    justify-content: center;
+    padding-bottom: px(60);
+    font-size: px(34);
+    color: #999;
+}
+
+.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(110);
+                margin-right: px(30);
+                border: 1px solid #fafafa;
+                flex-shrink: 0;
+                /deep/ img {
+                    width: px(110);
+                    height: px(110);
+                }
+            }
+            .r {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .main {
+                    width: 100%;
+                }
+                .btn {
+                    color: #fff;
+                    background-color: $color;
+                    padding: px(15) px(25);
+                    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 {
+                    display: inline-block;
+                    margin-left: px(10);
+                    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;
+        }
+    }
+}
+.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;
+    margin-top: px(30);
+    &__item {
+        display: flex;
+        align-items: center;
+    }
+
+    &__text {
+        font-size: px(40);
+        color: #000;
+    }
+
+    &__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;
+        }
+    }
+}
+
+.goods {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 0 px(25) px(30);
+
+    &__item {
+        width: px(500);
+        padding-bottom: px(30);
+        margin-top: px(25);
+        overflow: hidden;
+        border-radius: px(15);
+        background-color: #fff;
+        position: relative;
+
+        &:nth-child(2n + 1) {
+            margin-right: px(30);
+        }
+    }
+    .button {
+        // overflow: visible;
+        // position: absolute;
+        // bottom: 0;
+        // right: 0;
+        // z-index: 1;
+        // padding: px(10) px(30) px(30) px(10);
+    }
+    .btns {
+        overflow: visible;
+        position: absolute;
+        bottom: px(30);
+        right: px(30);
+        z-index: 1;
+        display: flex;
+        align-items: center;
+    }
+    .cart-num {
+        // padding: px(30) px(10) px(10) px(30);
+        padding: 0 px(30);
+        box-sizing: border-box;
+        min-width: px(60);
+    }
+    .num-input {
+        overflow: visible;
+        position: absolute;
+        bottom: px(20);
+        right: px(20);
+        z-index: 1;
+    }
+    &__add-text {
+        height: px(60);
+        line-height: px(60);
+        background-color: #27a34f;
+        color: #fff;
+        font-size: px(30);
+        padding: 0 px(20);
+        border-radius: px(30);
+    }
+    &__add {
+        background-color: #27a34f;
+        width: px(60);
+        height: px(60);
+        border-radius: 50%;
+        // box-shadow: px(1) px(2) px(6) #27A34F;
+        position: relative;
+        &::after,
+        &::before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            z-index: 1;
+            width: 60%;
+            height: px(6);
+            border-radius: px(6);
+            background: #fff;
+        }
+        &::after {
+            transform: translate(-50%, -50%);
+        }
+        &::before {
+            transform-origin: center;
+            transform: translate(-50%, -50%) rotate(90deg);
+        }
+    }
+
+    &__remove {
+        background-color: #fff;
+        width: px(60);
+        height: px(60);
+        border-radius: 50%;
+        border: 1px solid #999;
+        position: relative;
+        &::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            z-index: 1;
+            width: 60%;
+            height: px(6);
+            border-radius: px(6);
+            background: #999;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    &__img /deep/ img {
+        width: px(500);
+        height: px(500);
+    }
+
+    &__title {
+        @include omits(2);
+        height: px(110);
+        margin: px(20);
+        font-size: px(40);
+        color: #333;
+    }
+
+    &__coupon {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        height: px(40);
+        padding: 0 px(15);
+        margin: 0 px(20);
+        font-size: px(30);
+        color: #27a34f;
+        border-radius: px(20);
+        border: solid px(3) #27a34f;
+    }
+
+    &__price {
+        display: flex;
+        align-items: flex-end;
+        padding: 0 px(20);
+        margin-top: px(20);
+    }
+
+    &__present {
+        color: #000;
+    }
+
+    &__rmb {
+        font-size: px(30);
+    }
+
+    &__big {
+        font-size: px(38);
+    }
+
+    &__original {
+        position: relative;
+        margin-left: px(20);
+        font-size: px(32);
+        color: #999;
+
+        &:after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 0;
+            z-index: 1;
+            width: 100%;
+            height: px(1);
+            transform: translateY(-100%);
+            background-color: #999;
+        }
+    }
+}
+</style>