deming/pageB/search/out.vue

<template>
    <view class="out">
        <u-tabs-swiper v-if="type == 'dianpu'" @change="tabsChange" :show-bar="false" :bold="false" :font-size="32"
            active-color="#FF780F" ref="uTabs" :list="list" :is-scroll="false" style="border-bottom: 1px solid #ececec;flex-shrink:0"
            height="88"></u-tabs-swiper>
        <swiper v-if="type == 'dianpu'" class="swiper" :current="swiperCurrent" @transition="transition"
            @animationfinish="animationfinish">
            <swiper-item>
                <scroll-view :scroll-y="true" style="height:100%">
                    <view style="padding-top:30rpx">
                        <shop></shop>
                    </view>
                </scroll-view>
            </swiper-item>
            <swiper-item>
                <scroll-view :scroll-y="true" style="height:100%">
                    <view class="list">
                        <!-- <darenItem style="margin-top:20rpx;margin-right:23rpx;box-shadow:0rpx 3rpx 7rpx 0rpx rgba(153, 153, 153, 0.35);" v-for="item in 50"></darenItem> -->
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>
        <view v-else style=" display: flex;flex-direction: column;height: calc(100vh - 88rpx);">
            <view class="select">
                <view @click="sx(0)" class="xz" data-type="xl">销量</view>
                <view class="xz" @click="sx(1)">
                    <text>价格</text>
                    <view class="jiage">
                        <view class="top topxz"></view>
                        <view class="bottom bottomxz"></view>
                    </view>
                </view>
                <view data-type="hp" @click="sx(2)">好评</view>
            </view>
            <view class="swiper" :current="swiperCurrent" @change="huadong">
                <scroll-view :scroll-y="true" style="height:100%">
                    <view style="padding-top:30rpx">
                        <shop v-for="(i,j) in shoplist" :key="j" :name="i.goods_name" :id="i.goods_id" :commonid="i.goods_commonid"
                            :image="i.goods_image"></shop>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>
<style lang="scss" scoped>
    .out {
        display: flex;
        flex-direction: column;
        height: 100vh;

        .sosuo {
            width: 100%;
            height: 88rpx;
            border-bottom: 1rpx solid #ececec;
            display: flex;
            align-items: center;
            padding: 0 30rpx;
            flex-shrink: 0;

            >image {
                width: 18rpx;
                height: 32rpx;
                margin-right: 24rpx;
                flex-shrink: 0;
            }

            align-items: center;
        }

        .swiper {
            width: 100%;
            height: 100%;

            .list {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                padding-left: 30rpx;
            }
        }

        .select {
            width: 100%;
            height: 89rpx;
            border-bottom: 1rpx solid #ececec;
            display: flex;
            align-items: center;
            padding: 0 40rpx;
            flex-shrink: 0;
            justify-content: space-between;

            >view {
                font-size: 32rpx;
                color: #333;
                display: flex;
                font-weight: 400;

                .jiage {
                    display: flex;
                    flex-direction: column;

                    .top {
                        width: 12rpx;
                        border-bottom: 12rpx solid #707070;
                        border-left: 11rpx solid #fff;
                        border-right: 11rpx solid #fff;
                        margin-bottom: 2rpx;
                    }

                    .bottom {
                        width: 12rpx;
                        border-top: 12rpx solid #707070;
                        border-left: 11rpx solid #fff;
                        border-right: 11rpx solid #fff;
                    }

                    .topxz {
                        border-bottom: 12rpx solid #FF780F;
                    }

                    .bottomxz {
                        border-top: 12rpx solid #FF780F;
                    }
                }
            }

            .xz {
                color: #FF780F;
            }

        }
    }
</style>
<script>
    import shop from "../components/search/shop"
    import darenItem from "@/components/index/daren-item/index"
    export default {
        name: "out",
        components: {
            shop,
            darenItem
        },
        data() {
            return {
                list: [{
                    name: "店铺"
                }, {
                    name: "达人"
                }],
                current: 0,
                swiperCurrent: 0,
                keyword: "",
                type: "",
                shoplist: []
            }
        },
        onLoad(o) {
            this.type = o.type
            this.keyword = o.value
            this.search()
        },
        methods: {
            tabsChange(index) {
                this.swiperCurrent = index;
            },
            transition(e) {
                let dx = e.detail.dx;
                this.$refs.uTabs.setDx(dx);
            },
            animationfinish(e) {
                let current = e.detail.current;
                this.$refs.uTabs.setFinishCurrent(current);
                this.swiperCurrent = current;
                this.current = current;
            },
            sx(type) {
                console.log(type)

            },
            huadong(e) {
                console.log(e.detail.current)
            },
            search() {
                this.$u.api.ShopSearch({
                    keyword: this.keyword
                }).then((res) => {
                    this.shoplist = res.data.data
                })
            }
        },
    }
</script>