deming/pageB/search/index.vue

<template>
    <view class="search">
        <view class="list">
            <view class="title">搜索发现</view>
            <view class="label">
                <text v-for="(label, index) in searchwordlist" :key="index" @click="search(label.word)">{{ label.word }}</text>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name:"search",
    data(){
        return{
			type: '', // 1 商家达人社区 2 商品
			keyword: "",
			searchwordlist: [],
        }
	},
	// type: 2 商品 1: 其他
	onLoad(option) {
		this.type = option.type;
		this.getWordList();
	},
	// 点击搜索按钮
	onNavigationBarButtonTap(e) {
		if(e.index == 0) this.search(this.keyword);
	},
	// 输入框文本变化
	onNavigationBarSearchInputChanged(e) {
		this.keyword = e.text;
	},
	// 点击键盘搜索按钮
	onNavigationBarSearchInputConfirmed(value) {
		this.search(this.keyword);
	},
    methods:{
		getWordList() {
			this.$u.api.searchwordlist({type:this.type}).then(res => {
                console.log(res)
                this.searchwordlist = res.data;
                
			})
		},
        search(value){
			// console.log(value)
			if(!value) {
				this.$u.toast('搜索内容不可为空');
				return false;
			}
			let params = {
				value: value,
				type: this.type,
			}
			if(this.type == 2) {
                this.$u.route({
                    url: "/pageB/search/out",
                    params: params,
                })
			}else{
                this.$u.route({
                    url: "/pageB/search/searchGoods",
                    params: params,
                })
            }
            
        }
    }
}
</script>
<style lang="scss" scoped>
.search{
    .sosuo{
        width: 100%;
        height: 88rpx;
        border-bottom: 1rpx solid #ececec;
        display: flex;
        align-items: center;
        padding: 0 30rpx;

        >image{
            width: 18rpx;
            height: 32rpx;
            margin-right: 24rpx;
            flex-shrink: 0;
        }
        align-items: center;
    }
    .list{
        padding: 30rpx;
        .title{
            font-size: 26rpx;
            color: #999;

        }
        .label{
            display: flex;
			flex-wrap: wrap;
            > text {
                margin-top: 20rpx;
                margin-right: 30rpx;
                font-size: 26rpx;
                color: #666;
                text-align: center;
                padding: 17rpx 12rpx;
                background-color: #ececec;
                border-radius: 10rpx;
            }
        }
    }
}
</style>