shop_app/pages/search/index.vue

<template>
	<view class="whole">
		<search-input @searchBtn="searchBtn" :searchValue="searchValue" :show="true" />
		
		<view class="topBox" v-if="historyList.length">
			<view class="flex1" style="margin-bottom: 24rpx;">
				<view class="title">历史搜索</view>
				<view @click="delHistory" style="padding: 0 10rpx;">
					<up-icon name="trash-fill" color="#333" size="16" />
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in historyList" :key="index" @click="chooseValue(item)">
					{{item}}
				</view>
			</view>
		</view>
		
		<scroll-view class="listBox" scroll-x :scroll-with-animation="true">
			<view class="item" v-if="hotList.length" :class="backBuy.length ? '' : 'wid100'">
				<view class="back flex1">
					<view class="imgs">热卖榜单</view>
					<view @click="jumpTo">全部榜单<up-icon name="arrow-right" :color="Color" size="14" /></view>
				</view>
				<view class="list flex1" v-for="(item, index) in hotList" :key="index" @click="toGroup(item.id)">
					<view class="imgBox">
						<image :src="item.face_img" mode="aspectFill" class="pic" />
						<view class="num flex">{{index + 1}}</view>
					</view>
					
					<view class="cont">
						<view class="title">{{item.title}}</view>
						<view class="flex1">
							<view class="price">
								<text v-if="item.price * 1 > 0">￥{{item.price}}</text>
								<template v-else>
									<text v-if="item.max_price === item.min_price">￥{{item.min_price}}</text>
									<text v-else>￥{{item.min_price}}~{{item.max_price}}</text>
								</template>
							</view>
							<view class="sale">已售{{item.sales}}件</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="item" v-if="backBuy.length">
				<view class="back flex1">
					<view class="imgs">回购榜单</view>
				</view>
				<view class="list flex1" v-for="(item, index) in backBuy" :key="index" @click="toGroup(item.id)">
					<view class="imgBox">
						<image :src="item.shopGoods.face_img" mode="aspectFill" class="pic" />
						<view class="num flex">{{index + 1}}</view>
					</view>
					
					<view class="cont">
						<view class="title">{{item.shopGoods.title}}</view>
						<view class="flex1">
							<view class="price">￥
								<text v-if="item.shopGoods.price * 1 > 0">{{item.shopGoods.price}}</text>
								<template v-else>
									<text v-if="item.shopGoods.max_price === item.shopGoods.min_price">{{item.shopGoods.min_price}}</text>
									<text v-else>{{item.shopGoods.min_price}}~{{item.shopGoods.max_price}}</text>
								</template>
							</view>
							<view class="sale">已售{{item.shopGoods.sales}}件</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { ref, reactive, toRefs, onMounted } from 'vue'
	import { get } from '@/api/request.js'
	import searchInput from '@/components/searchInput/index.vue'
	import { Style } from '@/utils/list.js'
	
	export default {
		components: {
			searchInput
		},
		setup() {
			const data = reactive({
				hotList: [],
				backBuy: [],
				Color: '',
				Theme: '',
				priceColor: ''
			})

			const toGroup = (id) => {
				uni.navigateTo({
					url: '/pages/groups/index?id=' + id
				})
			}
			
			const jumpTo = () => {
				uni.navigateTo({
					url: '/pages/sale/list?type=2'
				})
			}
			
			const getHotBuy = () => {
				get('/api/app/special/top').then((res) => {
					data.hotList = res.data
				})
			}
			
			const getBackBuy = () => {
				get('/api/app/rePurchase').then((res) => {
					data.backBuy = res.data
				})
			}
			
			const historylist = uni.getStorageSync('historyList') || []
			const historyList = ref([...historylist])

			const searchValue = ref('')

			function getValue(val) {
				searchValue.value = val
			}

			function chooseValue(item) {
				searchBtn(item)
			}

			function searchBtn(val) {
				searchValue.value = val
				if (!searchValue.value) {
					return
				} else {
					let index = historyList.value.indexOf(searchValue.value)
					if (index !== 0) {
						if (index !== -1) {
							historyList.value.splice(index, 1)
						}
						historyList.value.unshift(searchValue.value)
						historyList.value.splice(6)
						uni.setStorageSync('historyList', historyList.value)
					}
				}
				uni.navigateTo({
					url: '/pages/search-result/index?value=' + searchValue.value
				})
			}
			
			function delHistory() {
				uni.showModal({
					title: '提示',
					content: '确认删除全部搜索记录吗？',
					confirmColor: '#42b983',
					success(res) {
						if (res.confirm) {
							historyList.value = []
							uni.removeStorageSync('historyList')
						}
					}
				})
			}

			onMounted(() => {
				data.Color = uni.getStorageSync('theme_color')
				data.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
				data.Theme = uni.getStorageSync('theme_index') * 1
				getHotBuy()
				getBackBuy()
			})
			return {
				historyList,
				searchValue,
				chooseValue,
				searchBtn,
				toGroup,
				jumpTo,
				getHotBuy,
				getBackBuy,
				...toRefs(data),
				delHistory
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flex1{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.whole{
		padding-bottom: 30rpx;
		.topBox{
			padding: 30rpx;
			box-sizing: border-box;
			.title {
				font-size: 30rpx;
				font-weight: bold;
			}
			.list {
				display: flex;
				flex-wrap: wrap;
				.item {
					display: flex;
					align-items: center;
					height: 53rpx;
					padding: 0 20rpx;
					border-radius: 6rpx;
					background-color: #fff;
					font-size: 24rpx;
					margin: 0 20rpx 15rpx 0;
				}
			}
		}
		.listBox{
			width: 100%;
			display: flex;
			align-items: center;
			white-space: nowrap;
			margin-top: 30rpx;
			.item{
				display: inline-block;
				width: 80%;
				margin-left: 30rpx;
				border-radius: 16rpx;
				position: relative;
				vertical-align: top;
				&:last-child{
					margin-right: 30rpx;
				}
				&.wid100{
					width: calc(100% - 60rpx);
				}
				&::after{
					display: flex;
					box-sizing: border-box;
					align-items: center;
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 200%;
					height: 200%;
					transform: scale(0.5);
					transform-origin: 0 0;
					border: 1rpx solid #ecd068;
					border-radius: 32rpx;
					pointer-events: none;
				}
			}
			.list{
				font-size: 28rpx;
				padding: 18rpx 24rpx;
				box-sizing: border-box;
				.imgBox{
					position: relative;
					.num{
						position: absolute;
						left: 10rpx;
						top: 10rpx;
						background-color: rgba(0, 0, 0, 0.5);
						font-size: 24rpx;
						color: #fff;
						width: 40rpx;
						height: 40rpx;
						border-radius: 3px;
					}
					.pic{
						width: 120rpx;
						height: 120rpx;
						border-radius: 8rpx;
						vertical-align: bottom;
					}
				}
				.cont{
					width: calc(100% - 140rpx);
					height: 120rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.title{
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						white-space: break-spaces;
						font-size: 28rpx;
						line-height: 40rpx;
					}
					.price{
						color: v-bind('priceColor');
						font-size: 30rpx;
					}
					.sale{
						color: #666;
						font-size: 24rpx;
					}
				}
			
			}
			
			.back{
				height: 96rpx;
				background-size: 100%;
				background-repeat: no-repeat;
				padding: 0 24rpx;
				color: v-bind('Color');
				box-sizing: border-box;
				font-size: 28rpx;
				background: linear-gradient(to bottom , rgba(255,249,224,0.45), transparent);
				.imgs {
					display: flex;
					align-items: center;
					font-size: 32rpx;
				}
			}
		}
	}
</style>