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

<template>
	<view class="tap">
		<view class="" >
			<u-navbar height='55' :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="show1">
			<view class="his">
				搜索历史
			</view>
			<view class="" @click="clear">
				<u-icon name="trash" color="rgba(0,0,0,.7)" size="28"></u-icon>
			</view>
		</view>
		<view class="u-flex" style="flex-wrap: wrap;margin-top: 24rpx;" v-if="show1">
			<view class="item" style="margin-right: 16rpx;" v-for="(item,index) in search" :key="index"
				@click="searcha(item)">
				{{item}}
			</view>
		</view>
		<view v-if="show" 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 v-if="show" class="sou">
			<text>共{{total}}条“</text>
			<text style="color: #0ED4AA;">{{keyword1}}</text>
			<text>”相关的搜素结果</text>
		</view>
		<view class="" v-if="positionlist.length > 0">
			<view class="list1">
				<view @click="toinfo(item.id)" v-for="(item,index) in positionlist" :key="index" class="u-flex"
					style="margin-top: 28rpx;" v-if="curret==0">
					<view class="" style="width: 239rpx;">
						<image :src="item.image" style="width: 239rpx;height: 240rpx;" mode=""></image>
					</view>
					<view class="u-flex-col " style="margin-left: 20rpx;height: 240rpx;padding: 12rpx 0;
			justify-content: space-between;">
						<view class="">
							<view class="title">{{item.title}}</view>
							<view class="writer">{{item.author}}</view>
						</view>
						<view class="">
							<text class="ding">定价</text>
							<text class="yang">¥</text>
							<text class="money">{{item.price}}</text>
						</view>
					</view>
				</view>
				<view @click="toinfo(item.id)" v-for="(item,index) in positionlist" :key="index" class="u-flex"
					style="margin-top: 28rpx;" v-if="curret==1">
					<view class="" style="width: 239rpx;">
						<image :src="item.image" style="width: 239rpx;height: 240rpx;" mode=""></image>
					</view>
					<view class="u-flex-col " style="margin-left: 20rpx;height: 240rpx;padding: 12rpx 0;
			justify-content: space-between;">
						<view class="">
							<view class="title">{{item.title}}</view>
							<view class="writer">{{item.author}}</view>
						</view>
						<view class="">
							<text class="ding">定价</text>
							<text class="yang">¥</text>
							<text class="money">{{item.price}}</text>
						</view>
					</view>
				</view>
				<view @click="tovideo(item.id)" v-for="(item,index) in VideoList" :key="index" class="top"
					v-if="curret==2">
					<view class="flex">
						<view class="" style="width: 212rpx;">
							<image :src="item.image" style="width: 212rpx;height: 128rpx;" mode=""></image>
						</view>
						<view class="" style="margin-left: 20rpx;">
							<view class="title1">{{item.title}}</view>
							<view class="writer">{{item.lecturer}}</view>
						</view>
					</view>
					<view class="money1">
						¥{{item.price}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword1: '',
				search: [],
				positionlist: [],
				list: [
					'纸质书', '电子书', '名师教学视频'
				],
				curret: 0,
				page: 1,
				limit: 10,
				show: false,
				show1: true,
				total: 0,
				VideoList: []
			};
		},
		onLoad() {
			if (uni.getStorageSync('searchdata')) {
				this.search = uni.getStorageSync('searchdata')
			}
		},
		methods: {
			tovideo(id) {
				uni.navigateTo({
					url: "/pages/index/video?id=" + id
				})
			},
			toinfo(id) {
				uni.navigateTo({
					url: '/pages/index/bookinfo?id=' + id
				})
			},
			searcha(item) {
				this.keyword1 = item
				this.getBooksList()
			},
			onchange(index) {
				this.curret = index
				if (index == 2) {
					this.getVideoList()
				} else {
					this.getBooksList()
				}
			},
			clear() {
				uni.removeStorageSync('searchdata')
				this.search = []
			},
			tosearch(type) {
				if (this.keyword1 != '') {
					this.search.push(this.keyword1)
				}
				uni.setStorageSync('searchdata', this.search)
				this.getBooksList()
			},
			getBooksList() {
				this.$u.post('api/books/getBooksList', {
					page: this.page,
					limit: this.limit,
					keywords: this.keyword1,
					book_type: this.curret
				}).then(res => {
					this.positionlist = res.data.data
					this.total = res.data.total
					if (this.positionlist.length == 0) {
						this.show = true
						this.show1 = false
					} else if (this.positionlist.length > 0) {
						this.show = true
						this.show1 = false
					}
				})
			},
			getVideoList() {
				this.$u.post('api/video/getVideoList', {
					page: this.pagea,
					limit: this.limita,
					keywords: this.keyword1
				}).then(res => {
					console.log('list', res);
					this.total = res.data.total
					this.VideoList = res.data.data
					if (this.VideoList.length == 0) {
						this.show = true
						this.show1 = false
					} else if (this.VideoList.length > 0) {
						this.show = true
						this.show1 = false
					}
				})
			}
		}
	}
</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;
	}
	::v-deep .u-navbar-inner{
		padding-right: 28rpx;
	}
</style>