h5-tiyu/pages/index/index-search.vue

<template>
	<view class="tap">
		<view class="">
			<u-navbar :placeholder='true' :fixed='true'>
				<u-search placeholder="请输入书名、作者搜索" v-model="keyword1" :show-action="false"
					@search="tosearch(1)"></u-search>
			</u-navbar>
		</view>
		<view class="u-flex u-row-between top" v-if="positionlist.length == 0">
			<view class="his">
				搜索历史
			</view>
			<view class="" @click="clear">
				<u-icon name="trash" color="rgba(0,0,0,.7)" size="14"></u-icon>
			</view>
		</view>
		<view class="u-flex" style="flex-wrap: wrap;margin-top: 24rpx;" v-if="positionlist.length == 0">
			<view class="item" style="margin-right: 16rpx;" v-for="(item,index) in search" :key="index">
				{{item}}
			</view>
		</view>
		<view class="u-flex u-row-between pad" style="margin-top:30rpx ;">
			<view class="" v-for="(item,index) in list" :key="index" @click="onchange(index)">
				<text :class="curret==index?'one':'two' ">{{item}}</text>
				<view v-if="curret==index" class="bottom">
				</view>
			</view>
		</view>
		<view class="sou">
			<text>共32条“</text>
			<text style="color: #0ED4AA;">{{keyword1}}</text>
			<text>”相关的搜素结果</text>
		</view>
		<view class="list1">
			<view class="u-flex" style="margin-top: 28rpx;" v-if="curret==0">
				<image src="/static/logo.png" style="width: 239rpx;height: 240rpx;" mode=""></image>
				<view class="u-flex-col " style="margin-left: 20rpx;height: 240rpx;padding: 12rpx 0;
 justify-content: space-between;">
					<view class="">
						<view class="title">ERP财务管理系统教程（用友U8V10.111111111)</view>
						<view class="writer">陆培中，刘亚男</view>
					</view>
					<view class="">
						<text class="ding">定价</text>
						<text class="yang">¥</text>
						<text class="money">38.5</text>
					</view>
				</view>
			</view>
			<view class="top" v-if="curret==2">
				<view class="flex">
					<image src="/static/logo.png" style="width: 212rpx;height: 128rpx;" mode=""></image>
					<view class="" style="margin-left: 20rpx;">
						<view class="title1">ERP财务管理系统教程（用友U8V10.11111111)</view>
						<view class="writer">陆培中，刘亚男</view>
					</view>
				</view>
				<view class="money1">
					¥158.0
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword1: '',
				search: [],
				positionlist: [1],
				list: [
					'纸质书', '电子书', '名师教学视频'
				],
				curret: 0,
			};
		},
		onLoad() {
			if (uni.getStorageSync('searchdata')) {
				this.search = uni.getStorageSync('searchdata')
			}
		},
		methods: {
			onchange(index) {
				this.curret = index
			},
			clear() {
				uni.removeStorageSync('searchdata')
				this.search = []
			},
			tosearch(type) {
				// this.positionlist = []
				// if (type == 1) {
				// 	this.keyword = this.keyword1
				// }
				// this.page = 1
				// this.total = 0
				// this.getlist()
				if (this.keyword1 != '') {
					this.search.push(this.keyword1)
				}
				uni.setStorageSync('searchdata', this.search)
			},
		}
	}
</script>

<style lang="scss">
	.title1 {
		font-size: 28rpx;
		font-family: SFPro, SFPro;
		font-weight: 400;
		color: #333333;
	}

	.title {
		font-size: 28rpx;
		font-family: SFPro, SFPro;
		font-weight: 400;
		color: #333333;
	}

	.top {
		margin-top: 26rpx;
		border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
	}

	.money1 {
		font-size: 32rpx;
		font-family: SFPro, SFPro;
		font-weight: 500;
		color: #CC3300;
		margin-top: 16rpx;
		padding: 0 0 24rpx 0;

		margin-left: 232rpx;
	}

	.one {
		font-size: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #222222;
	}

	.flex {
		display: flex;
	}

	.list1 {
		margin-top: 4rpx;
	}

	.writer {
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-top: 20rpx;
	}

	.yang {
		font-size: 24rpx;
		font-family: SFPro, SFPro;
		font-weight: 400;
		color: #CC3300;
	}

	.money {
		font-size: 32rpx;
		font-family: SFPro, SFPro;
		font-weight: 400;
		color: #CC3300;
	}

	.ding {
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #555555;
	}

	.sou {
		margin-top: 18rpx;
		border-top: 2rpx solid rgba(0, 0, 0, 0.10);
		padding: 28rpx 0 0 0;
		font-size: 24rpx;
		font-family: SFPro, SFPro;
		font-weight: 400;
		color: #333333;
	}

	.bottom {
		width: 64rpx;
		height: 12rpx;
		background: linear-gradient(270deg, rgba(6, 169, 113, 0) 0%, #0ED4AA 100%);
		margin-top: -15rpx;
	}

	.two {
		font-size: 30rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #555555;
	}

	.tap {
		padding: 0 28rpx 18rpx;
	}

	.top {
		margin-top: 38rpx;
	}

	.item {
		height: 54rpx;
		background: #F3F3F3;
		border-radius: 6rpx;
		line-height: 54rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #222222;
		padding: 0 18rpx;
	}

	.his {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #222222;
	}

	::v-deep .u-content {
		// padding: 0 0 0 106rpx;
	}
</style>