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>
              <swiper class="swiper" :current="swiperCurrent" @change="huadong">
                <swiper-item>
                    <scroll-view :scroll-y="true" style="height:100%">
                        <view style="padding-top:30rpx">
                            <shop v-for="(i,j) in shoplist[0]" :key="j" :name="i.goods_name" :id="i.goods_id" :commonid="i.goods_commonid" :image="i.goods_image"></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-item> 
                    <scroll-view :scroll-y="true" style="height:100%">
                       D
                    </scroll-view>
                </swiper-item>
            </swiper>
        </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[0] = res.data.data
            })
        }
    },
}
</script>