shop-applet/pages/product/addGoodDetail/goodsSearch.vue

<template>
	<view class="content">
		<view class="" style="padding: 30rpx;">
			<u-search v-model="keyword" :showAction="true" actionText="搜索" :animation="true"
				@change="hdChange"></u-search>
		</view>
		<view class="" v-if='!keyword' style="padding-left: 44rpx;">
			<view style="margin: 60rpx 0 30rpx 14rpx;">
				常用分类
			</view>
			<view class="types">
				<view class="types-li" v-for="(item,index) in searchList" @click='hdChose(item)'>
					{{item.label}}
				</view>

			</view>

			<view style="margin: 60rpx 0 30rpx 14rpx;">
				热门分类
			</view>
			<view class="types">
				<view class="types-li" v-for="(item,index) in hotList" @click='hdChose(item)'>
					{{item.label}}
				</view>
			</view>

		</view>
		<view class="" v-else style="margin: 10rpx 0 0 30rpx;">
			<view class="" v-if='searchList.length'>
				<view class="keyword-li" v-for='item in searchList' @click='hdChose(item)'>
					{{item.label}}
					<u-line direction="row" color="#ECECEC"></u-line>
				</view>
			</view>
			<view v-else style="text-align: center;margin-top: 50rpx;">
				暂无搜索结果,点击 <text @click="navgo" style='color:#35BC3E;text-decoration: underline;'>手动选择</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		categorySearch,
		categoryHotcate,
		categorySearchHistory,
	} from '@/api/product.js'
	export default {
		data() {
			return {
				keyword: "",
				mer_id: "",
				searchList: [],
				hotList: []
			}
		},
		methods: {
			hdChange() {
				categorySearch(this.mer_id, {
					keyword: this.keyword
				}).then(res => {
					this.searchList = res.data
				})
			},
			navgo() {
				uni.navigateTo({
					url: `/pages/product/addGoodDetail/goodsType?mer_id=${this.mer_id}&&type=simple`
				})
			},
			hdChose(item) {
				categorySearchHistory(this.mer_id, this.$store.state.app.userInfo.uid, {
					cate_id: item.value
				})
				uni.navigateTo({
					url: `/pages/product/addGood/addGood?mer_id=${this.mer_id}&&data=${JSON.stringify(item)}`
				})
			}
		},
		onLoad(option) {
			this.mer_id = option.mer_id
			categoryHotcate(
				option.mer_id,
				this.$store.state.app.userInfo.uid
			).then(res => {
				this.hotList = res.data.hot_cate.map(item => ({
						label: item.cate_name,
						value: item.store_category_id

					})

				)
				this.searchList = res.data.active_cate.map(item => ({
						label: item.cate_name,
						value: item.store_category_id

					})

				)
			})

		}
	}
</script>

<style lang='scss'>
	.MediumFont {
		font-family: PingFangFamily;
	}

	.RegularFont {
		font-family: PingFangRegular;
	}

	.content {
		box-sizing: border-box;
		background-color: #FFFFFF;
		min-height: 100vh;
		position: relative;
		font-size: 28rpx;
		font-family: PingFangRegular;

		.types {
			display: flex;
			flex-wrap: wrap;

			.types-li {
				background-color: #F6F6F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 16rpx 24rpx;
				margin-bottom: 46rpx;
				margin-right: 20rpx;
			}

		}

		.keyword-li {
			padding-right: 30rpx;
			/* background-color: #F6F6F6; */
			height: 100rpx;
			line-height: 100rpx;
		}

		.keyword-li:active {
			background-color: #F6F6F6;
		}
	}
</style>