flavorOfTimeSz/subPackages/pointsMall/searchResult.vue

<template>
	<div class="bg">
		<view class="top-bg">
			<div class="search-box">
				<img src="https://static.ticket.sz-trip.com/taizhou/images/search.png" alt="">
				<input type="text" class="input" placeholder="请输入关键字" v-model="keywords" @confirm="search" />
				<div class="btn" @click="search()">搜索</div>
			</div>

		</view>
		<div class="search-list">
			<view @click="gotoDetail(item)" v-for="(item, key) in list" :key="item.id" class="search-item">
				<view class="img" style="position: relative;">
					<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image>
					<!-- <view class="hover-use-type" v-if="item.ext.type=='post'&&item.ext.delivery_method">
						{{item.ext.delivery_method_str.join('/')}}
					</view> -->
				</view>
				<view class="content">
					<view class="title text-overflowRows">
						{{item.title}}
					</view>
	
			
				<view class="flex-between">
						<!-- <view class="distance text-overflow"  >
							<image v-if="item.ext.address||item.ext.scene_address" :src="showImg('https://static.ticket.sz-trip.com/uploads/20250619/0e16bffb0cd3648faa47879d0d532842.png')" class="icon-tip"></image>
							<text v-if="item.ext.address">{{item.ext.address}}</text>
							<text v-else-if="item.ext.scene_address">{{item.ext.scene_address}}</text>
						</view> -->
						<view class="bottom flex-between">
							<view class="price ticlet-price">
								{{item.score_price}}
							</view>
						</view>
						<view class="btn">兑换</view>
					</view>
				</view>
			</view>
			<view class="no-data-zhanwei" v-if="list.length<=0">
				<image src="https://static.ticket.sz-trip.com/uploads/20250618/0c2a469b4216f8cd570822b642d0a0fe.png"></image>
				<view style="padding:50rpx 0 67rpx">暂无数据</view>
			</view>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Search",
		data() {
			return {
				
				page: 1,
				showMore: true,
				list: [],
				keywords: "",
				options: {}
			}
		},
		onLoad(options) {
			this.options = options
			this.keywords = options.keywords;
			this.getList()
		},
		methods: {

			search() {
				this.pushHis(this.keywords);
				this.list = [];
				this.page = 1;
				this.showMore = true;
				this.getList();
			},
			pushHis(keywords) {
				if (!keywords.trim()) {
					return
				}
				
				let history = JSON.parse(uni.getStorageSync('tz_trip_jf_keyowrds')) || [];
				let index = history.findIndex(item => item == keywords);
				if (index >= 0) history.splice(index, 1);
				history.unshift(keywords);
				uni.setStorageSync('tz_trip_jf_keyowrds',JSON.stringify(history))
			},
			gotoDetail(item) {
				uni.navigateTo({
					url:`/subPackages/pointsMall/detail?id=${item.id}&type=score`
				})
			},
			getList() {
				this.Post({
					keyword: this.keywords,
					page: this.page,
				}, '/api/score_goods_sku_price/index').then(res => {
					console.log(res)
					let resData = res.data.data || []
					this.list = [...this.list, ...resData];
					this.showMore = true
					if (res.data.length<10) {
						this.showMore = false
					} else {
						this.page++
						this.showMore = true
					}
				})
			}
		},
		
		onReachBottom() {
			setTimeout(() => {
				if (this.showMore) this.getList()
			},1000)
		}
	}
</script>
<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		
		// padding: 0 30rpx;
	}
	.top-bg{
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		.search-box {
			width: 100%;
			
			height: 67rpx;
			background: #F2F2F2;
			border-radius: 33rpx;
			padding: 6rpx 7rpx 6rpx 26rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			img {
				width: 28rpx;
				height: 30rpx;
			}
			.input {
				flex: 1;
				border: none;
				outline: none;
				background: none;
				color: #666;
				margin: 0 20rpx;
			}
			.btn {
				background-color: #6A8A27;
				border-radius: 27rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				padding: 10rpx 26rpx;
			}
		}
	}

	.search-list {
		padding: 26rpx 30rpx;
		background: #F7F7F7;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.search-item {
		width: 334.67rpx;
		height: 500rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		display: flex;
		margin-bottom: 26rpx;
		flex-direction: column;
		.img {
			width: 334.67rpx;
			height: 334.67rpx;
			border-radius: 13rpx 13rpx 0;
			flex-shrink: 0;
		}
		
		.content {
			padding:10rpx 12rpx 12rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
		}
		.title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 31rpx;
			color: #000000;
			width: 100%;
		}

		.price {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #FB2A54;
			display: flex;
			align-items: baseline;
		}
		.btn{
			    width: 93rpx;
			    height: 47rpx;
			    background: #FB2A54;
			    border-radius: 23rpx;
			    font-weight: bold;
			    font-size: 28rpx;
			    color: #FFFFFF;
			    text-align: center;
			    line-height: 47rpx;
		}
	}

	.list-common-empty{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin: 26rpx 0;
		
	}
	.list-common-empty-tip{
		color:#999;
	}
	
	.common-box {
		height: 90rpx;
		.common-types {
			background: white;
			height: 90rpx;
			font-size: 31rpx;
			z-index: 10;
			margin: auto;
			color: #666;
			overflow-x: scroll;
			overflow-y: hidden;
			padding: 0;
			display: flex;
			justify-content: space-between;
		}
		
		.common-types::-webkit-scrollbar {
			width: 0rpx;
			height: 0;
			display: none;
		}
		
		.common-type {
			margin: 0 26rpx;
			line-height: 90rpx;
			height: 90rpx;
			position: relative;
			color: #000000;
			flex-shrink: 0;
		}
		
		.common-type.active {
			font-size: 31rpx;
			font-weight: bold;
			color: #6A8A27;
		}
		
		.common-type.active:after {
			display: block;
			width: 60%;
			font-size: 0;
			content: '1';
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 1rpx;
			height: 4rpx;
			background: #6A8A27;
			border-radius: 2rpx;
		}
	}
	

	.icon-tip{
		width: 26rpx;
		height: 26rpx;
		margin-right: 6rpx;
	}
	.bottom{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>