YXGJ/cloud/globalSearch/index.vue

<template>
    <view class="global-search">
        <view class="global-search_input">
            <image class="image" src="/static/c+unselected.svg" mode="widthFix" />
            <view style="flex:1">
                <My_search placeholder="搜索全站关键字" @onSearch="onSearch"></My_search>
            </view>
        </view>
        <view class="content">
            <view class="type-tabs">
                <u-tabs :scrollable="false" lineColor="#C30D23" :activeStyle="{ color: '#C30D23', fontWeight: 'bold' }" :list="types"
                @click="changeType" :current="current" />
            </view>
            
            <My_listbox ref="List" @getlist="getList" :bottomHeight="70">
                <view class="list-box">
                    <navigator class="item-box" :url="calcUrl(item)"
                    v-for="item in list" :key="item.sa_fadid"
                    hover-class="navigator-hover">
                        <view class="item">
                            <u--image radius="5" :lazy-load="true" :width="tovw(100)" :height="tovw(100)" :src="item.attinfos.length ? item.attinfos[0].url : avatar">
                                <template v-slot:loading>
                                    <u-loading-icon color="red"></u-loading-icon>
                                </template>
                            </u--image>
                            <view class="title">
                                {{ item.title }}
                            </view>
                        </view>
                        
                    </navigator>
                </view>
            </My_listbox>
        </view>
       
    </view>
</template>

<script>
export default {
    data() {
        return {
            types: [
                {
                    name:'产品',
                    value:1,
                },
                {
                    name:'效果图',
                    value:2,
                },
                {
                    name:'课件',
                    value:3,
                },
                {
                    name:'资料',
                    value:4,
                }
            ],
            content: {
                "type": 1,
                //1:产品：来源单品、案例-电器系统
                //2:效果图：来源效果图管理；
                //3:课件：来源商学院授权可查看的课程中的课件；
                //4:资料：来源装备资源库授权可查看的资料；
                "pageNumber": 1,
                "pageSize": 12,
                "where": {
                    "condition": ""
                }
            },
            list:[],
            current:0,
            avatar:''
        }
    },
    methods: {
        onSearch (condition) {
            this.content.where.condition = condition
            this.getList(true)
        },
        changeType (type) {
            this.current = type.index
            this.content.type = type.value
            this.getList(true)
        },
        getList(init = false) {
            return new Promise((resolve, reject) => {
                if (this.paging(this.content, init)) return resolve();
                this.$Http.basic({
                    "id": "20240513085802",
                    content: this.content
                }).then(res => {
                    this.$refs.List.setHeight()
                    this.$refs.List.RefreshToComplete()
                    console.log("获取产品列表", res)
                    resolve();
                    if (this.cutoff(res.msg)) return;
                    this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
                    this.content = this.$refs.List.paging(this.content, res)
                })
            })
        },
    },
    computed: {
        calcUrl () {
            return (data) => {
                switch (this.current) {
                    case 0:
                        return '/packageCase/product/detail?id='+data.sa_fadid
                        break;
                    case 1:
                        return '/packageCase/imgs/detail?id='+data.sat_sharematerialid
                        break;
                    case 2:
                        return '/packageA/course/detail?id='+data.sat_coursewaredetailid
                        break;
                    case 3:
                        return '/packageA/resourceLibrary/detail?id='+data.sat_sharematerialid
                        break;
                    default:
                        break;
                }
            }
        }
    },
    onLoad () {
        uni.setNavigationBarTitle({
            title: '全站搜索'
            
        });
    },
    created() {
        this.avatar = uni.getStorageSync("site").logo
        this.getList()
    },

}
</script>

<style lang="scss">
.global-search {
    .global-search_input {
        margin: 10px;
        display: flex;
        align-items: center;
        .image{
            width: 40px;
            height: 20px;
            margin-right: 10px;
        }
    }
    .content {
        background: #ffffff;
        .type-tabs {
            margin-bottom: 10px;
        }
        .list-box {
            .item-box{
                padding: 0 10px;
                .item {
                    display: flex;
                    align-items: center;
                    align-content: center;
                    border-bottom: 0.5px solid #DDDDDd;
                    padding: 10px 0;
                    .image-box {
                        margin-right: 10px;
                        width: 100px;
                        height: 100px;
                        padding: 18px;
                        background: #F5F5F5;
                        .image{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .title{
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #333333;
                        margin-left: 10px;
                    }
                }
            }
        }
    }
    
}
</style>