h5-tiyu/components/ty-electronic/ty-electronic.vue

<template>
	<view class="page1" style="background: #fff;">
		<view class="" style="position: relative;height: 16px;">
			<view class="top u-flex u-row-between">
				<view class="u-flex" @click="change(0)">
					<text :class="current==0?'new':'fen'">教材级别</text>
					<image src="/static/images/down.png" style="width: 12rpx;height: 8rpx;margin-left: 8rpx;" mode="">
					</image>
				</view>
				<view class="u-flex" @click="change(1)">
					<text :class="current==1?'new':'fen'">教学层次</text>
					<image src="/static/images/down.png" style="width: 12rpx;height: 8rpx;margin-left: 8rpx;" mode="">
					</image>
				</view>
				<view class="u-flex" @click="change(2)">
					<text :class="current==2?'new':'fen'">专业分类</text>
					<image src="/static/images/down.png" style="width: 12rpx;height: 8rpx;margin-left: 8rpx;" mode="">
					</image>
				</view>
				<view @click="change(3)" class="" :class="current==3?'new':'fen'">获奖教材</view>
				<view @click="change(4)" :class="current==4?'new':'fen'">新书推荐</view>
			</view>
			<view v-show="current==0" class="absolt" v-if="onpageshow">
				<div style="padding: 8rpx 28rpx 36rpx;box-sizing: border-box;display: flex;flex-wrap: wrap;">
					<view :class="item1==-1?'itemb':'itema'" @click="changeitem(-1,'')">全部</view>
					<view :class="item1==index?'itemb':'itema'" v-for="(item,index) in itemlist" :key="index"
						@click="changeitem(index,item.id)">
						{{item.title}}
					</view>
				</div>
				<view class="u-flex u-row-between" style="padding: 20rpx 28rpx;box-sizing: border-box;">
					<view class="btn1" @click="onpageshow=false">取消</view>
					<view class="btn2" @click="enter">确认</view>
				</view>
			</view>
			<view v-show="current==1" class="absolt" v-if="onpageshow">
				<div style="padding: 8rpx 28rpx 36rpx;box-sizing: border-box;display: flex;flex-wrap: wrap;">
					<view :class="item2==-1?'itemb':'itema'" @click="changeitem(-1,'')">全部</view>
					<view :class="item2==index?'itemb':'itema'" v-for="(item,index) in itemlist" :key="index"
						@click="changeitem(index,item.id)">
						{{item.title}}
					</view>
				</div>
				<view class="u-flex u-row-between" style="padding: 20rpx 28rpx;box-sizing: border-box;">
					<view class="btn1" @click="onpageshow=false">取消</view>
					<view class="btn2" @click="enter">确认</view>
				</view>
			</view>
			<view v-show="current==2" class="absolt" v-if="onpageshow">
				<div style="padding: 8rpx 28rpx 36rpx;box-sizing: border-box;display: flex;flex-wrap: wrap;">
					<view :class="item3==-1?'itemb':'itema'" @click="changeitem(-1,'')">全部</view>
					<view :class="item3==index?'itemb':'itema'" v-for="(item,index) in itemlist" :key="index"
						@click="changeitem(index,item.id)">
						{{item.title}}
					</view>
				</div>
				<view class="u-flex u-row-between" style="padding: 20rpx 28rpx;box-sizing: border-box;">
					<view class="btn1" @click="onpageshow=false">取消</view>
					<view class="btn2" @click="enter">确认</view>
				</view>
			</view>
		</view>
		<scroll-view :scroll-y='true' style="height: calc(100vh - 200px);box-sizing: border-box;">
			<view class="u-flex u-row-between u-flex-wrap">
				<view class="" @click="toinfo(item.id)" v-for="(item,index) in paperlist" :key="index"
					style="margin-top: 26rpx;display: inline-block;padding-bottom: 20rpx;">
					<image :src="item.image" style="width: 334rpx;height: 460rpx;" mode=""></image>
					<view class="title u-line-1">{{item.title}}…</view>
					<view class="writer u-line-1">{{item.author}}</view>
					<view class="" style="margin-top: 8rpx;">
						<text class="ding">定价</text>
						<text class="money">¥{{item.price}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				level_id: '',
				arrangement_id: '',
				speciality_id: "",
				book_type: 1,
				is_new_recommend: '',
				is_awards: '',
				page: 1,
				limit: 10,
				current: 0,
				paperlist: [],
				itemlist: [],
				item1: -1,
				onpageshow: false,
				itemid: '',
				item2: -1,
				item3: -1,
				itemlist1: [],
				itemlist2: [],
				total: '',
			};
		},
		created(options) {
			//新书
			this.getBooksList()
			this.getBooksLevel()
			this.getBooksSpeciality()
			this.getBooksArrangement()
		},
		onPullDownRefresh() {
			if (this.paperlist.length < this.total) {
				this.page++
				this.getBooksList()
			}
		},
		methods: {
			toinfo(id) {
				uni.navigateTo({
					url: '/pages/index/bookinfo?id=' + id
				})
			},
			//确定
			enter() {
				this.onpageshow = false
				this.getBooksList()
			},
			changeitem(index, id) {
				if (this.current == 0) {
					this.level_id = id
					this.item1 = index
				}
				if (this.current == 1) {
					this.arrangement_id = id
					this.item2 = index
				}

				if (this.current == 2) {
					this.speciality_id = id
					this.item3 = index
				}
			},
			//级别
			getBooksLevel() {
				this.$u.post('api/books/getBooksLevel', {}).then(res => {
					this.itemlist = res.data
				})
			},
			getBooksArrangement() {
				this.$u.post('api/books/getBooksArrangement', {}).then(res => {
					this.itemlist1 = res.data
				})
			},
			getBooksSpeciality() {
				this.$u.post('api/books/getBooksSpeciality', {}).then(res => {
					this.itemlist2 = res.data
				})
			},
			change(index) {
				this.onpageshow = true
				this.current = index
				this.is_new_recommend = ''
				this.is_awards = ''
				this.getBooksList()
				if (this.current == 0) {
					this.getBooksLevel()
				}
				if (this.current == 1) {
					this.itemlist = this.itemlist1
				}
				if (this.current == 2) {
					this.itemlist = this.itemlist2
				}
			},
			getBooksList() {
				if (this.current == 4) {
					this.is_new_recommend = 0
					this.onpageshow = false
				}
				if (this.current == 3) {
					this.is_awards = 0
					this.onpageshow = false
				}
				this.$u.post('api/books/getBooksList', {
					level_id: this.level_id,
					arrangement_id: this.arrangement_id,
					speciality_id: this.speciality_id,
					book_type: this.book_type,
					is_new_recommend: this.is_new_recommend,
					is_awards: this.is_awards,
					page: this.page,
					limit: this.limit
				}).then(res => {
					console.log('list', res);
					if (this.page == 1) {
						this.paperlist = res.data.data
					} else {
						this.paperlist.concat(res.data.data)
					}
					this.total = res.data.total
				})
			}
		},
	}
</script>

<style lang="scss">
	.itema {
		height: 60rpx;
		border-radius: 8rpx;
		border: 1rpx solid rgba(151, 151, 151, 1);
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #444444;
		margin-right: 24rpx;
		line-height: 60rpx;
		text-align: center;
		padding: 0 27rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.itemb {
		height: 60rpx;
		border-radius: 8rpx;
		border: 1rpx solid rgba(6, 169, 113, 0.1);
		background: rgba(6, 169, 113, 0.1);
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #06A971;
		margin-right: 24rpx;
		line-height: 60rpx;
		text-align: center;
		padding: 0 27rpx;
		margin-top: 20rpx;
	}

	.btn1 {
		width: 260rpx;
		height: 76rpx;
		background: #F3F3F3;
		border-radius: 12rpx;
		line-height: 76rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;

	}

	.btn2 {
		width: 402rpx;
		height: 76rpx;
		background: #06A971;
		border-radius: 12rpx;
		line-height: 76rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.absolt {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: absolute;
		top: 30rpx;
		left: -24rpx;
		// height: 300rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		width: 750rpx;
		z-index: 100;
	}

	.title {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 20rpx;
		width: 334rpx;
	}

	.writer {
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #444444;
		margin-top: 8rpx;
		width: 334rpx;
	}

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

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

	.page1 {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		padding: 28rpx 24rpx;
		height: 70vh;
		// height: 75.5vh;
	}

	.top {
		.fen {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #444444;
		}

		.new {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #06A971;
		}
	}
</style>