bnyer-cloud-tiktok/pages/atlas/hotSearch.vue

<template>
	<view class="container">
		<view class="head">
			<view>
				<uni-search-bar  class="uni-mt-10" placeholder="开启你的探索旅程吧" clearButton="auto" cancelButton="none" @confirm="search" ></uni-search-bar>
			</view>
		</view>
		<view class="hotSearch">
			<view>
				<uni-section title="大家都在搜">
					<uni-group>
						<uni-data-checkbox mode="tag" v-model="hotKeywordSelected" :localdata="hotKeywordList" @change="selectedHotKeyword" max="1"></uni-data-checkbox>
					</uni-group>
				</uni-section>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		querySignImgBySignName,getHotKeywordList,insertHotKeyword,incrementHotKeywordScore
	} from '@/api/atlas.js'
	export default {
		data() {
			return {
				hotKeywordList:[],
				hotKeywordSelected: "",
			}
		},
		onShow() {
			//解决每次加载页面重新赋值热词列表的BUG
			this.hotKeywordList = [];
			this.getHotKeywordList();
		},
		methods: {
			
			//选中热点词事件
			async selectedHotKeyword(e){
				let that = this;
				console.log('e',e);
				that.hotKeywordSelected = e.detail.data.text; 
				//console.log('进行了点击热点词',that.hotKeywordSelected)
				//热搜词点击次数+1
				that.incrementHotKeywordScore(that.hotKeywordSelected);
				//调用搜索图片方法
				const params = {
					pageNum: 1,
					pageSize: 10,
					signName: that.hotKeywordSelected
				}
				const response = await querySignImgBySignName(params)
					if (response.data.code != 200) {
						uni.showToast({
							title: response.data.msg,
							icon: 'none',
						})
					}else{
						//判断是否返回结果是否有值，有值则跳转对应图片页面，没有则弹窗提示是否跳转AI绘画
						if(response.data.rows.length > 0){
							uni.setStorage({
								key: 'atlas_detailId',
								data: {
									signName: that.hotKeywordSelected,
									type:'search'
								},
								success() {
									uni.navigateTo({
										url: './atlasList'
									})
								}
							})
						}else{
							uni.showModal({
								title: '提示',
								content: '抱歉没有找到想要的图片。不如试试意境绘画!',
								success(res){
									if(res.confirm){
										uni.switchTab({
											url: '../ai/paint/paint'
										})
									}
								}
							});
						}
						
					}
				
			},
			
			//保存热搜词
			async insertHotKeyword(keyword){
				const res = await insertHotKeyword(keyword);
				if (res && res.data.code !== 200) {
					uni.showModal({
						content: res.data.msg,
						showCancel: false
					});
				} 
			},
			
			//热搜词增加点击次数
			async incrementHotKeywordScore(keyword){
				const res = await incrementHotKeywordScore(keyword);
				if (res && res.data.code !== 200) {
					uni.showModal({
						content: res.data.msg,
						showCancel: false
					});
				} 
			},
			
			// 获取热搜词
			async getHotKeywordList() {
				const res = await getHotKeywordList()
				if (res && res.data.code === 200) {
					for (let i = 0; i < res.data.data.length; i++) {
						let data = {
							value: i,
							text: res.data.data[i]
						}
						this.hotKeywordList.push(data);
					}
				} else {
					uni.showModal({
						content: res.data.msg,
						showCancel: false
					});
				}
			},
			
			//搜索图片
			async search(res) {
				if (res.value) {
					//保存热搜词到redis缓存
					this.insertHotKeyword(res.value)
					const params = {
						pageNum: 1,
						pageSize: 10,
						signName: res.value
					}
					const response = await querySignImgBySignName(params)
						if (response && response.data.code != 200) {
							uni.showToast({
								title: response.data.msg,
								icon: 'none',
							})
						}else{
							//判断是否返回结果是否有值，有值则跳转对应图片页面，没有则弹窗提示是否跳转AI绘画
							if(response.data.rows.length > 0){
								uni.setStorage({
									key: 'atlas_detailId',
									data: {
										signName: res.value,
										type:'search'
									},
									success() {
										uni.navigateTo({
											url: './atlasList'
										})
									}
								})
							}else{
								uni.showModal({
									title: '提示',
									content: '抱歉没有找到想要的图片。不如试试意境绘画!',
									success(res){
										if(res.confirm){
											uni.switchTab({
												url: '../ai/paint/paint'
											})
										}
									}
								});
							}
						}
				} else {
					uni.showToast({
						title: '请输入要搜索的标签名',
						icon: 'none',
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.container{
		//width: 670rpx;
		//height: 100vh;
		//margin: 0 auto;
		//position: relative;
		
		.recentSearch{
			margin-top: 50rpx;
			height: 30vh;
			border: 2px solid red;
			font-size: 36rpx;
		}
		
		.hotSearch{
			margin-top: 50rpx;
			height: 50vh;
			//border: 2px solid blue;
			
			.title{
				font-size: 50px;
			}
		}
		
		.uni-searchbar {
			border: 1px solid $uni-primary;
			border-radius: 16rpx;
			padding: 0;
			margin-left: 40rpx;
			margin-right: 40rpx;
			margin-top: 20rpx;
			margin-bottom: 50rpx;
		
			.uni-searchbar__box {
				padding: 0;
				border-radius: 16rpx !important;
			}
		}
	}
</style>